Grids
Generic data grid from Verapath.Components.
Supports sorting, column resizing, column visibility, search, pagination, per-row editing,
row click, child rows, and XLSX export.
Basic Grid
Read-only grid with sortable columns, search, column visibility toggle, pagination, and export. Click the Export button to download the current view to XLSX.
Salary | ||||||
|---|---|---|---|---|---|---|
| 1 | Alice Johnson | Engineering | alice@verapath.com | Active | Austin | $95,000 |
| 2 | Bob Martinez | Marketing | bob@verapath.com | Active | Chicago | $72,000 |
| 3 | Carol White | Engineering | carol@verapath.com | On Leave | Remote | $88,000 |
| 4 | David Chen | Sales | david@verapath.com | Active | New York | $65,000 |
| 5 | Eva Rodriguez | HR | eva@verapath.com | Active | Austin | $70,000 |
Editable Grid
Click Edit on any row to edit the Name, Department, and Status columns inline. Save applies the changes; Cancel discards them. Last save: none yet
Salary | Actions | |||||
|---|---|---|---|---|---|---|
| 1 | Alice Johnson | Engineering | alice@verapath.com | Active | $95,000 | |
| 2 | Bob Martinez | Marketing | bob@verapath.com | Active | $72,000 | |
| 3 | Carol White | Engineering | carol@verapath.com | On Leave | $88,000 | |
| 4 | David Chen | Sales | david@verapath.com | Active | $65,000 | |
| 5 | Eva Rodriguez | HR | eva@verapath.com | Active | $70,000 |
Row Click Event
Click any row to select it. OnRowClick fires and the selected employee is shown below.
Row click is disabled automatically when Editable=true.
Salary | ||||||
|---|---|---|---|---|---|---|
| 1 | Alice Johnson | Engineering | alice@verapath.com | Active | Austin | $95,000 |
| 2 | Bob Martinez | Marketing | bob@verapath.com | Active | Chicago | $72,000 |
| 3 | Carol White | Engineering | carol@verapath.com | On Leave | Remote | $88,000 |
| 4 | David Chen | Sales | david@verapath.com | Active | New York | $65,000 |
| 5 | Eva Rodriguez | HR | eva@verapath.com | Active | Austin | $70,000 |
Custom Cell Template
The Status column uses a CellTemplate to render a coloured badge instead of plain text.
| 1 | Alice Johnson | Engineering | alice@verapath.com | Active | Austin |
| 2 | Bob Martinez | Marketing | bob@verapath.com | Active | Chicago |
| 3 | Carol White | Engineering | carol@verapath.com | On Leave | Remote |
| 4 | David Chen | Sales | david@verapath.com | Active | New York |
| 5 | Eva Rodriguez | HR | eva@verapath.com | Active | Austin |
Child Rows — Same Type
Departments with employees as child rows using ChildItemsSelector.
Each parent row shows an expand chevron when it has children.
All columns are shared between parent and child rows. Export includes an
Include child rows option so children appear indented in the XLSX.
Email | ||||
|---|---|---|---|---|
| Engineering | Department | eng@verapath.com | Austin | |
| Marketing | Department | mkt@verapath.com | Chicago | |
| Sales | Department | sales@verapath.com | New York | |
| Design | Department | design@verapath.com | Remote | |
| HR | Department | hr@verapath.com | Austin |
Child Rows — Custom Template
Each expanded row shows a custom details panel via ChildRowTemplate.
The template content spans all columns and can contain any Blazor markup.
Salary | |||||||
|---|---|---|---|---|---|---|---|
| 1 | Alice Johnson | Engineering | alice@verapath.com | Active | Austin | $95,000 | |
| 2 | Bob Martinez | Marketing | bob@verapath.com | Active | Chicago | $72,000 | |
| 3 | Carol White | Engineering | carol@verapath.com | On Leave | Remote | $88,000 | |
| 4 | David Chen | Sales | david@verapath.com | Active | New York | $65,000 | |
| 5 | Eva Rodriguez | HR | eva@verapath.com | Active | Austin | $70,000 |
Dark Mode
Force Theme="dark" on the grid independently of the page theme toggle.
Salary | ||||||
|---|---|---|---|---|---|---|
| 1 | Alice Johnson | Engineering | alice@verapath.com | Active | Austin | $95,000 |
| 2 | Bob Martinez | Marketing | bob@verapath.com | Active | Chicago | $72,000 |
| 3 | Carol White | Engineering | carol@verapath.com | On Leave | Remote | $88,000 |
| 4 | David Chen | Sales | david@verapath.com | Active | New York | $65,000 |
| 5 | Eva Rodriguez | HR | eva@verapath.com | Active | Austin | $70,000 |