Client-only DataTable
The simplest DataTable usage: all data loaded on the client, table handles everything locally. No server calls, no external state.
How it works
- All 50 users loaded at page render
- Search, filter, sort, and pagination happen in-browser
- Uses TanStack Table's built-in row models
- No manual mode props - fully uncontrolled
Users
50 users loaded client-side
Alex Smith | alex.smith@example.com | Engineering | Manager | Active | High | 90% | Jan 1, 2023 |
Jordan Smith | jordan.smith@example.com | Design | Manager | Inactive | High | 51% | Jan 8, 2023 |
Taylor Smith | taylor.smith@example.com | Marketing | Senior Developer | Pending | High | 72% | Jan 15, 2023 |
Morgan Smith | morgan.smith@example.com | Sales | Senior Developer | Active | Medium | 83% | Jan 22, 2023 |
Casey Smith | casey.smith@example.com | Operations | Designer | Inactive | Medium | 44% | Jan 29, 2023 |
Riley Smith | riley.smith@example.com | Finance | Designer | Pending | Medium | 65% | Feb 5, 2023 |
Quinn Smith | quinn.smith@example.com | HR | Analyst | Active | Low | 76% | Feb 12, 2023 |
Avery Smith | avery.smith@example.com | Product | Analyst | Inactive | Low | 37% | Feb 19, 2023 |
Parker Smith | parker.smith@example.com | Support | Coordinator | Pending | Low | 58% | Feb 26, 2023 |
Charlie Smith | charlie.smith@example.com | Legal | Coordinator | Active | High | 99% | Mar 5, 2023 |
0 of 50 row(s) selected.
Rows per page
Page 1 of 5
Usage Example
<BaseDataTable<DemoUser, unknown>
columns={columns}
data={demoUsers}
globalSearchColumns={["name", "email", "department"]}
searchPlaceholder="Search..."
filterableColumns={filterableColumns}
enableRowSelection
enableExport
/>
// No manualPagination, manualSorting, or manualFiltering
// = fully client-side operation