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.
<section nve-layout="row gap:md align:stretch">
<nve-panel expanded closable>
...
</nve-panel>
<div nve-layout="column gap:md">
<nve-button>display settings</nve-button>
<nve-grid>
...
</nve-grid>
</div>
</section>
Users can customize their data view through a dropdown menu above the grid, allowing them to show/hide columns and restore default settings for a personalized experience.
<div nve-layout="column gap:md full">
<nve-dropdown closable id="column-settings-dropdown">
<nve-checkbox-group style="width: 175px">
<label>Columns</label>
<nve-checkbox>
<label>Column 1</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>Column 2</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>Column 3</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>Column 4</label>
<input type="checkbox" checked />
</nve-checkbox>
</nve-checkbox-group>
<nve-divider></nve-divider>
<nve-button
popovertarget="column-settings-dropdown"
popovertargetaction="hide"
interaction="destructive"
container="flat"
style="--height: initial"
>restore settings</nve-button
>
</nve-dropdown>
<div nve-layout="row gap:sm align:vertical-center">
<p nve-text="body muted">1,145 results found</p>
<nve-button popovertarget="column-settings-dropdown">Display Settings</nve-button>
</div>
<nve-grid>
<nve-grid-header>
<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-header>
<nve-grid-row>
<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-row>
<nve-grid-row>
<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-row>
<nve-grid-row>
<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-row>
<nve-grid-row>
<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-row>
<nve-grid-row>
<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-row>
<nve-grid-row>
<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-row>
<nve-grid-row>
<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-row>
<nve-grid-row>
<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-row>
<nve-grid-row>
<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-row>
<nve-grid-row>
<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-row>
</nve-grid>
</div>