Advanced Data Tables
A comprehensive demo of the DataTable component showcasing sorting, filtering, column visibility, row selection, bulk actions, and CSV export.
Features Demonstrated
Sorting
Click column headers to sort. Use dropdown for ascending, descending, or hide column.
Filtering
Global search across all columns. Faceted filters for Status and Priority.
Column Visibility
Toggle columns on/off using the View dropdown. Customize your table layout.
Row Selection
Select individual rows or all at once. Selected count shown in pagination.
Bulk Actions
Perform actions on multiple selected rows: Add tag, Update status, Delete.
Export to CSV
Export selected rows, filtered results, or all data to CSV format.
Users Table
50 total users • Built with TanStack React Table v8
Alex Smith | alex.smith@example.com | Engineering | Manager | Active | High | 90% | Jan 1, 2023 |
Jordan Smith | jordan.smith@example.com | Design | Manager | Inactive | High | 51% | Jan 8, 2023 |
Taylor Smith | taylor.smith@example.com | Marketing | Senior Developer | Pending | High | 72% | Jan 15, 2023 |
Morgan Smith | morgan.smith@example.com | Sales | Senior Developer | Active | Medium | 83% | Jan 22, 2023 |
Casey Smith | casey.smith@example.com | Operations | Designer | Inactive | Medium | 44% | Jan 29, 2023 |
Riley Smith | riley.smith@example.com | Finance | Designer | Pending | Medium | 65% | Feb 5, 2023 |
Quinn Smith | quinn.smith@example.com | HR | Analyst | Active | Low | 76% | Feb 12, 2023 |
Avery Smith | avery.smith@example.com | Product | Analyst | Inactive | Low | 37% | Feb 19, 2023 |
Parker Smith | parker.smith@example.com | Support | Coordinator | Pending | Low | 58% | Feb 26, 2023 |
Charlie Smith | charlie.smith@example.com | Legal | Coordinator | Active | High | 99% | Mar 5, 2023 |
Rows per page
How to Use
• Click any column header to sort by that column
• Click the dropdown arrow for ascending/descending options
• Use "Hide" in dropdown to remove a column from view
• Type in the search box to filter by user name
• Use Status and Priority filters for faceted filtering
• Click "Reset" to clear all filters
• Click checkboxes to select individual rows
• Use header checkbox to select all visible rows
• Bulk action bar appears when rows are selected
• Click "Export" dropdown in toolbar
• Choose: Selected rows, Filtered results, or All data
• Downloads as CSV file with visible columns