DataTable
Advanced data grid with sorting, filtering, pagination, row selection, inline editing, and virtualization for large datasets
DataTable
A flexible data grid with sorting, pagination, loading states and compact header layout built for Saha UI. Use the component API for fast setup or the compact header for dashboard lists.
Basic usage
Pass data and columns to DataTable. Enable the global filter for simple search and configure the page size for pagination.
Name | Email | Role | Status |
|---|---|---|---|
| Olivia Martin | [email protected] | Admin | active |
| Jackson Lee | [email protected] | Editor | active |
| Isabella Nguyen | [email protected] | Viewer | invited |
| Liam Brown | [email protected] | Editor | suspended |
| Sophia Patel | [email protected] | Viewer | active |
This example shows a searchable, paginated table with a primary variant.
Variants
Use the variant prop to change table chrome. This is useful for dashboards where different tables indicate emphasis or semantic meaning.
Default variant
Name | Email | Role | Status |
|---|---|---|---|
| Olivia Martin | [email protected] | Admin | active |
| Jackson Lee | [email protected] | Editor | active |
| Isabella Nguyen | [email protected] | Viewer | invited |
Glass variant
Name | Email | Role | Status |
|---|---|---|---|
| Olivia Martin | [email protected] | Admin | active |
| Jackson Lee | [email protected] | Editor | active |
| Isabella Nguyen | [email protected] | Viewer | invited |
Primary variant
Name | Email | Role | Status |
|---|---|---|---|
| Olivia Martin | [email protected] | Admin | active |
| Jackson Lee | [email protected] | Editor | active |
| Isabella Nguyen | [email protected] | Viewer | invited |
Outline variant
Name | Email | Role | Status |
|---|---|---|---|
| Olivia Martin | [email protected] | Admin | active |
| Jackson Lee | [email protected] | Editor | active |
| Isabella Nguyen | [email protected] | Viewer | invited |
Sizes & density
Adjust the size to make rows more compact or spacious. This controls padding and font-size.
Small
Name | Email | Role | Status |
|---|---|---|---|
| Olivia Martin | [email protected] | Admin | active |
| Jackson Lee | [email protected] | Editor | active |
| Isabella Nguyen | [email protected] | Viewer | invited |
| Liam Brown | [email protected] | Editor | suspended |
Medium (default)
Name | Email | Role | Status |
|---|---|---|---|
| Olivia Martin | [email protected] | Admin | active |
| Jackson Lee | [email protected] | Editor | active |
| Isabella Nguyen | [email protected] | Viewer | invited |
| Liam Brown | [email protected] | Editor | suspended |
Large
Name | Email | Role | Status |
|---|---|---|---|
| Olivia Martin | [email protected] | Admin | active |
| Jackson Lee | [email protected] | Editor | active |
| Isabella Nguyen | [email protected] | Viewer | invited |
| Liam Brown | [email protected] | Editor | suspended |
Striped rows
Use the striped prop for zebra rows. This improves readability for dense data tables.
Odd rows striped
Name | Email | Role | Status |
|---|---|---|---|
| Olivia Martin | [email protected] | Admin | active |
| Jackson Lee | [email protected] | Editor | active |
| Isabella Nguyen | [email protected] | Viewer | invited |
| Liam Brown | [email protected] | Editor | suspended |
| Sophia Patel | [email protected] | Viewer | active |
Even rows striped
Name | Email | Role | Status |
|---|---|---|---|
| Olivia Martin | [email protected] | Admin | active |
| Jackson Lee | [email protected] | Editor | active |
| Isabella Nguyen | [email protected] | Viewer | invited |
| Liam Brown | [email protected] | Editor | suspended |
| Sophia Patel | [email protected] | Viewer | active |
Loading & empty states
Show a skeleton while fetching data with the loading prop, and provide custom content for empty tables using emptyComponent.
Loading
Name | Email | Role | Status |
|---|---|---|---|
| Olivia Martin | [email protected] | Admin | active |
| Jackson Lee | [email protected] | Editor | active |
| Isabella Nguyen | [email protected] | Viewer | invited |
| Liam Brown | [email protected] | Editor | suspended |
| Sophia Patel | [email protected] | Viewer | active |
Custom empty state
Name | Email | Role | Status |
|---|---|---|---|
📭 No users found yet Get started by creating your first user. | |||
Borders & layout
Toggle outer borders with bordered. Borderless tables blend into cards or surfaces.
With border (default)
Name | Email | Role | Status |
|---|---|---|---|
| Olivia Martin | [email protected] | Admin | active |
| Jackson Lee | [email protected] | Editor | active |
| Isabella Nguyen | [email protected] | Viewer | invited |
| Liam Brown | [email protected] | Editor | suspended |
Borderless table
Name | Email | Role | Status |
|---|---|---|---|
| Olivia Martin | [email protected] | Admin | active |
| Jackson Lee | [email protected] | Editor | active |
| Isabella Nguyen | [email protected] | Viewer | invited |
| Liam Brown | [email protected] | Editor | suspended |
Compact header layout
Use DataTableCompact to render a header with title, description, actions and search above the table. Perfect for dashboard cards and management screens.
User management
Manage members of your workspace.
Name | Email | Role | Status |
|---|---|---|---|
| Olivia Martin | [email protected] | Admin | active |
| Jackson Lee | [email protected] | Editor | active |
| Isabella Nguyen | [email protected] | Viewer | invited |
| Liam Brown | [email protected] | Editor | suspended |
| Sophia Patel | [email protected] | Viewer | active |
Usage Guidelines
When to Use
- Large datasets
- Sortable/filterable data
- CRUD tables
Accessibility
- Proper table semantics
- Sortable columns announced
Performance
- Virtualization for large data
- Efficient column rendering
Common Mistakes
- All columns same width
- Not paginating large datasets
Frequently Asked Questions
Related Components
View allCollapsible content sections with single/multiple expansion modes, animation, and keyboard navigation
User avatar with image loading, fallback text generation, status indicators, and shape variants
Stacked avatar display with overflow handling, max count configuration, and hover expansion
Status indicator with variant system, dot mode, positioning, and pulsing animation support