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