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><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>
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.
<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-sort-button sort="ascending"></nve-sort-button> </nve-grid-column>
<nve-grid-column> Column 3 <nve-sort-button sort="descending"></nve-sort-button> </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> <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-sort-button sort="ascending"></nve-sort-button> </nve-grid-column>
<nve-grid-column> Column 3 <nve-sort-button sort="descending"></nve-sort-button> </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 1 Column 2 Column 3 Column 4 cell 1-1 cell 1-2 cell 1-3 cell 1-4
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>
`
}
}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>
`
}
}