Table does not sort when child is returned in <TableBody>

[isabellachen]

I was playing around with this code sandbox from another closed issue here, trying to get the rows to sort, but no success.

It was working in version 3.3.1 but is no longer working in later versions.

The problem is when TableBody returns the TableRow instead of directly calling

            <TableBody>
              {dataTableBody.map((row) => {
                return <TableRow key={row.case_id} rowData={row} />;
              })}
            </TableBody>

[imballinst]

Hey @isabellachen! Thanks for reporting this issue with sufficient description, I'll see what I can do.

[imballinst]

hi @isabellachen, according to the API reference, where this is the source:

https://github.com/imballinst/react-bs-datatable/blob/0e2d53065055cf8ed211226b0c133a9124f2dcf0/src/components/TableBody.tsx#L69-L72

I think the children now should be a function rather than JSX elements (if we are using uncontrolled table). Something like this: https://codesandbox.io/s/dry-firefly-g9s8v1?file=/src/App.js.

<TableBody>
  {rows => {
    return rows.map((row) => {
      return <TableRow key={row.case_id} rowData={row} />;
    })
  }}
</TableBody>

Probably it works in 3.3.1 because back in 3.3.1, TableBody doesn't accept children prop, so it renders the table properly 🤔

https://github.com/imballinst/react-bs-datatable/blob/f454c139cb245be8345201ea7b6673da2a30ee27/src/components/TableBody.tsx#L43-L67

Please let me know if you need further assistance. Thanks!

[isabellachen]

That was it. Thank you so much for the quick response!