Data Table

Nexadmin includes a reusable TanStack Table foundation used by Users, Tasks, Products, Orders, and Customers.

Capabilities

• Search across configured columns
• Column filters
• Ascending and descending sorting
• Pagination and page-size controls
• Row selection
• Column visibility controls
• Toolbar and row actions
• Loading, empty, filtered-empty, and error states
• Responsive horizontal scrolling for wide tables

Basic usage

Define feature-specific columns near the page, then pass them and your data to the shared table:

<DataTable
  columns={columns}
  data={users}
  getRowId={(user) => user.id}
  searchableColumnIds={["name", "email"]}
  searchPlaceholder="Search users..."
/>

Optional props add filters, toolbar actions, custom empty-state copy, loading state, error state, and retry behavior. See the existing Users or Products table for a complete feature example.

Adapting the table

Keep row types in types/, feature columns close to their route, and shared table behavior in components/data-table/. The included filtering, sorting, and pagination operate on the data passed to the component; connect server-side data handling when your application requires it.