Entity Table
A composable table component for displaying tabular data. Uses compound components (EntityTable.Header, EntityTable.Toolbar, EntityTable.Empty, EntityTable.Error, EntityTable.Pagination) for flexible layouts. Supports sorting, searching, row selection, bulk actions, column visibility, stagger animations, glass effect styling (type/invert), row density (gap), and both load-more and page-based pagination. Two loading variants: skeleton or blurred overlay. Flexible ID handling with keyExtractor prop. No tanstack/react-table dependency.
Installation
$ npx shadcn@latest add @orecus/entity-tableDependencies:
motionlucide-react
Registry:
@orecus/header@orecus/enhanced-empty-state@orecus/enhanced-button@orecus/use-reduced-motion@orecus/loading-overlay@orecus/color-utilscheckboxdropdown-menutooltipskeletoninputpopover
Component
Team Members
Manage your team members and their roles. Search and column visibility are integrated in the header.
| Actions | ||||||
|---|---|---|---|---|---|---|
| Alice Johnson | alice@example.com | admin | active | 1/15/2024 | ||
| Bob Smith | bob@example.com | editor | active | 2/20/2024 | ||
| Carol Williams | carol@example.com | viewer | pending | 3/10/2024 | ||
| David Brown | david@example.com | editor | inactive | 4/5/2024 | ||
| Eva Martinez | eva@example.com | admin | active | 5/12/2024 | ||
| Frank Garcia | frank@example.com | viewer | active | 6/18/2024 | ||
| Grace Lee | grace@example.com | editor | pending | 7/22/2024 | ||
| Henry Wilson | henry@example.com | viewer | active | 8/30/2024 |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data* | T[] | undefined | — | Array of entities to display (extends BaseEntity). If undefined, automatically triggers loading state. |
columns* | EntityTableColumn<T>[] | — | Column definitions with key, header, sortable, cell renderer, etc. |
keyExtractor | (item: T, index: number) => string | number | — | Function to extract unique key from entity. Default: tries _id, id, key, then falls back to index |
children* | ReactNode | — | Compound components: EntityTable.Header, EntityTable.Toolbar, EntityTable.Empty, EntityTable.Pagination |
actions | EntityTableRowAction<T>[] | — | Row actions with icon, label, onClick handler |
selection | boolean | false | Enable row selection with checkboxes |
bulkActions | EntityTableBulkAction<T>[] | — | Actions for selected rows (requires selection=true) |
defaultSort | { key: string; direction: 'asc' | 'desc' } | — | Default sort state for uncontrolled sorting |
type | 'normal' | 'subtle' | 'strong' | 'solid' | 'none' | 'normal' | Glass effect variant for table styling |
invert | boolean | false | Invert glass overlay (light on light, dark on dark) |
gap | 'compact' | 'comfortable' | 'relaxed' | 'comfortable' | Row padding density (compact for dense data, relaxed for readability) |
stagger | 'none' | 'fade' | 'slide' | 'scale' | 'none' | Stagger animation preset for row entrance. 'slide' slides down when adding, slides up when removing |
staggerDelay | number | 0.03 | Delay between staggered row animations in seconds |
loading | boolean | false | Shows loading state when true |
loadingVariant | 'skeleton' | 'overlay' | 'skeleton' | Loading display: skeleton rows or blurred overlay with spinner |
loadingCount | number | 5 | Number of skeleton rows to show when loading |
error | Error | null | — | Error object if data fetching failed |
className | string | — | Additional CSS classes for the container |
Compound Components
EntityTable.Header
The header section of the table.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | The title text |
showSearch | boolean | — | Show integrated search input |
showColumnVisibility | boolean | — | Show column visibility toggle |
EntityTable.Toolbar
A separate toolbar for search and filters.
| Prop | Type | Default | Description |
|---|---|---|---|
showSearch | boolean | — | Show search input |
filters | ReactNode | — | Custom filter elements |
EntityTable.Pagination
Pagination controls.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'pages' | 'load-more' | — | Pagination variant |
pageSize | number | — | Items per page |
page | number | — | Current page number |
totalPages | number | — | Total number of pages |
EntityTable.Empty
The empty state display. Extends EnhancedEmptyState props.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Title text for the empty state |
description | string | — | Description text |
icon | LucideIcon | — | Icon to display |
action | ReactNode | — | Action button or element |
className | string | — | Additional CSS classes |
EntityTable.Error
The error state display. Shows default error UI or custom content.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Custom error content (overrides default) |
EntityTable.Stats
A section for displaying statistics between header and table.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Stat card components to render |
className | string | — | Additional CSS classes |
EntityTable.Filters
A popover-based filter section.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Filter content to render inside the popover |
trigger | ReactNode | — | Custom trigger element (default: filter icon button) |
open | boolean | — | Controlled open state |
onOpenChange | (open: boolean) => void | — | Open state change handler |
align | 'start' | 'center' | 'end' | 'end' | Popover alignment |
className | string | — | Additional CSS classes for the popover content |