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 position="fixed">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-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 Fixed
Determines the position of an element along both inline and block axis. MDN
Position Description fixed sticky Fix columns to any given side, but keep fixed columns from spanning past the half way point of the grid.
<nve-grid style="height: 400px; max-width: 800px">
<nve-grid-header>
<nve-grid-column position="fixed" width="200px">column 0</nve-grid-column>
<nve-grid-column position width="200px">column 1</nve-grid-column>
<nve-grid-column position width="200px">column 2</nve-grid-column>
<nve-grid-column position width="200px">column 3</nve-grid-column>
<nve-grid-column position width="200px">column 4</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-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-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-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-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-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-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-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-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-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-row>
</nve-grid>
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
Column Multi Fixed
Fix many columns to any given side, but keep fixed columns from spanning past the half way point of the grid.
<nve-grid style="height: 400px; max-width: 800px">
<nve-grid-header>
<nve-grid-column position="fixed" width="200px">column 0</nve-grid-column
><nve-grid-column position width="200px">column 1</nve-grid-column
><nve-grid-column position width="200px">column 2</nve-grid-column
><nve-grid-column position width="200px">column 3</nve-grid-column
><nve-grid-column position="fixed" width="200px">column 4</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-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-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-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-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-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-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-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-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-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-row>
</nve-grid>
column 0column 1column 2column 3column 4 cell 0-0cell 0-1cell 0-2cell 0-3cell 0-4 cell 1-0cell 1-1cell 1-2cell 1-3cell 1-4 cell 2-0cell 2-1cell 2-2cell 2-3cell 2-4 cell 3-0cell 3-1cell 3-2cell 3-3cell 3-4 cell 4-0cell 4-1cell 4-2cell 4-3cell 4-4 cell 5-0cell 5-1cell 5-2cell 5-3cell 5-4 cell 6-0cell 6-1cell 6-2cell 6-3cell 6-4 cell 7-0cell 7-1cell 7-2cell 7-3cell 7-4 cell 8-0cell 8-1cell 8-2cell 8-3cell 8-4 cell 9-0cell 9-1cell 9-2cell 9-3cell 9-4
Column Stack Fixed
Stack and fix many columns to any given side, but keep fixed columns from spanning past the half way point of the grid.
<nve-grid style="height: 400px; max-width: 800px">
<nve-grid-header>
<nve-grid-column position="fixed" width="100px">Column 1</nve-grid-column>
<nve-grid-column position="fixed" width="100px">Column 2</nve-grid-column>
<nve-grid-column width="200px">Column 3</nve-grid-column>
<nve-grid-column width="200px">Column 4</nve-grid-column>
<nve-grid-column width="200px">Column 5</nve-grid-column>
<nve-grid-column width="200px">Column 6</nve-grid-column>
<nve-grid-column position="fixed" width="100px">Column 7</nve-grid-column>
<nve-grid-column position="fixed" width="100px">Column 8</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>cell 0-5</nve-grid-cell>
<nve-grid-cell>cell 0-6</nve-grid-cell> <nve-grid-cell>cell 0-7</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>cell 1-5</nve-grid-cell>
<nve-grid-cell>cell 1-6</nve-grid-cell> <nve-grid-cell>cell 1-7</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>cell 2-5</nve-grid-cell>
<nve-grid-cell>cell 2-6</nve-grid-cell> <nve-grid-cell>cell 2-7</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>cell 3-5</nve-grid-cell>
<nve-grid-cell>cell 3-6</nve-grid-cell> <nve-grid-cell>cell 3-7</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>cell 4-5</nve-grid-cell>
<nve-grid-cell>cell 4-6</nve-grid-cell> <nve-grid-cell>cell 4-7</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>cell 5-5</nve-grid-cell>
<nve-grid-cell>cell 5-6</nve-grid-cell> <nve-grid-cell>cell 5-7</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>cell 6-5</nve-grid-cell>
<nve-grid-cell>cell 6-6</nve-grid-cell> <nve-grid-cell>cell 6-7</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>cell 7-5</nve-grid-cell>
<nve-grid-cell>cell 7-6</nve-grid-cell> <nve-grid-cell>cell 7-7</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>cell 8-5</nve-grid-cell>
<nve-grid-cell>cell 8-6</nve-grid-cell> <nve-grid-cell>cell 8-7</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>cell 9-5</nve-grid-cell>
<nve-grid-cell>cell 9-6</nve-grid-cell> <nve-grid-cell>cell 9-7</nve-grid-cell>
</nve-grid-row>
</nve-grid>
Column 1 Column 2 Column 3 Column 4 Column 5 Column 6 Column 7 Column 8 cell 0-0 cell 0-1 cell 0-2 cell 0-3 cell 0-4 cell 0-5 cell 0-6 cell 0-7 cell 1-0 cell 1-1 cell 1-2 cell 1-3 cell 1-4 cell 1-5 cell 1-6 cell 1-7 cell 2-0 cell 2-1 cell 2-2 cell 2-3 cell 2-4 cell 2-5 cell 2-6 cell 2-7 cell 3-0 cell 3-1 cell 3-2 cell 3-3 cell 3-4 cell 3-5 cell 3-6 cell 3-7 cell 4-0 cell 4-1 cell 4-2 cell 4-3 cell 4-4 cell 4-5 cell 4-6 cell 4-7 cell 5-0 cell 5-1 cell 5-2 cell 5-3 cell 5-4 cell 5-5 cell 5-6 cell 5-7 cell 6-0 cell 6-1 cell 6-2 cell 6-3 cell 6-4 cell 6-5 cell 6-6 cell 6-7 cell 7-0 cell 7-1 cell 7-2 cell 7-3 cell 7-4 cell 7-5 cell 7-6 cell 7-7 cell 8-0 cell 8-1 cell 8-2 cell 8-3 cell 8-4 cell 8-5 cell 8-6 cell 8-7 cell 9-0 cell 9-1 cell 9-2 cell 9-3 cell 9-4 cell 9-5 cell 9-6 cell 9-7