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

feature(checkbox): implement checkbox API #117

Closed imballinst closed 2 years ago

imballinst commented 2 years ago

Closes https://github.com/imballinst/react-bs-datatable/issues/74. This PR implements the checkbox feature for the table. To enable it, do as the following:

// In the table header:
{
  prop: 'checkbox',
  checkbox: { idProp: 'id' }
}

// The table body, example row:
{
  id: '123', name: 'Hello world'
}

Then, in the JSX:

<DatatableWrapper
  body={json}
  headers={headers}
>
  <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"
    >
      <PaginationOpts />
    </Col>
    <Col
      xs={12}
      sm={6}
      lg={4}
      className="d-flex flex-col justify-content-end align-items-end"
    >
      <Pagination />
    </Col>
    <Col xs={12} className="mt-2">
      <BulkCheckboxControl />
    </Col>
  </Row>
  <Table>
    <TableHeader tableHeaders={headers} />
    <TableBody onRowClick={rowOnClick} />
  </Table>
</DatatableWrapper>

The BulkCheckboxControl will enable selection/deselection of the rows beyond the current page.