Reusable React data table with search, sort, pagination, row expansion, and CSV export.
From the app root:
cd react-data-table && npm install && npm run buildLink in bldrx-client-frontend/package.json:
"@rqdhw3n/react-data-table": "file:./react-data-table"import { DataTable, exportDataTableToCsv, type Column } from '@rqdhw3n/react-data-table'
type Product = { id: string; name: string; price: number }
const columns: Column<Product>[] = [
{ id: 'name', header: 'Name', accessor: 'name' },
{ id: 'price', header: 'Price', accessor: 'price' },
]
<DataTable
columns={columns}
data={products}
btnLabel='Export'
exportCsv={{ fileName: 'products.csv', scope: 'all' }}
/>| Mode | Behavior |
|---|---|
| Built-in | Set btnLabel without onExportClick — downloads filtered/sorted data as CSV |
| Custom | Pass onExportClick for API-backed export (e.g. server-generated CSV) |
| Utility | exportDataTableToCsv(columns, rows, 'file.csv') anywhere in your app |
exportCsv.scope:
all(default) — full processed dataset (filtered + sorted)page— current page only
<DataTable
columns={columns}
data={pageRows}
isFrontEndPagination
paginationMeta={{ totalCount, currentPage, totalPages, pageSize }}
onPageChange={setPage}
onLimitChange={setLimit}
onSearchChange={setSearch}
onSortChange={(sortBy, sortOrder) => { /* ... */ }}
/>import { TableActionMenu } from '@rqdhw3n/react-data-table'react>= 18react-dom>= 18lucide-react>= 0.400
npm run build # ESM + CJS + types
npm test
npm run typecheckStyles are injected automatically when you import the package (no Tailwind required).
In DevTools you should see:
- classes like
rdt,rdt__table,rdt__btnon elements - a
<style id="rdt-styles">tag in<head>
Optional overrides via CSS variables on .rdt:
.rdt {
--rdt-primary: #7c3aed;
--rdt-font: 'Inter', sans-serif;
}Fallback (if styles don't load):
import '@rqdhw3n/react-data-table/styles.css'