Data (User Guide)
Screens for displaying data — the data grid, the basic table, and four chart libraries.
The screens for displaying data — a powerful data grid in six variants, a lightweight basic table, and four chart-library showcases.
Data Grid
What it is: a feature-rich, spreadsheet-like grid (built on AG Grid Community) shown across six pages, each highlighting a different capability. Rows animate in with a gentle staggered entrance.
Where to find it: Data → Tables → Data Grid. Routes are under /tables/data-grid/*.
| Page | What it demonstrates | Route |
|---|---|---|
| Default | A standard sortable, resizable grid | /tables/data-grid/default |
| Cell Renderers | Custom cell contents — badges, avatars, mini-bars, buttons | /tables/data-grid/renderers |
| Row Selection | Selecting single or multiple rows with checkboxes | /tables/data-grid/selection |
| Search & Filters | Quick search and per-column filtering | /tables/data-grid/search |
| Editable | Editing cell values directly in the grid | /tables/data-grid/editable |
| Pinned & Totals | Pinned columns and a totals/summary row | /tables/data-grid/pinned |
How to use it
- Sort by clicking a column header; resize by dragging its edge; reorder by dragging the header.
- On the relevant pages, search the grid, filter columns, select rows, or edit cells.
- Scroll large datasets smoothly — the grid only renders the rows in view.
Basic Table
What it is: a simpler, hand-styled HTML table for lighter data needs (no heavy grid engine).
Where to find it: Data → Tables → Basic Table. Route: /tables/basic.
How to use it: read the table variants shown; use this pattern when you need a straightforward table rather than the full data grid.
Charts
What they are: four pages, each demonstrating a different charting library so you can compare them and pick the one that fits a given screen. All charts pull their colours from your theme and skin and re-colour instantly when you switch.
Where to find them: Data → Charts. Routes are under /charts/*.
| Page | Library | Route |
|---|---|---|
| Recharts | Recharts | /charts/recharts |
| ApexCharts | ApexCharts | /charts/apexcharts |
| ECharts | ECharts | /charts/echarts |
| Chart.js | Chart.js | /charts/chartjs |
How to use them: browse each page to see line, bar, area, pie/donut, and other chart types rendered by that library. Hover data points for tooltips.
Tips
- These pages use sample data. Connected to a live API, the same grids and charts show real records.
- The template deliberately uses only the free/MIT editions of the grid and calendar — no paid add-ons are required.
- Developers: see the Tables & Data Grid and Charts guides for the code, and the theme-aware colour hook.
Related
Was this page helpful?