Overview
AdminListTableBlock is a heavy-duty client-side table (150-200KB) optimized for power users who need rich interactions like drag-drop reordering, inline editing, bulk actions, and real-time updates.
Key Features
Search & Filter
- Real-time search with text highlighting
- Dropdown filtering by category/status
Sorting & Display
- Sortable columns with 3-state cycle (asc → desc → none)
- 3 density modes (compact, comfortable, expanded)
Inline Editing
- Seamless text, number, select, date, boolean editors
- Conditional edit permissions per cell/row
Drag & Drop
- Row reordering within and across groups
- Group reordering via drag-drop headers
- Cross-group item moves with validation
Bulk Operations
- Multi-select with checkbox column
- Custom bulk actions (archive, tag, etc.)
- Copy/CSV/JSON export (all, selected, page)
Column Management
- Column resize, reorder, show/hide
- Persist column widths and order to localStorage
- Column visibility dropdown
Pagination
- Configurable page sizes (10, 25, 50, 100)
- Page navigation with 'Showing X of Y' indicator
- Row numbering with correct pagination offset
Row Features
- Row click handlers for navigation/detail views
- Edit and delete action buttons per row
- Expandable rows with custom detail content
- Single or multiple expansion modes
Loading & States
- Skeleton loading state during fetch
- Customizable empty state with icon and message
Display Features
- Sticky headers during scroll
- Cell tooltips with configurable delay
- Primary column with bold text and description
- Column footer aggregations (sum, count, avg, min, max)
- Mobile card view with full feature parity
When to Use AdminListTableBlock
- Admin interfaces with frequent CRUD operations
- Power users who sort, filter, and edit rapidly
- Workflows requiring drag-drop reordering or grouping
For public-facing tables with SEO requirements and minimal interactivity, use ListTableBlock instead (2-5KB, server-rendered).
Live Examples
Simple Table
Basic table with search, pagination, and edit/delete actions. A common starting point for admin interfaces.
Project
Mobile App Beta
Status
active
Participants
156
Created
3 days ago
Project
Hardware Testing
Status
active
Participants
89
Created
last week
Project
Customer Survey
Status
pending
Participants
0
Created
yesterday
Project
Security Audit
Status
completed
Participants
45
Created
2 weeks ago
Project | Status | Participants | Created | |
|---|---|---|---|---|
| Mobile App Beta | active | 156 | 3 days ago | |
| Hardware Testing | active | 89 | last week | |
| Customer Survey | pending | 0 | yesterday | |
| Security Audit | completed | 45 | 2 weeks ago | |
| — | — | 290 | — |
Search & Filter
Real-time search with text highlighting and dropdown filter. Search queries are highlighted in matching cells.
Name
Project Alpha Documentation
Status
active
Views
1.25K
Name
Marketing Campaign Q4
Status
active
Views
8.5K
Name
API Reference Guide
Status
pending
Views
3.2K
Name
Product Launch Plan
Status
active
Views
15.2K
Name
Legacy System Docs
Status
archived
Views
500
Name
Social Media Strategy
Status
pending
Views
2.1K
Name | Status | Views |
|---|---|---|
| Project Alpha Documentation | active | 1.25K |
| Marketing Campaign Q4 | active | 8.5K |
| API Reference Guide | pending | 3.2K |
| Product Launch Plan | active | 15.2K |
| Legacy System Docs | archived | 500 |
| Social Media Strategy | pending | 2.1K |
Inline Editing
Click cells to edit directly. Each column type has its own editor: text inputs, number spinners, select dropdowns, date pickers, and toggle switches.
Task
Qty
Priority
high
Due Date
in 6 days
Active
Task
Qty
Priority
medium
Due Date
next week
Active
Task
Security Patch
Qty
1
Priority
critical
Due Date
tomorrow
Active
Task
Qty
Priority
low
Due Date
in 4 weeks
Active
Task | Qty | Priority | Due Date | Active | |
|---|---|---|---|---|---|
high | in 6 days | ||||
medium | next week | ||||
| Security Patch | 1 | critical | tomorrow | ||
low | in 4 weeks |
The 'Security Patch' row is locked (canEdit returns false) to demonstrate conditional editing. Try editing other rows!
Pagination & Row Numbers
Large datasets with page navigation and optional row numbering. Row numbers update correctly when paginating.
#1
Project
Project Alpha
Status
active
Score
50
Updated
Just now
#2
Project
Project Beta
Status
pending
Score
57
Updated
2 days ago
#3
Project
Project Gamma
Status
completed
Score
64
Updated
4 days ago
#4
Project
Project Delta
Status
active
Score
71
Updated
6 days ago
#5
Project
Project Epsilon
Status
pending
Score
78
Updated
last week
| # | Project | Status | Score | Updated |
|---|---|---|---|---|
| 1 | Project Alpha | active | 50 | Just now |
| 2 | Project Beta | pending | 57 | 2 days ago |
| 3 | Project Gamma | completed | 64 | 4 days ago |
| 4 | Project Delta | active | 71 | 6 days ago |
| 5 | Project Epsilon | pending | 78 | last week |
| — | — | — | — |
1-5 of 12
1 of 3
Grouped Data
Group rows by a field with collapsible sections. Groups can be reordered, and items can be dragged between groups.
Feature
User Authentication
Priority
1
Feature
Dashboard Layout
Priority
2
Feature
API Integration
Priority
1
Feature
Report Generator
Priority
2
Feature
Email Notifications
Priority
1
Feature
Mobile Responsive
Priority
2
Feature
Analytics Module
Priority
1
Feature
User Permissions
Priority
2
Feature | Priority | |
|---|---|---|
| User Authentication | 1 | |
| Dashboard Layout | 2 | |
| API Integration | 1 | |
| Report Generator | 2 | |
| Email Notifications | 1 | |
| Mobile Responsive | 2 | |
| Analytics Module | 1 | |
| User Permissions | 2 | |
Bulk Selection, Export & Columns
Select multiple rows for bulk actions. Toggle column visibility for complex tables. Export to CSV or JSON format.
File Name
report-2024-q1.pdf
Type
PDF
Size
2.4 MB
Created
5 days ago
File Name
user-data-export.csv
Type
CSV
Size
850 KB
Created
3 days ago
File Name
product-images.zip
Type
Archive
Size
15.6 MB
Created
last week
File Name
meeting-notes.docx
Type
Document
Size
45 KB
Created
yesterday
File Name
analytics-dashboard.json
Type
JSON
Size
128 KB
Created
2 days ago
File Name | Type | Size | Created | |
|---|---|---|---|---|
| report-2024-q1.pdf | PDF | 2.4 MB | 5 days ago | |
| user-data-export.csv | CSV | 850 KB | 3 days ago | |
| product-images.zip | Archive | 15.6 MB | last week | |
| meeting-notes.docx | Document | 45 KB | yesterday | |
| analytics-dashboard.json | JSON | 128 KB | 2 days ago |
Expandable Rows
Click rows to expand and show additional details. Supports single or multiple expansion modes.
Feature
Customer Onboarding Flow
Status
active
Description
Multi-step wizard for new customer registration
Feature
Payment Processing
Status
active
Description
Stripe integration with webhook handlers
Feature
Email Campaign System
Status
pending
Description
Automated email sequences with A/B testing
Feature | Status | Description | |
|---|---|---|---|
| Customer Onboarding Flow | active | Multi-step wizard for new customer registration | |
| Payment Processing | active | Stripe integration with webhook handlers | |
| Email Campaign System | pending | Automated email sequences with A/B testing |
Loading State
Automatic skeleton loading state while data is being fetched.
Project
Mobile App Beta
Status
active
Participants
156
Created
3 days ago
Project
Hardware Testing
Status
active
Participants
89
Created
last week
Project
Customer Survey
Status
pending
Participants
0
Created
yesterday
Project
Security Audit
Status
completed
Participants
45
Created
2 weeks ago
Project | Status | Participants | Created |
|---|---|---|---|
| Mobile App Beta | active | 156 | 3 days ago |
| Hardware Testing | active | 89 | last week |
| Customer Survey | pending | 0 | yesterday |
| Security Audit | completed | 45 | 2 weeks ago |
| — | — | 290 | — |
Column Reordering & Resizing
Drag column headers to reorder. Drag column edges to resize. Preferences persist in localStorage.
Name
Sarah Chen
Email
sarah.chen@example.com
Role
admin
Department
Engineering
Joined
Dec 11, 2024
Last Active
Just now
Name
Marcus Johnson
Email
marcus.j@example.com
Role
editor
Department
Marketing
Joined
6 months ago
Last Active
yesterday
Name
Emily Rodriguez
Email
emily.r@example.com
Role
viewer
Department
Sales
Joined
3 months ago
Last Active
3 days ago
Name
David Kim
Email
david.kim@example.com
Role
editor
Department
Engineering
Joined
last month
Last Active
Just now
Name
Lisa Thompson
Email
lisa.t@example.com
Role
admin
Department
Operations
Joined
Dec 12, 2023
Last Active
2 days ago
Name | Email | Role | Department | Joined | Last Active |
|---|---|---|---|---|---|
| Sarah Chen | sarah.chen@example.com | admin | Engineering | Dec 11, 2024 | Just now |
| Marcus Johnson | marcus.j@example.com | editor | Marketing | 6 months ago | yesterday |
| Emily Rodriguez | emily.r@example.com | viewer | Sales | 3 months ago | 3 days ago |
| David Kim | david.kim@example.com | editor | Engineering | last month | Just now |
| Lisa Thompson | lisa.t@example.com | admin | Operations | Dec 12, 2023 | 2 days ago |
Reorder: Drag any column header left or right to change column order.
Resize: Hover over the right edge of a column header and drag to adjust width.
Persistence: Both column order and widths are automatically saved to localStorage.
Empty State
Customizable empty state when no items match the current filters.
No items yet
Items will appear here once they are created.
Column Helpers
Helper functions that reduce boilerplate for common column types. Each helper returns a fully-configured column definition.
| Helper | Output | Editable |
|---|---|---|
columnHelpers.text() | Plain text value with optional inline editing | text input |
columnHelpers.primary() | Bold/emphasized primary identifier column | — |
columnHelpers.badge() | Status badge with color variant mapping | select dropdown |
columnHelpers.date() | Relative or absolute date with FormattedDate | date picker |
columnHelpers.number() | Formatted number with optional decimals | number input |
columnHelpers.currency() | Currency with symbol and locale formatting | — |
columnHelpers.percentage() | Percentage with optional decimals | — |
columnHelpers.boolean() | Checkmark/dash indicator or toggle switch | toggle switch |
columnHelpers.user() | Avatar + name with optional click handler | — |
columnHelpers.custom() | Full custom render function | — |
const columns = [
columnHelpers.text('name', 'Name', { sortable: true }),
columnHelpers.primary('title', 'Title', { descriptionKey: 'summary' }),
columnHelpers.badge('status', 'Status', { active: 'success', pending: 'warning' }),
columnHelpers.date('createdAt', 'Created', { includeTime: true }),
columnHelpers.number('count', 'Count', { decimals: 0 }),
columnHelpers.currency('price', 'Price', { aggregation: 'sum' }),
columnHelpers.percentage('progress', 'Progress'),
columnHelpers.boolean('isActive', 'Active'),
columnHelpers.user('creator', 'Created By', { onClick: (user) => openSheet(user.id) }),
];Props Reference
Core Props
Required props for data and columns.
| Prop | Type | Default | Description |
|---|---|---|---|
items | T[] | required | Array of data items to display |
columns | Column[] | required | Column definitions with key, label, and options |
groups | Group[] | - | Pre-grouped data structure (alternative to items) |
Event Handlers
Callback props for responding to user actions.
| Prop | Type | Default | Description |
|---|---|---|---|
onEdit | (item: T) => void | - | Callback when edit action is clicked |
onDelete | (item: T) => void | - | Callback when delete action is clicked |
onRowClick | (item: T) => void | - | Callback when a row is clicked |
onCellSave | (item, key, new, old) => void | - | Callback when inline cell edit is saved |
onSearch | (query: string) => void | - | Callback when search query changes |
onFilter | (value: string) => void | - | Callback when filter value changes |
onReorder | (items: T[]) => void | - | Callback when items are drag-drop reordered |
onSelectionChange | (ids: string[]) => void | - | Callback when bulk selection changes |
onBulkDelete | (items: T[]) => void | - | Callback when bulk delete is triggered |
onExport | (data, format, mode) => void | - | Callback when export is triggered |
onExpandChange | (ids: string[]) => void | - | Callback when row expansion changes |
onItemGroupChange | (item, newGroup, oldGroup) => void | - | Callback when item is moved between groups |
Feature Toggles
Boolean props to enable optional features. All default to false.
| Prop | Type | Default | Description |
|---|---|---|---|
enableSearch | boolean | false | Show search input in toolbar |
enableFilter | boolean | false | Show filter dropdown in toolbar |
enableDragDrop | boolean | false | Enable row drag-drop reordering |
enablePagination | boolean | false | Show pagination controls |
enableGrouping | boolean | false | Group rows by a field value |
enableBulkSelect | boolean | false | Show bulk selection checkboxes |
enableExport | boolean | false | Show export button (CSV/JSON) |
enableColumnResize | boolean | false | Allow resizing columns |
enableColumnReorder | boolean | false | Allow reordering columns |
enableColumnSelector | boolean | true | Show column visibility dropdown |
enableGroupReorder | boolean | false | Allow reordering groups via drag-drop |
enableCrossGroupDrag | boolean | false | Allow dragging items between groups |
enableStickyHeader | boolean | true | Keep table header visible when scrolling |
Display & Loading
Props for controlling visual appearance and loading states.
| Prop | Type | Default | Description |
|---|---|---|---|
isLoading | boolean | false | Show loading skeleton state |
loadingRowCount | number | 5 | Number of skeleton rows when loading |
density | 'compact' | 'comfortable' | 'expanded' | 'comfortable' | Row height: compact, comfortable, or expanded |
showDensityToggle | boolean | false | Show density toggle in toolbar |
showRowNumbers | boolean | false | Show row number column |
showColumnFooter | boolean | false | Show column footer with aggregations |
expandable | boolean | false | Enable row expansion |
expandMode | 'single' | 'multiple' | 'single' | Expansion mode: single or multiple |
Grouping
Props for organizing rows into collapsible groups.
| Prop | Type | Default | Description |
|---|---|---|---|
groupBy | string | string[] | - | Field key to group rows by |
groupLabelFn | (key, items) => ReactNode | - | Function to render group labels |
groupActions | (key, items) => ReactNode | - | Function to render group action buttons |
Usage Patterns
import { AdminListTableBlock, columnHelpers } from '@/ui/blocks';
import { PageHeader } from '@/ui/components';
const columns = [
columnHelpers.text('name', 'Name', { sortable: true }),
columnHelpers.badge('status', 'Status', {
active: 'success', pending: 'warning', archived: 'secondary'
}),
columnHelpers.number('count', 'Count', { aggregation: 'sum' }),
columnHelpers.date('createdAt', 'Created', { sortable: true }),
];
<PageHeader title="Manage Items" actions={<Button>New</Button>} />
<AdminListTableBlock
items={items}
columns={columns}
enableSearch
enablePagination
onEdit={handleEdit}
onDelete={handleDelete}
/>