Closed imballinst closed 2 years ago
Fixes https://github.com/imballinst/react-bs-datatable/issues/142. We can now customize the table row rendering by either passing a callback function to TableBody children, or pass JSX.Element or JSX.Element[] to TableBody children. Example:
TableBody
JSX.Element
JSX.Element[]
<DatatableWrapper body={json} headers={headers} sortProps={SORT_PROPS} paginationOptionsProps={{ initialState: { rowsPerPage, options: rowsPerPageOptions } }} > <Row className="mb-4"> <Col xs={12} lg={4} className="d-flex flex-col justify-content-end align-items-end" > <Filter /> </Col> <Col xs={12} sm={6} lg={4} className="d-flex flex-col justify-content-lg-center align-items-center justify-content-sm-start mb-2 mb-sm-0" > <PaginationOptions alwaysShowPagination={alwaysShowPagination} /> </Col> <Col xs={12} sm={6} lg={4} className="d-flex flex-col justify-content-end align-items-end" > <Pagination alwaysShowPagination={alwaysShowPagination} /> </Col> <Col xs={12} className="mt-2"> {checkboxControl} </Col> </Row> <Table> <TableHeader /> <TableBody<StoryColumnType>> {(rows) => rows.length === 0 ? ( <EmptyTablePlaceholder /> ) : ( rows.map((rowData) => rowData.status === 'unknown' ? ( <tr key={rowData.username}> <td colSpan={headers.length}>Row status unknown</td> </tr> ) : ( <TableRow key={rowData.username} rowData={rowData} onRowClick={onRowClick} /> ) ) ) } </TableBody> </Table> </DatatableWrapper>
Fixes https://github.com/imballinst/react-bs-datatable/issues/142. We can now customize the table row rendering by either passing a callback function to
TableBody
children, or passJSX.Element
orJSX.Element[]
toTableBody
children. Example: