imballinst / react-bs-datatable

Bootstrap datatable without jQuery. Features include: filter, sort, pagination, checkbox, and control customization.
https://imballinst.github.io/react-bs-datatable
MIT License
60 stars 20 forks source link

feat: allow customizing table row render #143

Closed imballinst closed 2 years ago

imballinst commented 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:

<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>