Data Table
Powerful data table component with basic and advanced features. Free version includes sorting, filtering, and pagination. Pro version adds export, row selection, bulk actions, and more.
Pro Features
Unlock advanced capabilities with the Pro version
Advanced Data Handling
Handle large datasets with client and server-side (manual) pagination, memoized rows, and optimized re-rendering for smooth performance
Smart Filtering & Search
Quick filters, faceted filters with counts, enum auto-detection, and custom filter value accessors for complex data
Flexible Sorting
Three-state column sorting (ascending, descending, none) with a custom sort handler and controllable sorting state
Column Management
Column visibility controls to show or hide any column on demand, with per-column filter metadata
Export Functionality
Export table data to CSV, JSON, and Excel (XLSX) formats with optional custom export handlers
Row Expansion
Expandable rows with nested tables, detail views, and custom expansion content
Installation
Install via CLI
npx @moontra/moonui-cli add data-tableUsage
Basic Usage
Name | Email | Role |
|---|---|---|
| John Doe | john.doe@example.com | Admin |
| Jane Smith | jane.smith@example.com | Editor |
| Bob Johnson | bob.johnson@example.com | User |
Pro Usage
Name | Email | Role | Department | |
|---|---|---|---|---|
John Doe | john.doe@example.com | Admin | Engineering | |
Jane Smith | jane.smith@example.com | Editor | Marketing | |
Bob Johnson | bob.johnson@example.com | User | Sales | |
Alice Brown | alice.brown@example.com | Viewer | HR | |
Charlie Wilson | charlie.wilson@example.com | Editor | Engineering |
Rows per page
Examples
Basic Table
Simple data table with sorting and pagination
Name | Email | Status |
|---|---|---|
| John Doe | john@example.com | Active |
| Jane Smith | jane@example.com | Pending |
| Bob Johnson | bob@example.com | Inactive |
With Search
Data table with global search functionality
Product | Price | Stock |
|---|---|---|
| Laptop | $999 | 15 |
| Mouse | $25 | 50 |
| Keyboard | $75 | 30 |
| Monitor | $350 | 10 |
| Headphones | $120 | 25 |
Advanced Features
Data table with export, row selection, and advanced filtering
Name | Email | Role | Department | |
|---|---|---|---|---|
| John Doe | john.doe@example.com | Admin | Engineering | |
| Jane Smith | jane.smith@example.com | Editor | Marketing | |
| Bob Johnson | bob.johnson@example.com | User | Sales |
Rows per page
Sorting and Filtering
Table with sorting and filtering features
Role | Department | |
|---|---|---|
| John Doe | Admin | Engineering |
| Jane Smith | Editor | Marketing |
| Bob Johnson | User | Sales |
| Alice Brown | Viewer | HR |
| Charlie Wilson | Editor | Engineering |
Rows per page
Row Selection with Callbacks
Table with multi-row selection, onRowSelect callback, and bulk actions
Name | Email | Role | Department | |
|---|---|---|---|---|
John Doe | john.doe@example.com | Admin | Engineering | |
Jane Smith | jane.smith@example.com | Editor | Marketing | |
Bob Johnson | bob.johnson@example.com | User | Sales | |
Alice Brown | alice.brown@example.com | Viewer | HR | |
Charlie Wilson | charlie.wilson@example.com | Editor | Engineering |
Rows per page
Pagination
Large dataset with pagination feature
Name | Email | Role | Department | Salary |
|---|---|---|---|---|
John Doe | john.doe@example.com | Admin | Engineering | $85,000 |
Jane Smith | jane.smith@example.com | Editor | Marketing | $65,000 |
Bob Johnson | bob.johnson@example.com | User | Sales | $55,000 |
Rows per page
Advanced Features
Table with export functionality (CSV, Excel, PDF) and all features
Project Name | Status | Progress | Due Date |
|---|---|---|---|
| Project Alpha | Completed | 2024-01-15 | |
| Project Beta | In Progress | 2024-02-01 | |
| Project Gamma | Planning | 2024-03-15 | |
| Project Delta | In Progress | 2024-02-20 | |
| Project Epsilon | Completed | 2024-01-30 |
Rows per page
Advanced Filtering
Table with filter drawer/sidebar
Name | Email | Role | Department | Status | Salary | |
|---|---|---|---|---|---|---|
| John Doe | john@example.com | Admin | Engineering | Active | $120,000 | |
| Jane Smith | jane@example.com | User | Sales | Active | $85,000 | |
| Bob Johnson | bob@example.com | Editor | Marketing | Inactive | $75,000 | |
| Alice Brown | alice@example.com | User | HR | Active | $70,000 | |
| Charlie Davis | charlie@example.com | Admin | Engineering | Pending | $110,000 |
Rows per page
Custom Cells
Customized cell renderers
Product | Price | Status |
|---|---|---|
MacBook Pro Laptops | $2499 | In Stock |
iPhone 15 Phones | $999 | In Stock |
iPad Air Tablets | $699 | Low Stock |
AirPods Pro Audio | $249 | In Stock |
Apple Watch Wearables | $399 | Out of Stock |
Rows per page
Quick Filters
Dropdown filters for quick access to common filter options
Status | Payment | Order | Customer | Total |
|---|---|---|---|---|
Completed | Paid | ORD-2024-001 | Tech Corp | $1,064.84 |
Processing | Paid | ORD-2024-002 | Fashion World | $438.97 |
Pending | Unpaid | ORD-2024-003 | Food Market | $4,744.62 |
Completed | Paid | ORD-2024-004 | Book Cafe | $654.99 |
Cancelled | Refunded | ORD-2024-005 | Sport Pro | $412.73 |
Processing | Partial | ORD-2024-006 | Digital 360 | $3,519.92 |
Failed | Unpaid | ORD-2024-007 | Tech Corp | $999.98 |
Completed | Paid | ORD-2024-008 | Organik Market | $379.85 |
Rows per page
Faceted Filters
Advanced filtering with counts and multi-select
Category | Brand | Product | Price | In Stock |
|---|---|---|---|---|
| Electronics | Apple | iPhone 15 | $999.00 | ✓ |
| Electronics | Samsung | Galaxy S24 | $899.00 | ✓ |
| Clothing | Nike | Air Max | $150.00 | ✗ |
| Books | Penguin | JavaScript Guide | $45.00 | ✓ |
| Food | Organic Co | Green Tea | $12.00 | ✓ |
| Sports | Wilson | Tennis Racket | $220.00 | ✓ |
| Electronics | Sony | PlayStation 5 | $499.00 | ✗ |
| Clothing | Adidas | Ultraboost | $180.00 | ✓ |
| Books | O'Reilly | React Patterns | $55.00 | ✓ |
| Food | Nature's Best | Honey | $8.00 | ✓ |
Rows per page
Row Expansion
Expandable rows with a controlled expanded set — enableExpandable injects the expander column automatically, renderSubComponent renders the detail panel, and expandedRows/onRowExpandChange keep the state in your hands
Order | Customer | Status | Total | |
|---|---|---|---|---|
| ORD-1001 | John Doe | Shipped | $249.00 | |
| ORD-1002 | Jane Smith | Processing | $1,299.00 | |
| ORD-1003 | Bob Johnson | Shipped | $89.00 | |
| ORD-1004 | Alice Brown | Pending | $438.00 |
0 row(s) expanded