@bsol-oss/react-datatable5

React Datatable

Installation

npm install @tanstack/react-table @chakra-ui/react @bsol-oss/react-datatable5

Usage

DataTable

<DataTable columns={columns} data={data}>
  <Flex>
    <TablePagination />
    <EditViewButton />
    <EditFilterButton />
    <EditOrderButton />
    <PageSizeControl />
    <TableSelector />
    <GlobalFilter />
  </Flex>
  <Table>
    <TableHeader canResize />
    <TableBody />
    <TableFooter />
  </Table>
  <PageSizeControl />
  <TablePagination />
</DataTable>

DataTableServer

<DataTableServer
  columns={columns}
  url={"http://localhost:8333/api/v1/gpt/chat/history/all"}
>
  <Flex>
    <TablePagination />
    <EditViewButton />
    <EditFilterButton />
    <DensityToggleButton />
    <EditOrderButton />
    <PageSizeControl />
    <TableSelector />
    <GlobalFilter />
  </Flex>
  <Table>
    <TableHeader canResize />
    <TableBody />
    <TableFooter />
  </Table>
  <Flex>
    <TablePagination />
    <EditViewButton />
    <EditFilterButton />
    <EditOrderButton />
    <PageSizeControl />
    <TableSelector />
  </Flex>
</DataTableServer>

Example Url generated by the DataTableServer

GET http://localhost:8333/api/v1/gpt/chat/history/all?pagination={"offset":0,"rows":10}&sorting={}&where={}&searching=hello