Columns are getting rendered but not the cell values, I tried console.log in the component file, it is coming. But why not render in the actual cell
const tableInstance = useTable({ columns, data });
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = tableInstance;
console.log(typeof columns,{columns});
console.log(typeof data,{data});
return (
<div>
<ReactBootStrap.Table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
})}
</tr>
)
})}
</tbody>
</ReactBootStrap.Table>
</div>
)
Also double checked the accessor with the response, I'm not using one of the columns from the response in my table, is that the reason? Can't figure this out at all
Related
i have tried in my code to call api and popolate a table with the information taken from that api. In my headers of the column i have setted them with the excact name taken from api, but i want to set them in a different name as i am told to.
For example the first header of the first column will be called: id. The second header will be: description. Third: number. 4th: quontity; 5th ready, 6th: reserved.
THank you guys for your time and for your help.
Here is the code:
function Table({ columns, data }) {
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
useTable({
columns,
data,
});
// Render the UI for your table
return (
<table className="TableStyle" {...getTableProps()}>
<thead className="TableHeder">
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th className="TableHeaderCell" {...column.getHeaderProps()}>{column.render("Header")}</th>
))}
</tr>
))}
</thead>
<tbody className="TableBody" {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr className="TableSingleRow" {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td className="TableCell" {...cell.getCellProps()}>{cell.render("Cell")}</td>;
})}
</tr>
);
})}
</tbody>
</table>
);
}
The second part will be:
// this will run evertime one of the following state will change => data, currentPage, dataPerPage
useEffect(() => {
// generate dynamically columns from first object from array
setColumns(
Object.keys(data[0] || []).map((key) => ({
Header: key,
accessor: key,
}))
);
filterData();
}, [data, currentPage, dataPerPage]);
The last part which will be the return :
<Table columns={columns} data={currentData} />
I'm new to react table, I've created the basic table using react-table. I'm not able to figure out how to change the color of a cell when click on that particular cell. I don't find any resource or related question on Stackoverflow.
Here is my Code looks like:
import React, { useMemo } from 'react'
import { useTable } from 'react-table'
import MOCK_DATA from '../MOCK_DATA.json'
import { COLUMN } from './Column'
import './table.css'
export const BasicTable = () => {
const columns = useMemo(() => COLUMN, [])
const data = useMemo(() => MOCK_DATA, [])
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
prepareRow
} = useTable({
columns,
data
})
return (
<>
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
<tfoot>
{footerGroups.map(footerGroup => (
<tr {...footerGroup.getFooterGroupProps()}>
{footerGroup.headers.map(column => (
<td {...column.getFooterProps()}>{column.render('Footer')}</td>
))}
</tr>
))}
</tfoot>
</table>
</>
)
}
I'm getting demo data in MOCK_DATA(it's just random data). When I click on particular cell I want that particular cell color change. How I should approach this. In react if we want to change color of button or anything else we can use useState to do that but I'm not able to figure out here.
Here is the live example: https://codesandbox.io/s/focused-field-2sgkqz?file=/src/MOCK_DATA.json:35842-48670
you want is:when you click a particular cell,that particular cell change color?
if so, you just need remember the selected row.like is demo, is this you want ?
I am new to react.
I made a table using react-table module I'm trying to highlight all the cells where the cell in the first column doesn't equal the cell next to it in column 2.
here is my table component:
const Table = () => {
const columns = useMemo(() => Columns, [])
const data = useMemo(() => mock, [])
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
state,
setGlobalFilter,
} = useTable({
columns,
data,
}, useGlobalFilter)
const { globalFilter } = state
return (
< >
<SearchBar searchValue={globalFilter} setSearchValue={setGlobalFilter}/>
<div>
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) =>(
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>
{column.render('Header')}
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{
rows.map((row) =>{
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell, index)=> {
return <td {...cell.getCellProps()} style = {{
backgroundColor:{rows[0].cells[index].value!==rows[1].cells[index].value ? 'red': null}
}}>{cell.render('Cell')}</td>
})}
</tr>
)
})
}
</tbody>
</table>
</div>
</>
)
}
export default Table
when I run this I get two errors
expected ',' at
backgroundColor:{rows[0].cells[index].value!==rows[1].cells[index].value
? 'red': null}
expected ':' at
backgroundColor:{rows[0].cells[index].value!==rows[1].cells[index].value
? 'red': null}
any help would be really appreciated
{backgroundColor:(rows[0].cells[index].value!==rows[1].cells[index].value ? 'red': null)}
use parentheses not braces.
I am trying to add a "delete" button to every row of data using react-table. Button splices the data and removes that line from data when pressed. When the "delete" button is clicked for the first time it works properly. However on the second press nothing happens. For some reason changeData doesn't change the data on the second run. Why this happens?
function DataTable({columns, data_rows}) {
const [data, changeData] = useState(data_rows);
if (columns[0].Header !== "Action") {
columns.unshift({
Header: 'Action'
});
}
columns[0]['columns'] = [{
Header: ' ', Cell: ({row}) => (
<ButtonGroup>
<Button className="button-dark button-sm" onClick={() => {
const dataCopy = [...data];
dataCopy.splice(row.index, 1);
changeData(dataCopy);}}>
Remove
</Button>
</ButtonGroup>
)
}]
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = useTable({
columns,
data
});
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render("Header")}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
})}
</tr>
);
})}
</tbody>
</table>
);
}
By doing the following component I encountered the following error:
TypeError: setGlobalFilter is not a function.
The version of react-table is 7.0.0 and I followed the example but it doesn't work.
I'm attaching the code that I use and that I have written.
My code:
import React from 'react';
import { useTable, useGlobalFilter } from 'react-table';
function GlobalFilter({
preGlobalFilteredRows,
globalFilter,
setGlobalFilter,
}) {
return (
<span>
Search:{' '}
<input
value={globalFilter || ''}
onChange={e => {
setGlobalFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
}}
placeholder={`records...`}
style={{
fontSize: '1.1rem',
border: '0',
}}
/>
</span>
)
}
The table is:
const Table = ({columns, data}) => {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
preGlobalFilteredRows,
setGlobalFilter,
state
} = useTable({
columns,
data,
useGlobalFilter
})
// Render the UI for your table
return (
<>
<div>
</div>
<table {...getTableProps()} className="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<thead>
<tr>
<th
colSpan={2}
style={{
textAlign: 'left',
}}
>
<GlobalFilter
preGlobalFilteredRows={preGlobalFilteredRows}
globalFilter={state.globalFilter}
setGlobalFilter={setGlobalFilter}
/>
</th>
</tr>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
</>
)
}
export default Table;
Why?
Change the code for useTable in the table file
} = useTable(
{
columns,
data
},
useGlobalFilter
)
Further you can check this example