Usage of `react-table` results in warnings across several pages/modals

[kasperkristensen]

What

• The current usage of React-Table is throwing many warnings across the project.
• These warnings are being thrown due to mainly two reasons:
  • Cells are not being provided with a unique key.
  • Invalid nesting of table tags.

Steps to fix the issues

Issue 1

Currently, we have the following pattern across several forms.

//some-table.tsx

//...
<Table.Row
  color={"inherit"}
  linkTo={`/a/draft-orders/${row.original.id}`}
  {...row.getRowProps()}
>
  {row.cells.map((cell, index) => {
    return cell.render("Cell", { index })}
  })}
</Table.Row>
//...

// use-some-form-columns.tsx

const columns = useMemo(
    () => [
      {
        Header: "Draft",
        accessor: "display_id",
        Cell: ({ cell: { value }, index }) => (
          <Table.Cell
            key={index}
            className="pl-2"
          >{`#${value}`}</Table.Cell>
        ),
      }
  ], 
  []
)

There are two issues with this. First, we are trying to set the key in the render method outside of the table. This does not work in React. We need to set the key directly, as:

{arr.map((a, index) => {
  return (
    <span key={index}>{a}<span>
  )
})}

Second, we are passing the index as a custom prop to the render method: cell.render("Cell", { index }), and then trying to access it as Cell: ({ cell: { value }, **index** }) => { ... }. Here index is an empty object because the custom props are added to the cell directly, so in order to access it we should do it like Cell: ({ cell: { value, **index** } }) => { ... }. This is not relevant to solving the issue as we need to assign the key before this step, but simply a note for future reference if we wish to pass custom props to our cells or other table components.

To solve this I propose we update our Tables across the admin as such:

//some-table.tsx

//...
<Table.Row
  color={"inherit"}
  linkTo={`/a/draft-orders/${row.original.id}`}
  {...row.getRowProps()}
>
  {row.cells.map((cell) => {
    return (
       <Table.Cell
          {...cell.getCellProps()} // this will set a unique key as well as colSpan and other relevant cell properties.
          className="pl-2"
       >
         {cell.render("Cell")}
       </Table.Cell>
  })}
</Table.Row>
//...

// use-some-form-columns.tsx

const columns = useMemo(
    () => [
      {
        Header: "Draft",
        accessor: "display_id",
        Cell: ({ cell: { value } }) => (
          `#${value}` // no longer rendering the Cell component here, but only the content whether that be a string or another component.
        ),
      }
  ], 
  []
)

some tables have the same issue with Rows, Headers, etc. Sane principles apply to fix these cases.

Issue 2

This is a simple matter of performing a walkthrough of our tables and making sure that the HTML tags are used properly. This could be a case of a missing Table.Head or Table.Body, nesting a <Table.SortingHeadCell> inside of a <Table.HeadCell> resulting in the HTML <th><th></th></th> which is invalid etc.