'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