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.
<main nve-layout="row gap:sm full">
<section nve-layout="column gap:md full align:stretch">
page content
</section>
<nve-panel expanded>
<nve-grid container="flat" stripe>
...
</nve-grid>
</nve-panel>
</main>
Panel Grid displays key value type data sets for details of a given item in a collection.
<nve-page>
<nve-page-header slot="header">
<nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
<h2 nve-text="heading" slot="prefix">Infrastructure</h2>
</nve-page-header>
<section nve-layout="column gap:md pad:md full">page content</section>
<nve-page-panel slot="right" expanded closable>
<nve-page-panel-header>
<h3 nve-text="heading medium sm">Recording</h3>
</nve-page-panel-header>
<nve-grid container="flat" stripe>
<nve-grid-header>
<nve-grid-column style="height: 0; overflow: hidden">Key</nve-grid-column>
<nve-grid-column style="height: 0; overflow: hidden">Value</nve-grid-column>
</nve-grid-header>
<nve-grid-row>
<nve-grid-cell><p nve-text="label muted">Session ID</p></nve-grid-cell>
<nve-grid-cell><p nve-text="label">123456</p></nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell><p nve-text="label muted">Record Date</p></nve-grid-cell>
<nve-grid-cell><p nve-text="label">2023-09-04 11:00</p></nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell><p nve-text="label muted">Tag</p></nve-grid-cell>
<nve-grid-cell><nve-tag readonly>Production</nve-tag></nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell><p nve-text="label muted">Route ID</p></nve-grid-cell>
<nve-grid-cell><p nve-text="label">9876123</p></nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell><p nve-text="label muted">Configuration</p></nve-grid-cell>
<nve-grid-cell><p nve-text="label">prod-0.1.0</p></nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell><p nve-text="label muted">Duration</p></nve-grid-cell>
<nve-grid-cell><p nve-text="label">1:23:34</p></nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell><p nve-text="label muted">Description</p></nve-grid-cell>
<nve-grid-cell><p nve-text="label">local test run</p></nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell><p nve-text="label muted">Number of Sensors</p></nve-grid-cell>
<nve-grid-cell><p nve-text="label">24</p></nve-grid-cell>
</nve-grid-row>
</nve-grid>
</nve-page-panel>
</nve-page>
NV
Infrastructure
Recording
Key
Value
Session ID
123456
Record Date
2023-09-04 11:00
Tag
Production
Route ID
9876123
Configuration
prod-0.1.0
Duration
1:23:34
Description
local test run
Number of Sensors
24