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 style="height: 400px">
<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>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>
Fixed-height scrollable grid with persistent header and footer. Use scrollable grids when displaying large datasets where users need to maintain context of column headers and footer controls (like pagination) while scrolling through many rows, improving navigation without losing orientation.
<nve-grid style="height: 402px">
<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-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-row>
<nve-grid-cell>cell 10-0</nve-grid-cell> <nve-grid-cell>cell 10-1</nve-grid-cell>
<nve-grid-cell>cell 10-2</nve-grid-cell> <nve-grid-cell>cell 10-3</nve-grid-cell>
<nve-grid-cell>cell 10-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 11-0</nve-grid-cell> <nve-grid-cell>cell 11-1</nve-grid-cell>
<nve-grid-cell>cell 11-2</nve-grid-cell> <nve-grid-cell>cell 11-3</nve-grid-cell>
<nve-grid-cell>cell 11-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 12-0</nve-grid-cell> <nve-grid-cell>cell 12-1</nve-grid-cell>
<nve-grid-cell>cell 12-2</nve-grid-cell> <nve-grid-cell>cell 12-3</nve-grid-cell>
<nve-grid-cell>cell 12-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 13-0</nve-grid-cell> <nve-grid-cell>cell 13-1</nve-grid-cell>
<nve-grid-cell>cell 13-2</nve-grid-cell> <nve-grid-cell>cell 13-3</nve-grid-cell>
<nve-grid-cell>cell 13-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 14-0</nve-grid-cell> <nve-grid-cell>cell 14-1</nve-grid-cell>
<nve-grid-cell>cell 14-2</nve-grid-cell> <nve-grid-cell>cell 14-3</nve-grid-cell>
<nve-grid-cell>cell 14-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 15-0</nve-grid-cell> <nve-grid-cell>cell 15-1</nve-grid-cell>
<nve-grid-cell>cell 15-2</nve-grid-cell> <nve-grid-cell>cell 15-3</nve-grid-cell>
<nve-grid-cell>cell 15-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 16-0</nve-grid-cell> <nve-grid-cell>cell 16-1</nve-grid-cell>
<nve-grid-cell>cell 16-2</nve-grid-cell> <nve-grid-cell>cell 16-3</nve-grid-cell>
<nve-grid-cell>cell 16-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 17-0</nve-grid-cell> <nve-grid-cell>cell 17-1</nve-grid-cell>
<nve-grid-cell>cell 17-2</nve-grid-cell> <nve-grid-cell>cell 17-3</nve-grid-cell>
<nve-grid-cell>cell 17-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 18-0</nve-grid-cell> <nve-grid-cell>cell 18-1</nve-grid-cell>
<nve-grid-cell>cell 18-2</nve-grid-cell> <nve-grid-cell>cell 18-3</nve-grid-cell>
<nve-grid-cell>cell 18-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 19-0</nve-grid-cell> <nve-grid-cell>cell 19-1</nve-grid-cell>
<nve-grid-cell>cell 19-2</nve-grid-cell> <nve-grid-cell>cell 19-3</nve-grid-cell>
<nve-grid-cell>cell 19-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 20-0</nve-grid-cell> <nve-grid-cell>cell 20-1</nve-grid-cell>
<nve-grid-cell>cell 20-2</nve-grid-cell> <nve-grid-cell>cell 20-3</nve-grid-cell>
<nve-grid-cell>cell 20-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 21-0</nve-grid-cell> <nve-grid-cell>cell 21-1</nve-grid-cell>
<nve-grid-cell>cell 21-2</nve-grid-cell> <nve-grid-cell>cell 21-3</nve-grid-cell>
<nve-grid-cell>cell 21-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 22-0</nve-grid-cell> <nve-grid-cell>cell 22-1</nve-grid-cell>
<nve-grid-cell>cell 22-2</nve-grid-cell> <nve-grid-cell>cell 22-3</nve-grid-cell>
<nve-grid-cell>cell 22-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 23-0</nve-grid-cell> <nve-grid-cell>cell 23-1</nve-grid-cell>
<nve-grid-cell>cell 23-2</nve-grid-cell> <nve-grid-cell>cell 23-3</nve-grid-cell>
<nve-grid-cell>cell 23-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 24-0</nve-grid-cell> <nve-grid-cell>cell 24-1</nve-grid-cell>
<nve-grid-cell>cell 24-2</nve-grid-cell> <nve-grid-cell>cell 24-3</nve-grid-cell>
<nve-grid-cell>cell 24-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 25-0</nve-grid-cell> <nve-grid-cell>cell 25-1</nve-grid-cell>
<nve-grid-cell>cell 25-2</nve-grid-cell> <nve-grid-cell>cell 25-3</nve-grid-cell>
<nve-grid-cell>cell 25-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 26-0</nve-grid-cell> <nve-grid-cell>cell 26-1</nve-grid-cell>
<nve-grid-cell>cell 26-2</nve-grid-cell> <nve-grid-cell>cell 26-3</nve-grid-cell>
<nve-grid-cell>cell 26-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 27-0</nve-grid-cell> <nve-grid-cell>cell 27-1</nve-grid-cell>
<nve-grid-cell>cell 27-2</nve-grid-cell> <nve-grid-cell>cell 27-3</nve-grid-cell>
<nve-grid-cell>cell 27-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 28-0</nve-grid-cell> <nve-grid-cell>cell 28-1</nve-grid-cell>
<nve-grid-cell>cell 28-2</nve-grid-cell> <nve-grid-cell>cell 28-3</nve-grid-cell>
<nve-grid-cell>cell 28-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 29-0</nve-grid-cell> <nve-grid-cell>cell 29-1</nve-grid-cell>
<nve-grid-cell>cell 29-2</nve-grid-cell> <nve-grid-cell>cell 29-3</nve-grid-cell>
<nve-grid-cell>cell 29-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 30-0</nve-grid-cell> <nve-grid-cell>cell 30-1</nve-grid-cell>
<nve-grid-cell>cell 30-2</nve-grid-cell> <nve-grid-cell>cell 30-3</nve-grid-cell>
<nve-grid-cell>cell 30-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 31-0</nve-grid-cell> <nve-grid-cell>cell 31-1</nve-grid-cell>
<nve-grid-cell>cell 31-2</nve-grid-cell> <nve-grid-cell>cell 31-3</nve-grid-cell>
<nve-grid-cell>cell 31-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 32-0</nve-grid-cell> <nve-grid-cell>cell 32-1</nve-grid-cell>
<nve-grid-cell>cell 32-2</nve-grid-cell> <nve-grid-cell>cell 32-3</nve-grid-cell>
<nve-grid-cell>cell 32-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 33-0</nve-grid-cell> <nve-grid-cell>cell 33-1</nve-grid-cell>
<nve-grid-cell>cell 33-2</nve-grid-cell> <nve-grid-cell>cell 33-3</nve-grid-cell>
<nve-grid-cell>cell 33-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 34-0</nve-grid-cell> <nve-grid-cell>cell 34-1</nve-grid-cell>
<nve-grid-cell>cell 34-2</nve-grid-cell> <nve-grid-cell>cell 34-3</nve-grid-cell>
<nve-grid-cell>cell 34-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 35-0</nve-grid-cell> <nve-grid-cell>cell 35-1</nve-grid-cell>
<nve-grid-cell>cell 35-2</nve-grid-cell> <nve-grid-cell>cell 35-3</nve-grid-cell>
<nve-grid-cell>cell 35-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 36-0</nve-grid-cell> <nve-grid-cell>cell 36-1</nve-grid-cell>
<nve-grid-cell>cell 36-2</nve-grid-cell> <nve-grid-cell>cell 36-3</nve-grid-cell>
<nve-grid-cell>cell 36-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 37-0</nve-grid-cell> <nve-grid-cell>cell 37-1</nve-grid-cell>
<nve-grid-cell>cell 37-2</nve-grid-cell> <nve-grid-cell>cell 37-3</nve-grid-cell>
<nve-grid-cell>cell 37-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 38-0</nve-grid-cell> <nve-grid-cell>cell 38-1</nve-grid-cell>
<nve-grid-cell>cell 38-2</nve-grid-cell> <nve-grid-cell>cell 38-3</nve-grid-cell>
<nve-grid-cell>cell 38-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 39-0</nve-grid-cell> <nve-grid-cell>cell 39-1</nve-grid-cell>
<nve-grid-cell>cell 39-2</nve-grid-cell> <nve-grid-cell>cell 39-3</nve-grid-cell>
<nve-grid-cell>cell 39-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 40-0</nve-grid-cell> <nve-grid-cell>cell 40-1</nve-grid-cell>
<nve-grid-cell>cell 40-2</nve-grid-cell> <nve-grid-cell>cell 40-3</nve-grid-cell>
<nve-grid-cell>cell 40-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 41-0</nve-grid-cell> <nve-grid-cell>cell 41-1</nve-grid-cell>
<nve-grid-cell>cell 41-2</nve-grid-cell> <nve-grid-cell>cell 41-3</nve-grid-cell>
<nve-grid-cell>cell 41-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 42-0</nve-grid-cell> <nve-grid-cell>cell 42-1</nve-grid-cell>
<nve-grid-cell>cell 42-2</nve-grid-cell> <nve-grid-cell>cell 42-3</nve-grid-cell>
<nve-grid-cell>cell 42-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 43-0</nve-grid-cell> <nve-grid-cell>cell 43-1</nve-grid-cell>
<nve-grid-cell>cell 43-2</nve-grid-cell> <nve-grid-cell>cell 43-3</nve-grid-cell>
<nve-grid-cell>cell 43-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 44-0</nve-grid-cell> <nve-grid-cell>cell 44-1</nve-grid-cell>
<nve-grid-cell>cell 44-2</nve-grid-cell> <nve-grid-cell>cell 44-3</nve-grid-cell>
<nve-grid-cell>cell 44-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 45-0</nve-grid-cell> <nve-grid-cell>cell 45-1</nve-grid-cell>
<nve-grid-cell>cell 45-2</nve-grid-cell> <nve-grid-cell>cell 45-3</nve-grid-cell>
<nve-grid-cell>cell 45-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 46-0</nve-grid-cell> <nve-grid-cell>cell 46-1</nve-grid-cell>
<nve-grid-cell>cell 46-2</nve-grid-cell> <nve-grid-cell>cell 46-3</nve-grid-cell>
<nve-grid-cell>cell 46-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 47-0</nve-grid-cell> <nve-grid-cell>cell 47-1</nve-grid-cell>
<nve-grid-cell>cell 47-2</nve-grid-cell> <nve-grid-cell>cell 47-3</nve-grid-cell>
<nve-grid-cell>cell 47-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 48-0</nve-grid-cell> <nve-grid-cell>cell 48-1</nve-grid-cell>
<nve-grid-cell>cell 48-2</nve-grid-cell> <nve-grid-cell>cell 48-3</nve-grid-cell>
<nve-grid-cell>cell 48-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 49-0</nve-grid-cell> <nve-grid-cell>cell 49-1</nve-grid-cell>
<nve-grid-cell>cell 49-2</nve-grid-cell> <nve-grid-cell>cell 49-3</nve-grid-cell>
<nve-grid-cell>cell 49-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 50-0</nve-grid-cell> <nve-grid-cell>cell 50-1</nve-grid-cell>
<nve-grid-cell>cell 50-2</nve-grid-cell> <nve-grid-cell>cell 50-3</nve-grid-cell>
<nve-grid-cell>cell 50-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 51-0</nve-grid-cell> <nve-grid-cell>cell 51-1</nve-grid-cell>
<nve-grid-cell>cell 51-2</nve-grid-cell> <nve-grid-cell>cell 51-3</nve-grid-cell>
<nve-grid-cell>cell 51-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 52-0</nve-grid-cell> <nve-grid-cell>cell 52-1</nve-grid-cell>
<nve-grid-cell>cell 52-2</nve-grid-cell> <nve-grid-cell>cell 52-3</nve-grid-cell>
<nve-grid-cell>cell 52-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 53-0</nve-grid-cell> <nve-grid-cell>cell 53-1</nve-grid-cell>
<nve-grid-cell>cell 53-2</nve-grid-cell> <nve-grid-cell>cell 53-3</nve-grid-cell>
<nve-grid-cell>cell 53-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 54-0</nve-grid-cell> <nve-grid-cell>cell 54-1</nve-grid-cell>
<nve-grid-cell>cell 54-2</nve-grid-cell> <nve-grid-cell>cell 54-3</nve-grid-cell>
<nve-grid-cell>cell 54-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 55-0</nve-grid-cell> <nve-grid-cell>cell 55-1</nve-grid-cell>
<nve-grid-cell>cell 55-2</nve-grid-cell> <nve-grid-cell>cell 55-3</nve-grid-cell>
<nve-grid-cell>cell 55-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 56-0</nve-grid-cell> <nve-grid-cell>cell 56-1</nve-grid-cell>
<nve-grid-cell>cell 56-2</nve-grid-cell> <nve-grid-cell>cell 56-3</nve-grid-cell>
<nve-grid-cell>cell 56-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 57-0</nve-grid-cell> <nve-grid-cell>cell 57-1</nve-grid-cell>
<nve-grid-cell>cell 57-2</nve-grid-cell> <nve-grid-cell>cell 57-3</nve-grid-cell>
<nve-grid-cell>cell 57-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 58-0</nve-grid-cell> <nve-grid-cell>cell 58-1</nve-grid-cell>
<nve-grid-cell>cell 58-2</nve-grid-cell> <nve-grid-cell>cell 58-3</nve-grid-cell>
<nve-grid-cell>cell 58-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 59-0</nve-grid-cell> <nve-grid-cell>cell 59-1</nve-grid-cell>
<nve-grid-cell>cell 59-2</nve-grid-cell> <nve-grid-cell>cell 59-3</nve-grid-cell>
<nve-grid-cell>cell 59-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 60-0</nve-grid-cell> <nve-grid-cell>cell 60-1</nve-grid-cell>
<nve-grid-cell>cell 60-2</nve-grid-cell> <nve-grid-cell>cell 60-3</nve-grid-cell>
<nve-grid-cell>cell 60-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 61-0</nve-grid-cell> <nve-grid-cell>cell 61-1</nve-grid-cell>
<nve-grid-cell>cell 61-2</nve-grid-cell> <nve-grid-cell>cell 61-3</nve-grid-cell>
<nve-grid-cell>cell 61-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 62-0</nve-grid-cell> <nve-grid-cell>cell 62-1</nve-grid-cell>
<nve-grid-cell>cell 62-2</nve-grid-cell> <nve-grid-cell>cell 62-3</nve-grid-cell>
<nve-grid-cell>cell 62-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 63-0</nve-grid-cell> <nve-grid-cell>cell 63-1</nve-grid-cell>
<nve-grid-cell>cell 63-2</nve-grid-cell> <nve-grid-cell>cell 63-3</nve-grid-cell>
<nve-grid-cell>cell 63-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 64-0</nve-grid-cell> <nve-grid-cell>cell 64-1</nve-grid-cell>
<nve-grid-cell>cell 64-2</nve-grid-cell> <nve-grid-cell>cell 64-3</nve-grid-cell>
<nve-grid-cell>cell 64-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 65-0</nve-grid-cell> <nve-grid-cell>cell 65-1</nve-grid-cell>
<nve-grid-cell>cell 65-2</nve-grid-cell> <nve-grid-cell>cell 65-3</nve-grid-cell>
<nve-grid-cell>cell 65-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 66-0</nve-grid-cell> <nve-grid-cell>cell 66-1</nve-grid-cell>
<nve-grid-cell>cell 66-2</nve-grid-cell> <nve-grid-cell>cell 66-3</nve-grid-cell>
<nve-grid-cell>cell 66-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 67-0</nve-grid-cell> <nve-grid-cell>cell 67-1</nve-grid-cell>
<nve-grid-cell>cell 67-2</nve-grid-cell> <nve-grid-cell>cell 67-3</nve-grid-cell>
<nve-grid-cell>cell 67-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 68-0</nve-grid-cell> <nve-grid-cell>cell 68-1</nve-grid-cell>
<nve-grid-cell>cell 68-2</nve-grid-cell> <nve-grid-cell>cell 68-3</nve-grid-cell>
<nve-grid-cell>cell 68-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 69-0</nve-grid-cell> <nve-grid-cell>cell 69-1</nve-grid-cell>
<nve-grid-cell>cell 69-2</nve-grid-cell> <nve-grid-cell>cell 69-3</nve-grid-cell>
<nve-grid-cell>cell 69-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 70-0</nve-grid-cell> <nve-grid-cell>cell 70-1</nve-grid-cell>
<nve-grid-cell>cell 70-2</nve-grid-cell> <nve-grid-cell>cell 70-3</nve-grid-cell>
<nve-grid-cell>cell 70-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 71-0</nve-grid-cell> <nve-grid-cell>cell 71-1</nve-grid-cell>
<nve-grid-cell>cell 71-2</nve-grid-cell> <nve-grid-cell>cell 71-3</nve-grid-cell>
<nve-grid-cell>cell 71-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 72-0</nve-grid-cell> <nve-grid-cell>cell 72-1</nve-grid-cell>
<nve-grid-cell>cell 72-2</nve-grid-cell> <nve-grid-cell>cell 72-3</nve-grid-cell>
<nve-grid-cell>cell 72-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 73-0</nve-grid-cell> <nve-grid-cell>cell 73-1</nve-grid-cell>
<nve-grid-cell>cell 73-2</nve-grid-cell> <nve-grid-cell>cell 73-3</nve-grid-cell>
<nve-grid-cell>cell 73-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 74-0</nve-grid-cell> <nve-grid-cell>cell 74-1</nve-grid-cell>
<nve-grid-cell>cell 74-2</nve-grid-cell> <nve-grid-cell>cell 74-3</nve-grid-cell>
<nve-grid-cell>cell 74-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 75-0</nve-grid-cell> <nve-grid-cell>cell 75-1</nve-grid-cell>
<nve-grid-cell>cell 75-2</nve-grid-cell> <nve-grid-cell>cell 75-3</nve-grid-cell>
<nve-grid-cell>cell 75-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 76-0</nve-grid-cell> <nve-grid-cell>cell 76-1</nve-grid-cell>
<nve-grid-cell>cell 76-2</nve-grid-cell> <nve-grid-cell>cell 76-3</nve-grid-cell>
<nve-grid-cell>cell 76-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 77-0</nve-grid-cell> <nve-grid-cell>cell 77-1</nve-grid-cell>
<nve-grid-cell>cell 77-2</nve-grid-cell> <nve-grid-cell>cell 77-3</nve-grid-cell>
<nve-grid-cell>cell 77-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 78-0</nve-grid-cell> <nve-grid-cell>cell 78-1</nve-grid-cell>
<nve-grid-cell>cell 78-2</nve-grid-cell> <nve-grid-cell>cell 78-3</nve-grid-cell>
<nve-grid-cell>cell 78-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 79-0</nve-grid-cell> <nve-grid-cell>cell 79-1</nve-grid-cell>
<nve-grid-cell>cell 79-2</nve-grid-cell> <nve-grid-cell>cell 79-3</nve-grid-cell>
<nve-grid-cell>cell 79-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 80-0</nve-grid-cell> <nve-grid-cell>cell 80-1</nve-grid-cell>
<nve-grid-cell>cell 80-2</nve-grid-cell> <nve-grid-cell>cell 80-3</nve-grid-cell>
<nve-grid-cell>cell 80-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 81-0</nve-grid-cell> <nve-grid-cell>cell 81-1</nve-grid-cell>
<nve-grid-cell>cell 81-2</nve-grid-cell> <nve-grid-cell>cell 81-3</nve-grid-cell>
<nve-grid-cell>cell 81-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 82-0</nve-grid-cell> <nve-grid-cell>cell 82-1</nve-grid-cell>
<nve-grid-cell>cell 82-2</nve-grid-cell> <nve-grid-cell>cell 82-3</nve-grid-cell>
<nve-grid-cell>cell 82-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 83-0</nve-grid-cell> <nve-grid-cell>cell 83-1</nve-grid-cell>
<nve-grid-cell>cell 83-2</nve-grid-cell> <nve-grid-cell>cell 83-3</nve-grid-cell>
<nve-grid-cell>cell 83-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 84-0</nve-grid-cell> <nve-grid-cell>cell 84-1</nve-grid-cell>
<nve-grid-cell>cell 84-2</nve-grid-cell> <nve-grid-cell>cell 84-3</nve-grid-cell>
<nve-grid-cell>cell 84-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 85-0</nve-grid-cell> <nve-grid-cell>cell 85-1</nve-grid-cell>
<nve-grid-cell>cell 85-2</nve-grid-cell> <nve-grid-cell>cell 85-3</nve-grid-cell>
<nve-grid-cell>cell 85-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 86-0</nve-grid-cell> <nve-grid-cell>cell 86-1</nve-grid-cell>
<nve-grid-cell>cell 86-2</nve-grid-cell> <nve-grid-cell>cell 86-3</nve-grid-cell>
<nve-grid-cell>cell 86-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 87-0</nve-grid-cell> <nve-grid-cell>cell 87-1</nve-grid-cell>
<nve-grid-cell>cell 87-2</nve-grid-cell> <nve-grid-cell>cell 87-3</nve-grid-cell>
<nve-grid-cell>cell 87-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 88-0</nve-grid-cell> <nve-grid-cell>cell 88-1</nve-grid-cell>
<nve-grid-cell>cell 88-2</nve-grid-cell> <nve-grid-cell>cell 88-3</nve-grid-cell>
<nve-grid-cell>cell 88-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 89-0</nve-grid-cell> <nve-grid-cell>cell 89-1</nve-grid-cell>
<nve-grid-cell>cell 89-2</nve-grid-cell> <nve-grid-cell>cell 89-3</nve-grid-cell>
<nve-grid-cell>cell 89-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 90-0</nve-grid-cell> <nve-grid-cell>cell 90-1</nve-grid-cell>
<nve-grid-cell>cell 90-2</nve-grid-cell> <nve-grid-cell>cell 90-3</nve-grid-cell>
<nve-grid-cell>cell 90-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 91-0</nve-grid-cell> <nve-grid-cell>cell 91-1</nve-grid-cell>
<nve-grid-cell>cell 91-2</nve-grid-cell> <nve-grid-cell>cell 91-3</nve-grid-cell>
<nve-grid-cell>cell 91-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 92-0</nve-grid-cell> <nve-grid-cell>cell 92-1</nve-grid-cell>
<nve-grid-cell>cell 92-2</nve-grid-cell> <nve-grid-cell>cell 92-3</nve-grid-cell>
<nve-grid-cell>cell 92-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 93-0</nve-grid-cell> <nve-grid-cell>cell 93-1</nve-grid-cell>
<nve-grid-cell>cell 93-2</nve-grid-cell> <nve-grid-cell>cell 93-3</nve-grid-cell>
<nve-grid-cell>cell 93-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 94-0</nve-grid-cell> <nve-grid-cell>cell 94-1</nve-grid-cell>
<nve-grid-cell>cell 94-2</nve-grid-cell> <nve-grid-cell>cell 94-3</nve-grid-cell>
<nve-grid-cell>cell 94-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 95-0</nve-grid-cell> <nve-grid-cell>cell 95-1</nve-grid-cell>
<nve-grid-cell>cell 95-2</nve-grid-cell> <nve-grid-cell>cell 95-3</nve-grid-cell>
<nve-grid-cell>cell 95-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 96-0</nve-grid-cell> <nve-grid-cell>cell 96-1</nve-grid-cell>
<nve-grid-cell>cell 96-2</nve-grid-cell> <nve-grid-cell>cell 96-3</nve-grid-cell>
<nve-grid-cell>cell 96-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 97-0</nve-grid-cell> <nve-grid-cell>cell 97-1</nve-grid-cell>
<nve-grid-cell>cell 97-2</nve-grid-cell> <nve-grid-cell>cell 97-3</nve-grid-cell>
<nve-grid-cell>cell 97-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 98-0</nve-grid-cell> <nve-grid-cell>cell 98-1</nve-grid-cell>
<nve-grid-cell>cell 98-2</nve-grid-cell> <nve-grid-cell>cell 98-3</nve-grid-cell>
<nve-grid-cell>cell 98-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 99-0</nve-grid-cell> <nve-grid-cell>cell 99-1</nve-grid-cell>
<nve-grid-cell>cell 99-2</nve-grid-cell> <nve-grid-cell>cell 99-3</nve-grid-cell>
<nve-grid-cell>cell 99-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-footer>footer</nve-grid-footer>
</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
cell 10-0 cell 10-1
cell 10-2 cell 10-3
cell 10-4
cell 11-0 cell 11-1
cell 11-2 cell 11-3
cell 11-4
cell 12-0 cell 12-1
cell 12-2 cell 12-3
cell 12-4
cell 13-0 cell 13-1
cell 13-2 cell 13-3
cell 13-4
cell 14-0 cell 14-1
cell 14-2 cell 14-3
cell 14-4
cell 15-0 cell 15-1
cell 15-2 cell 15-3
cell 15-4
cell 16-0 cell 16-1
cell 16-2 cell 16-3
cell 16-4
cell 17-0 cell 17-1
cell 17-2 cell 17-3
cell 17-4
cell 18-0 cell 18-1
cell 18-2 cell 18-3
cell 18-4
cell 19-0 cell 19-1
cell 19-2 cell 19-3
cell 19-4
cell 20-0 cell 20-1
cell 20-2 cell 20-3
cell 20-4
cell 21-0 cell 21-1
cell 21-2 cell 21-3
cell 21-4
cell 22-0 cell 22-1
cell 22-2 cell 22-3
cell 22-4
cell 23-0 cell 23-1
cell 23-2 cell 23-3
cell 23-4
cell 24-0 cell 24-1
cell 24-2 cell 24-3
cell 24-4
cell 25-0 cell 25-1
cell 25-2 cell 25-3
cell 25-4
cell 26-0 cell 26-1
cell 26-2 cell 26-3
cell 26-4
cell 27-0 cell 27-1
cell 27-2 cell 27-3
cell 27-4
cell 28-0 cell 28-1
cell 28-2 cell 28-3
cell 28-4
cell 29-0 cell 29-1
cell 29-2 cell 29-3
cell 29-4
cell 30-0 cell 30-1
cell 30-2 cell 30-3
cell 30-4
cell 31-0 cell 31-1
cell 31-2 cell 31-3
cell 31-4
cell 32-0 cell 32-1
cell 32-2 cell 32-3
cell 32-4
cell 33-0 cell 33-1
cell 33-2 cell 33-3
cell 33-4
cell 34-0 cell 34-1
cell 34-2 cell 34-3
cell 34-4
cell 35-0 cell 35-1
cell 35-2 cell 35-3
cell 35-4
cell 36-0 cell 36-1
cell 36-2 cell 36-3
cell 36-4
cell 37-0 cell 37-1
cell 37-2 cell 37-3
cell 37-4
cell 38-0 cell 38-1
cell 38-2 cell 38-3
cell 38-4
cell 39-0 cell 39-1
cell 39-2 cell 39-3
cell 39-4
cell 40-0 cell 40-1
cell 40-2 cell 40-3
cell 40-4
cell 41-0 cell 41-1
cell 41-2 cell 41-3
cell 41-4
cell 42-0 cell 42-1
cell 42-2 cell 42-3
cell 42-4
cell 43-0 cell 43-1
cell 43-2 cell 43-3
cell 43-4
cell 44-0 cell 44-1
cell 44-2 cell 44-3
cell 44-4
cell 45-0 cell 45-1
cell 45-2 cell 45-3
cell 45-4
cell 46-0 cell 46-1
cell 46-2 cell 46-3
cell 46-4
cell 47-0 cell 47-1
cell 47-2 cell 47-3
cell 47-4
cell 48-0 cell 48-1
cell 48-2 cell 48-3
cell 48-4
cell 49-0 cell 49-1
cell 49-2 cell 49-3
cell 49-4
cell 50-0 cell 50-1
cell 50-2 cell 50-3
cell 50-4
cell 51-0 cell 51-1
cell 51-2 cell 51-3
cell 51-4
cell 52-0 cell 52-1
cell 52-2 cell 52-3
cell 52-4
cell 53-0 cell 53-1
cell 53-2 cell 53-3
cell 53-4
cell 54-0 cell 54-1
cell 54-2 cell 54-3
cell 54-4
cell 55-0 cell 55-1
cell 55-2 cell 55-3
cell 55-4
cell 56-0 cell 56-1
cell 56-2 cell 56-3
cell 56-4
cell 57-0 cell 57-1
cell 57-2 cell 57-3
cell 57-4
cell 58-0 cell 58-1
cell 58-2 cell 58-3
cell 58-4
cell 59-0 cell 59-1
cell 59-2 cell 59-3
cell 59-4
cell 60-0 cell 60-1
cell 60-2 cell 60-3
cell 60-4
cell 61-0 cell 61-1
cell 61-2 cell 61-3
cell 61-4
cell 62-0 cell 62-1
cell 62-2 cell 62-3
cell 62-4
cell 63-0 cell 63-1
cell 63-2 cell 63-3
cell 63-4
cell 64-0 cell 64-1
cell 64-2 cell 64-3
cell 64-4
cell 65-0 cell 65-1
cell 65-2 cell 65-3
cell 65-4
cell 66-0 cell 66-1
cell 66-2 cell 66-3
cell 66-4
cell 67-0 cell 67-1
cell 67-2 cell 67-3
cell 67-4
cell 68-0 cell 68-1
cell 68-2 cell 68-3
cell 68-4
cell 69-0 cell 69-1
cell 69-2 cell 69-3
cell 69-4
cell 70-0 cell 70-1
cell 70-2 cell 70-3
cell 70-4
cell 71-0 cell 71-1
cell 71-2 cell 71-3
cell 71-4
cell 72-0 cell 72-1
cell 72-2 cell 72-3
cell 72-4
cell 73-0 cell 73-1
cell 73-2 cell 73-3
cell 73-4
cell 74-0 cell 74-1
cell 74-2 cell 74-3
cell 74-4
cell 75-0 cell 75-1
cell 75-2 cell 75-3
cell 75-4
cell 76-0 cell 76-1
cell 76-2 cell 76-3
cell 76-4
cell 77-0 cell 77-1
cell 77-2 cell 77-3
cell 77-4
cell 78-0 cell 78-1
cell 78-2 cell 78-3
cell 78-4
cell 79-0 cell 79-1
cell 79-2 cell 79-3
cell 79-4
cell 80-0 cell 80-1
cell 80-2 cell 80-3
cell 80-4
cell 81-0 cell 81-1
cell 81-2 cell 81-3
cell 81-4
cell 82-0 cell 82-1
cell 82-2 cell 82-3
cell 82-4
cell 83-0 cell 83-1
cell 83-2 cell 83-3
cell 83-4
cell 84-0 cell 84-1
cell 84-2 cell 84-3
cell 84-4
cell 85-0 cell 85-1
cell 85-2 cell 85-3
cell 85-4
cell 86-0 cell 86-1
cell 86-2 cell 86-3
cell 86-4
cell 87-0 cell 87-1
cell 87-2 cell 87-3
cell 87-4
cell 88-0 cell 88-1
cell 88-2 cell 88-3
cell 88-4
cell 89-0 cell 89-1
cell 89-2 cell 89-3
cell 89-4
cell 90-0 cell 90-1
cell 90-2 cell 90-3
cell 90-4
cell 91-0 cell 91-1
cell 91-2 cell 91-3
cell 91-4
cell 92-0 cell 92-1
cell 92-2 cell 92-3
cell 92-4
cell 93-0 cell 93-1
cell 93-2 cell 93-3
cell 93-4
cell 94-0 cell 94-1
cell 94-2 cell 94-3
cell 94-4
cell 95-0 cell 95-1
cell 95-2 cell 95-3
cell 95-4
cell 96-0 cell 96-1
cell 96-2 cell 96-3
cell 96-4
cell 97-0 cell 97-1
cell 97-2 cell 97-3
cell 97-4
cell 98-0 cell 98-1
cell 98-2 cell 98-3
cell 98-4
cell 99-0 cell 99-1
cell 99-2 cell 99-3
cell 99-4
footer
Full Height
Using nve-layout="column" the grid to fill any remaining space of a parent containing element. This is helpful for preserving the grid height/fill while dynamic content above can freely change.
<section
nve-layout="column gap:lg"
style="
height: 500px;
padding: var(--nve-ref-size-100);
border: 1px solid var(--nve-ref-border-color-emphasis);
resize: vertical;
overflow: hidden;
"
>
<nve-search>
<input type="search" aria-label="search" placeholder="search" />
</nve-search>
<nve-grid style="height: 100%; min-height: 0">
<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-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>
</section>
document.querySelector('nve-grid').scrollTo({ top: 0, left: 0, behavior: 'smooth' });
Programmatic scroll control using the grid scrollTo API. Use for scroll-to-top buttons, jump-to-row navigation, or restoring scroll position after data refreshes in large datasets.
<nve-grid id="scroll-position-grid" style="height: 402px">
<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-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-row>
<nve-grid-cell>cell 10-0</nve-grid-cell> <nve-grid-cell>cell 10-1</nve-grid-cell>
<nve-grid-cell>cell 10-2</nve-grid-cell> <nve-grid-cell>cell 10-3</nve-grid-cell>
<nve-grid-cell>cell 10-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 11-0</nve-grid-cell> <nve-grid-cell>cell 11-1</nve-grid-cell>
<nve-grid-cell>cell 11-2</nve-grid-cell> <nve-grid-cell>cell 11-3</nve-grid-cell>
<nve-grid-cell>cell 11-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 12-0</nve-grid-cell> <nve-grid-cell>cell 12-1</nve-grid-cell>
<nve-grid-cell>cell 12-2</nve-grid-cell> <nve-grid-cell>cell 12-3</nve-grid-cell>
<nve-grid-cell>cell 12-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 13-0</nve-grid-cell> <nve-grid-cell>cell 13-1</nve-grid-cell>
<nve-grid-cell>cell 13-2</nve-grid-cell> <nve-grid-cell>cell 13-3</nve-grid-cell>
<nve-grid-cell>cell 13-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 14-0</nve-grid-cell> <nve-grid-cell>cell 14-1</nve-grid-cell>
<nve-grid-cell>cell 14-2</nve-grid-cell> <nve-grid-cell>cell 14-3</nve-grid-cell>
<nve-grid-cell>cell 14-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 15-0</nve-grid-cell> <nve-grid-cell>cell 15-1</nve-grid-cell>
<nve-grid-cell>cell 15-2</nve-grid-cell> <nve-grid-cell>cell 15-3</nve-grid-cell>
<nve-grid-cell>cell 15-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 16-0</nve-grid-cell> <nve-grid-cell>cell 16-1</nve-grid-cell>
<nve-grid-cell>cell 16-2</nve-grid-cell> <nve-grid-cell>cell 16-3</nve-grid-cell>
<nve-grid-cell>cell 16-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 17-0</nve-grid-cell> <nve-grid-cell>cell 17-1</nve-grid-cell>
<nve-grid-cell>cell 17-2</nve-grid-cell> <nve-grid-cell>cell 17-3</nve-grid-cell>
<nve-grid-cell>cell 17-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 18-0</nve-grid-cell> <nve-grid-cell>cell 18-1</nve-grid-cell>
<nve-grid-cell>cell 18-2</nve-grid-cell> <nve-grid-cell>cell 18-3</nve-grid-cell>
<nve-grid-cell>cell 18-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>cell 19-0</nve-grid-cell> <nve-grid-cell>cell 19-1</nve-grid-cell>
<nve-grid-cell>cell 19-2</nve-grid-cell> <nve-grid-cell>cell 19-3</nve-grid-cell>
<nve-grid-cell>cell 19-4</nve-grid-cell>
</nve-grid-row>
<nve-grid-footer>
<nve-button id="scroll-top-button">scroll top</nve-button>
</nve-grid-footer>
</nve-grid>
<script type="module">
const grid = document.querySelector("#scroll-position-grid");
const button = document.querySelector("#scroll-top-button");
button.addEventListener("click", () => {
grid.scrollTo({ top: 0, behavior: "smooth" });
});
</script>
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
cell 10-0 cell 10-1
cell 10-2 cell 10-3
cell 10-4
cell 11-0 cell 11-1
cell 11-2 cell 11-3
cell 11-4
cell 12-0 cell 12-1
cell 12-2 cell 12-3
cell 12-4
cell 13-0 cell 13-1
cell 13-2 cell 13-3
cell 13-4
cell 14-0 cell 14-1
cell 14-2 cell 14-3
cell 14-4
cell 15-0 cell 15-1
cell 15-2 cell 15-3
cell 15-4
cell 16-0 cell 16-1
cell 16-2 cell 16-3
cell 16-4
cell 17-0 cell 17-1
cell 17-2 cell 17-3
cell 17-4
cell 18-0 cell 18-1
cell 18-2 cell 18-3
cell 18-4
cell 19-0 cell 19-1
cell 19-2 cell 19-3
cell 19-4
scroll top