C. Data & Tables

Data Table (Filters / Bulk Actions)

Sorting, pagination, filter toolbars, saved views, bulk actions, column settings, expandable rows, inline edit, row drawers, empty/loading states and a mobile card list.

8 screensDesktop · Tablet · MobileLight · Dark

Write every screen of this block into your project — the source is then yours to edit.

bash

npx @wunderui/cli add data/data-table

01Sorting & pagination

Uses: AppFrame · Table · PersonCell · Badge · Pagination

components/blocks/data/data-table/01-sorting-pagination.tsx

02Filters toolbar & saved views

Uses: AppFrame · Table · TextField · Badge · Tabs

components/blocks/data/data-table/02-filters-saved-views.tsx

03Bulk actions bar

Uses: AppFrame · Table · Checkbox · Button · Badge

components/blocks/data/data-table/03-bulk-actions.tsx

04Column settings & density

Uses: AppFrame · Table · Popover · Switch · Segment

components/blocks/data/data-table/04-column-settings.tsx

05Expandable row & inline edit

Uses: AppFrame · Table · Input · Button · Badge

components/blocks/data/data-table/05-expandable-inline-edit.tsx

06Row detail drawer

Uses: AppFrame · Table · Sheet · Badge · TimelineEvent

components/blocks/data/data-table/06-row-drawer.tsx

07Empty & loading states

Uses: AppFrame · Table · Skeleton · EmptyState

components/blocks/data/data-table/07-empty-loading.tsx

08Mobile card list (390 px)

Uses: RecordCard · Badge · Segment

components/blocks/data/data-table/08-mobile-card-list.tsx

← Charts Kanban Board →