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>Column 1</nve-grid-column>
<nve-grid-column>Column 2</nve-grid-column>
<nve-grid-column>Column 3</nve-grid-column>
<nve-grid-column width="max-content" position="fixed" aria-label="additonal actions"></nve-grid-column>
</nve-grid-header>
...
<nve-grid-row>
<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>
<nve-icon-button container="flat" icon-name="additional-actions" aria-label="row 1 actions"></nve-icon-button>
</nve-grid-cell>
</nve-grid-row>
...
</nve-grid>
Row actions enable extra user actions specific to a given row. Place a nve-icon-button at the end of the grid row for actions.
<nve-dropdown id="row-actions-dropdown" align="end">
<nve-menu>
<nve-menu-item>action 1</nve-menu-item>
<nve-menu-item>action 2</nve-menu-item>
<nve-menu-item>action 3</nve-menu-item>
</nve-menu>
</nve-dropdown>
<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-column>column 4</nve-grid-column>
<nve-grid-column width="max-content" aria-label="additonal actions" position="fixed"></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-cell>cell 0-4</nve-grid-cell>
<nve-grid-cell>
<nve-icon-button
id="action-0"
popovertarget="row-actions-dropdown"
container="flat"
icon-name="more-actions"
aria-label="row 0 actions"
></nve-icon-button>
</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-cell>cell 1-4</nve-grid-cell>
<nve-grid-cell>
<nve-icon-button
id="action-1"
popovertarget="row-actions-dropdown"
container="flat"
icon-name="more-actions"
aria-label="row 1 actions"
></nve-icon-button>
</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-cell>cell 2-4</nve-grid-cell>
<nve-grid-cell>
<nve-icon-button
id="action-2"
popovertarget="row-actions-dropdown"
container="flat"
icon-name="more-actions"
aria-label="row 2 actions"
></nve-icon-button>
</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-cell>cell 3-4</nve-grid-cell>
<nve-grid-cell>
<nve-icon-button
id="action-3"
popovertarget="row-actions-dropdown"
container="flat"
icon-name="more-actions"
aria-label="row 3 actions"
></nve-icon-button>
</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-cell>cell 4-4</nve-grid-cell>
<nve-grid-cell>
<nve-icon-button
id="action-4"
popovertarget="row-actions-dropdown"
container="flat"
icon-name="more-actions"
aria-label="row 4 actions"
></nve-icon-button>
</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-cell>cell 5-4</nve-grid-cell>
<nve-grid-cell>
<nve-icon-button
id="action-5"
popovertarget="row-actions-dropdown"
container="flat"
icon-name="more-actions"
aria-label="row 5 actions"
></nve-icon-button>
</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-cell>cell 6-4</nve-grid-cell>
<nve-grid-cell>
<nve-icon-button
id="action-6"
popovertarget="row-actions-dropdown"
container="flat"
icon-name="more-actions"
aria-label="row 6 actions"
></nve-icon-button>
</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-cell>cell 7-4</nve-grid-cell>
<nve-grid-cell>
<nve-icon-button
id="action-7"
popovertarget="row-actions-dropdown"
container="flat"
icon-name="more-actions"
aria-label="row 7 actions"
></nve-icon-button>
</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-cell>cell 8-4</nve-grid-cell>
<nve-grid-cell>
<nve-icon-button
id="action-8"
popovertarget="row-actions-dropdown"
container="flat"
icon-name="more-actions"
aria-label="row 8 actions"
></nve-icon-button>
</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-cell>cell 9-4</nve-grid-cell>
<nve-grid-cell>
<nve-icon-button
id="action-9"
popovertarget="row-actions-dropdown"
container="flat"
icon-name="more-actions"
aria-label="row 9 actions"
></nve-icon-button>
</nve-grid-cell>
</nve-grid-row>
</nve-grid>
action 1
action 2
action 3
column 0 column 1
column 2 column 3
column 4
cell 0-0 cell 0-1
cell 0-2 cell 0-3
cell 0-4
cell 1-0 cell 1-1
cell 1-2 cell 1-3
cell 1-4
cell 2-0 cell 2-1
cell 2-2 cell 2-3
cell 2-4
cell 3-0 cell 3-1
cell 3-2 cell 3-3
cell 3-4
cell 4-0 cell 4-1
cell 4-2 cell 4-3
cell 4-4
cell 5-0 cell 5-1
cell 5-2 cell 5-3
cell 5-4
cell 6-0 cell 6-1
cell 6-2 cell 6-3
cell 6-4
cell 7-0 cell 7-1
cell 7-2 cell 7-3
cell 7-4
cell 8-0 cell 8-1
cell 8-2 cell 8-3
cell 8-4
cell 9-0 cell 9-1
cell 9-2 cell 9-3
cell 9-4