UIforSaaSData Table
Filterable, sortable data table with search, status filters, and pagination.
Preview
Features
- Generic TypeScript support with custom column definitions
- Filter chips with search input and status popover (Vercel style)
- Clickable column headers for sorting (asc/desc)
- Simple pagination with Previous/Next buttons
- Custom cell rendering via render function
- Loading skeleton state
- Empty state with icon
- Optional row click handler
Install Summary
This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.
Component Files
| File | Path |
|---|---|
| data-table.tsx | components/data/data-table/data-table.tsx |
| data-table-filters.tsx | components/data/data-table/data-table-filters.tsx |
| data-table-pagination.tsx | components/data/data-table/data-table-pagination.tsx |
| data-table-empty.tsx | components/data/data-table/data-table-empty.tsx |
| types.ts | components/data/data-table/types.ts |
| index.ts | components/data/data-table/index.ts |
Utility Files
| File | Path |
|---|---|
| design-tokens.ts | lib/design-tokens.ts |
Dependencies
Install these dependencies before using the component:
Installation
Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:
Code available with Pro
Unlock this component to download or copy the install files.
One-time $99. Updates included.
Component Files
The component consists of the following files:
1. data-table.tsx
2. data-table-filters.tsx
3. data-table-pagination.tsx
4. data-table-empty.tsx
5. types.ts
6. index.ts
Shared Utilities
This component uses shared utility functions. These are included in the bundle above:
design-tokens.ts
Usage
DataTable Props
| Prop | Type | Default |
|---|---|---|
| data | T[] | required |
| columns | Column<T>[] | required |
| filterKey | keyof T | - |
| statusKey | keyof T | - |
| statusOptions | StatusOption[] | - |
| pageSize | number | 10 |
| loading | boolean | false |
| emptyMessage | string | "No results found" |
| onRowClick | (row: T) => void | - |
Column Configuration
| Property | Type | Description |
|---|---|---|
| key | keyof T | Property key to access from data row |
| label | string | Column header text |
| sortable | boolean | Enable sorting for this column |
| render | (value, row) => ReactNode | Custom cell renderer |