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

[Isa Chen]

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>

[Try Ajitiono]

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

[Try Ajitiono]

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

react-bs-datatable/src/components/TableBody.tsx

Lines 69 to 72 in 0e2d530

 children?: 
   | ((rows: TTableRowType[]) => JSX.Element | JSX.Element[]) 
   | JSX.Element 
   | JSX.Element[]; 

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 🤔

react-bs-datatable/src/components/TableBody.tsx

Lines 43 to 67 in f454c13

 export interface TableBodyProps<TTableRowType extends TableRowType> { 
   /** Customize the labels of the `TableBody` component. */ 
   labels?: TableBodyLabels; 
   /** Customize the classes of the `TableBody` component. */ 
   classes?: TableBodyClasses; 
   /** The props passed to the table rows under `tbody`. */ 
   rowProps?: TableRowProps | ((row: TTableRowType) => TableRowProps); 
   /** The function fired when any of the rows is clicked. */ 
   onRowClick?: (row: TTableRowType) => void; 
   /** Props to make the component controlled. */ 
   controlledProps?: { 
     /** 
      * A record, which key is the column prop name and the value 
      * is of type `CheckboxState`. 
      */ 
     checkboxState?: Record<string, CheckboxState>; 
     /** The function fired when any checkbox in the table changes. */ 
     onCheckboxChange?: CheckboxOnChange; 
     /** 
      * The filtered data length. When not using filter control, 
      * then this should equal to the table body's length. 
      */ 
     filteredDataLength?: number; 
   }; 
 } 

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

[Isa Chen]

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