@inftechsol/data-table

Responsive React data table with search, sort, pagination, card layout on mobile, and client/async hooks.

Peers only: react, react-dom (no FontAwesome, no @inftechsol/form).

Install

npm i @inftechsol/data-table

import '@inftechsol/data-table/styles.css'
import { DataTable, useClientTable } from '@inftechsol/data-table'

Theming

Styles use --its-* CSS variables. Override them for your brand, or map app tokens (see InfTechSol UI form-token-bridge.css).

You may skip styles.css and style via your own CSS using the documented class structure / className prop.

Client table

const table = useClientTable({
  items: rows,
  pageSize: 8,
  sortAccessors: { nev: (r) => r.nev },
  getFilterText: (r) => `${r.nev} ${r.email}`,
})

<DataTable
  columns={[{ id: 'nev', header: 'Név', sortable: true, cell: (r) => r.nev }]}
  rows={table.pageItems}
  page={table.page}
  totalPages={table.totalPages}
  onPageChange={table.setPage}
  sort={table.sort}
  onSortChange={table.setSort}
  search={table.search}
  onSearchChange={table.setSearch}
  totalItems={table.totalItems}
  getRowId={(r) => r.id}
/>

Async table

const table = useAsyncTable({
  pageSize: 20,
  fetcher: async ({ page, pageSize, search, sort }) => {
    const res = await api.list({ page, size: pageSize, q: search, sort })
    return { rows: res.items, totalItems: res.total }
  },
})

Also exports: Pagination, TableSort, AsyncTableQuery, AsyncTableResult.

Column id: 'actions' becomes the card footer on mobile.