A versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data. Use it for anything from simple read-only tables to fully interactive, spreadsheet experiences.
<nve-grid>
<nve-grid-header>
<nve-grid-column width="max-content">
<nve-checkbox>
<input type="checkbox" aria-label="select all rows">
</nve-checkbox>
</nve-grid-column>
<nve-grid-column>Column</nve-grid-column>
</nve-grid-header>
...
<nve-grid-row selected>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" checked aria-label="select row 1">
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>Cell</nve-grid-cell>
...
</nve-grid-row>
...
</nve-grid>
Multi Select
Multi Select Bulk Actions
Use bulk actions for operations on many items. Display only when rows have a selection. Closing bulk actions deselects all selected rows.
<nve-grid style="height: 400px">
<nve-grid-header>
<nve-grid-column width="max-content" position="fixed">
<nve-checkbox>
<input type="checkbox" aria-label="select all rows" />
</nve-checkbox>
</nve-grid-column>
<nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>
<nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>
<nve-grid-column>column 4</nve-grid-column>
</nve-grid-header>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 0" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>
<nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>
<nve-grid-cell>cell 0-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" checked aria-label="select row 1" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>
<nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>
<nve-grid-cell>cell 1-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 2" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>
<nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>
<nve-grid-cell>cell 2-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 3" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell>
<nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell>
<nve-grid-cell>cell 3-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 4" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell>
<nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell>
<nve-grid-cell>cell 4-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 5" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell>
<nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell>
<nve-grid-cell>cell 5-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 6" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell>
<nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell>
<nve-grid-cell>cell 6-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 7" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell>
<nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell>
<nve-grid-cell>cell 7-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 8" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell>
<nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell>
<nve-grid-cell>cell 8-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 9" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell>
<nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell>
<nve-grid-cell>cell 9-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 10" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 10-0</nve-grid-cell> <nve-grid-cell>cell 10-1</nve-grid-cell>
<nve-grid-cell>cell 10-2</nve-grid-cell> <nve-grid-cell>cell 10-3</nve-grid-cell>
<nve-grid-cell>cell 10-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 11" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 11-0</nve-grid-cell> <nve-grid-cell>cell 11-1</nve-grid-cell>
<nve-grid-cell>cell 11-2</nve-grid-cell> <nve-grid-cell>cell 11-3</nve-grid-cell>
<nve-grid-cell>cell 11-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 12" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 12-0</nve-grid-cell> <nve-grid-cell>cell 12-1</nve-grid-cell>
<nve-grid-cell>cell 12-2</nve-grid-cell> <nve-grid-cell>cell 12-3</nve-grid-cell>
<nve-grid-cell>cell 12-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 13" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 13-0</nve-grid-cell> <nve-grid-cell>cell 13-1</nve-grid-cell>
<nve-grid-cell>cell 13-2</nve-grid-cell> <nve-grid-cell>cell 13-3</nve-grid-cell>
<nve-grid-cell>cell 13-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 14" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 14-0</nve-grid-cell> <nve-grid-cell>cell 14-1</nve-grid-cell>
<nve-grid-cell>cell 14-2</nve-grid-cell> <nve-grid-cell>cell 14-3</nve-grid-cell>
<nve-grid-cell>cell 14-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 15" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 15-0</nve-grid-cell> <nve-grid-cell>cell 15-1</nve-grid-cell>
<nve-grid-cell>cell 15-2</nve-grid-cell> <nve-grid-cell>cell 15-3</nve-grid-cell>
<nve-grid-cell>cell 15-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 16" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 16-0</nve-grid-cell> <nve-grid-cell>cell 16-1</nve-grid-cell>
<nve-grid-cell>cell 16-2</nve-grid-cell> <nve-grid-cell>cell 16-3</nve-grid-cell>
<nve-grid-cell>cell 16-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 17" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 17-0</nve-grid-cell> <nve-grid-cell>cell 17-1</nve-grid-cell>
<nve-grid-cell>cell 17-2</nve-grid-cell> <nve-grid-cell>cell 17-3</nve-grid-cell>
<nve-grid-cell>cell 17-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 18" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 18-0</nve-grid-cell> <nve-grid-cell>cell 18-1</nve-grid-cell>
<nve-grid-cell>cell 18-2</nve-grid-cell> <nve-grid-cell>cell 18-3</nve-grid-cell>
<nve-grid-cell>cell 18-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>
<nve-checkbox>
<input type="checkbox" aria-label="select row 19" />
</nve-checkbox>
</nve-grid-cell>
<nve-grid-cell>cell 19-0</nve-grid-cell> <nve-grid-cell>cell 19-1</nve-grid-cell>
<nve-grid-cell>cell 19-2</nve-grid-cell> <nve-grid-cell>cell 19-3</nve-grid-cell>
<nve-grid-cell>cell 19-4</nve-grid-cell>
</nve-grid-row>
<nve-toolbar status="accent" slot="footer">
<nve-icon-button container="flat" icon-name="cancel" slot="prefix"></nve-icon-button>
<p nve-text="body">1 selected</p>
<nve-button container="flat" interaction="destructive" slot="suffix">delete</nve-button>
<nve-icon-button container="flat" icon-name="more-actions" slot="suffix"></nve-icon-button>
</nve-toolbar>
</nve-grid>