BioNav DataTable Example
Reference implementation for a data table with TanStack Table, featuring sorting, filtering, column management, row selection, and CSV export.
Live Demo
1 | CRISPR Screen A | BRCA1 | HEK293 | Completed | 2024-01-15 | Dr. Smith | 0.95 | |
2 | RNAi Knockdown B | TP53 | MCF7 | In Progress | 2024-01-20 | Dr. Johnson | 0.82 | |
3 | Protein Expression C | EGFR | A549 | Completed | 2024-02-01 | Dr. Williams | 0.91 | |
4 | Drug Sensitivity D | HER2 | SKBR3 | Pending | 2024-02-10 | Dr. Brown | 0.78 | |
5 | Metabolomics Study E | KRAS | SW480 | Completed | 2024-02-15 | Dr. Davis | 0.88 |
Features
Sorting
Click column headers to sort ascending/descending.
Filtering
Global search and per-column filters.
Column Management
Show/hide columns and drag to reorder.
Row Selection
Select individual rows or all rows with checkboxes.
CSV Export
Export all filtered rows or just selected rows.
Implementation Guide
1. Install Dependencies
npm install @tanstack/react-table2. Replace Mock Data
Replace MOCK_DATA with your API response.
3. Update Types
Define your data interface to match your API schema.
4. Handle Selection
Use onSelectionChange callback to handle selected rows.
Key Files
src/components/examples/BioNavDataTable.tsxsrc/components/examples/ColumnManagementMenu.tsxsrc/components/ui/sticky-table.tsx