'How to set fixed column headers in react js
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} />
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
