@mshafiqyajid/react-table
Headless table hook and styled component. Sort, filter, paginate, select rows. Generic TypeScript, sticky header, loading skeleton, empty state.
Playground #
| Name | Role | Status | Joined |
|---|---|---|---|
| Alice Johnson | Engineer | Active | 2022-01 |
| Bob Chen | Designer | Active | 2021-06 |
| Carol Williams | Manager | On leave | 2020-03 |
| David Kim | Engineer | Active | 2023-02 |
1 / 2
Props
TSX
import { TableStyled } from "@mshafiqyajid/react-table/styled";
import "@mshafiqyajid/react-table/styles.css";
<TableStyled
data={DATA}
columns={COLUMNS}
/>Install #
npm install @mshafiqyajid/react-tableQuick start #
import { TableStyled } from "@mshafiqyajid/react-table/styled";
import type { ColumnDef } from "@mshafiqyajid/react-table";
import "@mshafiqyajid/react-table/styles.css";
type User = { id: number; name: string; email: string };
const columns: ColumnDef<User>[] = [
{ key: "name", header: "Name", sortable: true },
{ key: "email", header: "Email", filterable: true },
];
<TableStyled data={users} columns={columns} sortable filterable paginate pageSize={10} hoverable />API #
| Prop | Type | Default | Description |
|---|---|---|---|
| data | T[] | — | Array of row objects |
| columns | ColumnDef<T>[] | — | Column definitions |
| sortable | boolean | false | Enable column sorting |
| filterable | boolean | false | Enable per-column filter inputs |
| selectable | boolean | false | Enable row checkboxes |
| paginate | boolean | false | Enable pagination |
| pageSize | number | 10 | Rows per page |
| size | "sm" | "md" | "lg" | "md" | Row density |
| tone | "neutral" | "primary" | "neutral" | Accent color |
| striped | boolean | false | Alternating row background |
| bordered | boolean | false | Cell borders |
| hoverable | boolean | true | Row hover highlight |
| stickyHeader | boolean | false | Freeze header on scroll |
| loading | boolean | false | Show skeleton rows |
| emptyText | ReactNode | "No data" | Empty state content |
| caption | string | — | Accessible table caption |
| onRowClick | (row) => void | — | Row click handler |
| rowKey | (row) => string | — | Custom key extractor |
| toolbar | ReactNode | — | Slot rendered above the table |
| page | number | — | Controlled current page |
| onPageChange | (page) => void | — | Controlled page change callback |
ColumnDef fields #
| Field | Type | Default | Description |
|---|---|---|---|
| key | string | — | Data key to read from row object |
| header | string | — | Column header label |
| sortable | boolean | false | Enable sorting on this column |
| filterable | boolean | false | Per-column filter input |
| align | "left" | "center" | "right" | — | Column text alignment |
| sticky | "left" | "right" | — | Sticky column position |
| render | (value, row) => ReactNode | — | Custom cell renderer |