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="additional 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="more-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>