Basic Data Table
This is default example from Material UI. It Demonstrates the use of Checkbox and clickable rows for selection, with a custom Toolbar. It uses the TableSortLabel component to help style column headings.
Dessert (100g serving) | Caloriessorted ascending | Fat (g) | Carbs (g) | Protein (g) | |
---|---|---|---|---|---|
Frozen yoghurt | 159 | 6 | 24 | 4 | |
Ice cream sandwich | 237 | 9 | 37 | 4.3 | |
Eclair | 262 | 16 | 24 | 6 | |
Cupcake | 305 | 3.7 | 67 | 4.3 | |
Marshmallow | 318 | 0 | 81 | 2 |
Advanced Data Table
It uses npm mui-datatables. It's easy to use, you just describe columns and data collection. After that it will magically build features such as filtering, viewing / hiding columns, exporting to CSV downloads, printing, and more.
Name Gabby George | Title Business Analyst | KPI | Status Active | Salary $100,000.00 | |
Name Aiden Lloyd | Title Business Consultant | KPI | Status Active | Salary $200,000.00 | |
Name Jaden Collins | Title Attorney | KPI | Status Non Active | Salary $500,000.00 | |
Name Franky Rees | Title Business Analyst | KPI | Status Active | Salary $50,000.00 | |
Name Aaren Rose | Title Business Consultant | KPI | Status Unknown | Salary $75,000.00 | |
Name Blake Duncan | Title Business Management Analyst | KPI | Status Active | Salary $94,000.00 | |
Name Frankie Parry | Title Agency Legal Counsel | KPI | Status Non Active | Salary $210,000.00 | |
Name Lane Wilson | Title Commercial Specialist | KPI | Status Active | Salary $65,000.00 | |
Name Robin Duncan | Title Business Analyst | KPI | Status Unknown | Salary $77,000.00 | |
Name Mel Brooks | Title Business Consultant | KPI | Status Active | Salary $135,000.00 |