DataTable
A powerful, feature-rich data table with sorting, filtering, pagination, and mobile responsiveness. Perfect for displaying complex datasets with full RTL support.
Preview
| Name | Role | |
|---|---|---|
| Ahmed Ali | ahmed@example.com | Admin |
| Fatima Hassan | fatima@example.com | Editor |
| Mohammed Youssef | mohammed@example.com | User |
| Sarah Abdullah | sarah@example.com | Editor |
| Omar Ibrahim | omar@example.com | User |
Installation
Basic Usage
Features
Sortable Columns
Click column headers to sort with RTL-aware indicators
Search & Filter
Built-in search with clear button and custom filtering
Pagination
Integrated pagination for large datasets
Loading States
Skeleton loading animation while fetching data
Mobile Responsive
Cards or horizontal scroll view on small screens
Custom Cells
Render custom components in any cell
Examples
Simple SortingNew
Use enableSorting for automatic sorting without managing state yourself. Perfect for simple tables.
| Ahmed Ali | ahmed@example.com | Admin | 2024-01-15 |
| Fatima Hassan | fatima@example.com | Editor | 2024-02-20 |
| Mohammed Youssef | mohammed@example.com | User | 2024-03-10 |
| Omar Ibrahim | omar@example.com | User | 2024-04-05 |
| Sarah Abdullah | sarah@example.com | Editor | 2024-03-25 |
Sortable Columns
For advanced use cases where you need to control the sort state externally (e.g., URL sync, API integration).
Click any column header to sort. Click again to reverse, and once more to clear sorting.
| Ahmed Ali | ahmed@example.com | Admin | 2024-01-15 |
| Fatima Hassan | fatima@example.com | Editor | 2024-02-20 |
| Mohammed Youssef | mohammed@example.com | User | 2024-03-10 |
| Sarah Abdullah | sarah@example.com | Editor | 2024-03-25 |
| Omar Ibrahim | omar@example.com | User | 2024-04-05 |
Searchable Table
| Name | Role | |
|---|---|---|
| Ahmed Ali | ahmed@example.com | Admin |
| Fatima Hassan | fatima@example.com | Editor |
| Mohammed Youssef | mohammed@example.com | User |
| Sarah Abdullah | sarah@example.com | Editor |
| Omar Ibrahim | omar@example.com | User |
Paginated Table
| Name | Role | |
|---|---|---|
| Ahmed Ali | ahmed@example.com | Admin |
| Fatima Hassan | fatima@example.com | Editor |
| Mohammed Youssef | mohammed@example.com | User |
Custom Cell Rendering
| Name | Status | Actions | |
|---|---|---|---|
Ahmed Ali | ahmed@example.com | Active | |
Fatima Hassan | fatima@example.com | Active | |
Mohammed Youssef | mohammed@example.com | Inactive | |
Sarah Abdullah | sarah@example.com | Active | |
Omar Ibrahim | omar@example.com | Active |
Loading State
| Name | Role | |
|---|---|---|
| Ahmed Ali | ahmed@example.com | Admin |
| Fatima Hassan | fatima@example.com | Editor |
| Mohammed Youssef | mohammed@example.com | User |
| Sarah Abdullah | sarah@example.com | Editor |
| Omar Ibrahim | omar@example.com | User |
Complete Example
All features combined: sorting, searching, pagination, and custom cells.
| Ahmed Ali | ahmed@example.com | Admin | 2024-01-15 |
| Fatima Hassan | fatima@example.com | Editor | 2024-02-20 |
| Mohammed Youssef | mohammed@example.com | User | 2024-03-10 |
Props
DataTable Props
| Name | Type | Default | Description |
|---|---|---|---|
dataRequired | T[] | - | Array of data to display in the table |
columnsRequired | ColumnDef<T>[] | - | Column definitions including headers, accessors, and cell renderers |
isLoading | boolean | false | Show skeleton loading state |
sortBy | string | undefined | Currently sorted column ID |
sortDirection | 'asc' | 'desc' | null | null | Current sort direction |
onSort | (columnId: string) => void | undefined | Callback when column header is clicked for sorting (external mode) |
enableSorting | boolean | false | Enable internal sorting (auto-manages sort state). Use this for simple tables that don't need external state management |
defaultSortBy | string | undefined | Default column to sort by (requires enableSorting) |
defaultSortDirection | 'asc' | 'desc' | null | 'asc' | Default sort direction (requires enableSorting) |
searchable | boolean | false | Enable search input above table |
searchPlaceholder | string | 'Search...' | Placeholder text for search input (English) |
searchValue | string | '' | Controlled search value |
onSearchChange | (value: string) => void | undefined | Callback when search value changes |
pagination | boolean | false | Enable pagination controls |
currentPage | number | 1 | Current page number |
totalPages | number | 1 | Total number of pages |
pageSize | number | 10 | Number of rows per page |
onPageChange | (page: number) => void | undefined | Callback when page changes |
mobileView | 'table' | 'cards' | 'cards' | Mobile view type: stacked cards or horizontal scroll table |
mobileSorting | boolean | true | Show sort buttons on mobile card view (only applies to cards mode) |
emptyMessage | string | 'No results found' | Message to show when no data |
striped | boolean | false | Alternate row background colors |
hoverable | boolean | true | Show hover effect on rows |
compact | boolean | false | Reduced padding for denser layout |
ColumnDef Props
| Name | Type | Default | Description |
|---|---|---|---|
idRequired | string | - | Unique column identifier |
headerRequired | string | - | Column header text (English) |
headerAr | string | undefined | Column header text (Arabic) |
accessorKeyRequired | keyof T | - | Key in data object to access for this column |
cell | (row: T) => React.ReactNode | undefined | Custom cell renderer function |
sortable | boolean | false | Enable sorting for this column |
align | 'start' | 'center' | 'end' | 'start' | Text alignment in cells |
width | string | undefined | Column width (CSS value) |
Accessibility
Semantic HTML
Built on top of the semantic Table component with proper thead, tbody, th, and td elements.
Keyboard Navigation
Sortable column headers are buttons that can be activated with Enter or Space keys. Search input is fully keyboard accessible.
Screen Readers
Sort indicators provide visual feedback, and the table structure is properly announced to screen readers with column headers associated to their cells.
Loading States
Skeleton loading states provide visual feedback while maintaining layout stability. Interactive elements are disabled during loading.
RTL Considerations
Automatic RTL Support
DataTable inherits RTL support from the base Table component. Sort indicators, search input, and all spacing use logical properties for proper RTL layout.
Sort Indicators
Chevron icons automatically position correctly in both LTR and RTL contexts. The sorting button layout adapts to text direction.
Search Input
Search icon and clear button position correctly using margin-inline-start (ms-) and margin-inline-end (me-) utilities, ensuring proper placement in both directions.
Mobile Cards
On mobile, the cards view uses a grid layout that automatically adapts to RTL, with labels on the start side and values on the end side.