Tables & Datagrids

Tables display structured data in rows and columns. They support sorting, filtering, pagination, and row actions.

Basic Table

Table Styling

Header Styles

Row Styles

Hover State

Table with Actions

Table Features

Sorting

<th onClick={() => handleSort('name')}>
  Name
  {sortColumn === 'name' && (
    sortDirection === 'asc' ? <ArrowUp /> : <ArrowDown />
  )}
</th>

Filtering

Filter Types:

• Global search: Search across all columns
• Column filters: Filter specific columns
• Date range: Filter by date ranges
• Multi-select: Select multiple filter values

Pagination

Page Sizes: 10, 25, 50, 100

Row Selection

Selection Features:

• Checkbox in first column
• Select all checkbox in header
• Selected row highlight
• Bulk action toolbar appears when rows selected

Bulk Actions Toolbar

Empty State

Loading State

Responsive Tables

Horizontal Scroll

On small screens, tables use horizontal scrolling:

.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Card View

For mobile, complex tables can transform into cards:

Column Types