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
What the Pro version adds to this component.
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
Examples
Basic Table
Simple data table with sorting and pagination
With Search
Data table with global search functionality
Advanced Features
Data table with export, row selection, and advanced filtering
Sorting and Filtering
Table with sorting and filtering features
Row Selection with Callbacks
Table with multi-row selection, onRowSelect callback, and bulk actions
Pagination
Large dataset with pagination feature
Advanced Features
Table with export functionality (CSV, Excel, PDF) and all features
Advanced Filtering
Table with filter drawer/sidebar
Custom Cells
Customized cell renderers
Quick Filters
Dropdown filters for quick access to common filter options
Faceted Filters
Advanced filtering with counts and multi-select
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