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-sort-button sort="none"></nve-sort-button>
</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>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>
Column Sort Button Visibility
Use the nve-sort-button to add grid row sort. The grid follows the ARIA sort spec and automatically sets the appropriate accessibility related attributes to convey the current sorting state.
Lit
class RowSortDemo extends LitElement {
@state() sort: 'none' | 'ascending' | 'descending' = 'none';
get items() {
// application sort logic
}
render() {
return html`
<nve-grid>
<nve-grid-header>
${Object.entries(this.items[0]).map(([, column], i) => html`
<nve-grid-column>
${column.label} ${i === 0 ? html`<nve-sort-button .sort=${this.sort} @sort=${e => this.sort = e.detail.next}></nve-sort-button>` : html``}
</nve-grid-column>`)}
</nve-grid-header>
${this.items.map(row => html`
<nve-grid-row>
${Object.entries(row).map(([, cell]) => html`<nve-grid-cell>${cell.value}</nve-grid-cell> `)}
</nve-grid-row>`)}
</nve-grid>
`
}
}