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.
Grid heatmap displaying simulation test pass rates for AV software modules across driving scenarios. Ideal for CI/CD dashboards tracking autonomous vehicle stack validation using red-green diverging tokens.
<nve-grid container="flat">
<style>
@scope {
[data-value="0"],
[data-value="1"],
[data-value="2"],
[data-value="3"],
[data-value="4"] {
--background: var(--nve-sys-visualization-sequential-diverging-red-green-100);
--color: var(--nve-ref-color-neutral-100);
}
[data-value="5"] {
--background: var(--nve-sys-visualization-sequential-diverging-red-green-200);
}
[data-value="6"] {
--background: var(--nve-sys-visualization-sequential-diverging-red-green-300);
}
[data-value="7"] {
--background: var(--nve-sys-visualization-sequential-diverging-red-green-400);
}
[data-value="8"] {
--background: var(--nve-sys-visualization-sequential-diverging-red-green-700);
}
[data-value="9"] {
--background: var(--nve-sys-visualization-sequential-diverging-red-green-800);
}
[data-value="10"] {
--background: var(--nve-sys-visualization-sequential-diverging-red-green-900);
--color: var(--nve-ref-color-neutral-100);
}
[data-value] {
--border-right: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
text-align: center;
}
}
</style>
<nve-grid-header>
<nve-grid-column width="150px" position="fixed">AV Module</nve-grid-column>
<nve-grid-column column-align="center">Highway</nve-grid-column>
<nve-grid-column column-align="center">Urban</nve-grid-column>
<nve-grid-column column-align="center">Intersection</nve-grid-column>
<nve-grid-column column-align="center">Parking</nve-grid-column>
<nve-grid-column column-align="center">Construction</nve-grid-column>
<nve-grid-column column-align="center">Adverse Weather</nve-grid-column>
</nve-grid-header>
<nve-grid-row>
<nve-grid-cell>Perception</nve-grid-cell>
<nve-grid-cell data-value="9">99.0%</nve-grid-cell>
<nve-grid-cell data-value="7">71.7%</nve-grid-cell>
<nve-grid-cell data-value="9">94.7%</nve-grid-cell>
<nve-grid-cell data-value="6">69.3%</nve-grid-cell>
<nve-grid-cell data-value="7">77.3%</nve-grid-cell>
<nve-grid-cell data-value="9">94.3%</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>Localization</nve-grid-cell>
<nve-grid-cell data-value="7">78.0%</nve-grid-cell>
<nve-grid-cell data-value="9">94.5%</nve-grid-cell>
<nve-grid-cell data-value="6">65.3%</nve-grid-cell>
<nve-grid-cell data-value="7">70.9%</nve-grid-cell>
<nve-grid-cell data-value="6">69.9%</nve-grid-cell>
<nve-grid-cell data-value="7">76.5%</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>Prediction</nve-grid-cell>
<nve-grid-cell data-value="8">82.7%</nve-grid-cell>
<nve-grid-cell data-value="9">97.6%</nve-grid-cell>
<nve-grid-cell data-value="6">66.1%</nve-grid-cell>
<nve-grid-cell data-value="7">79.2%</nve-grid-cell>
<nve-grid-cell data-value="8">82.8%</nve-grid-cell>
<nve-grid-cell data-value="7">78.7%</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>Planning</nve-grid-cell>
<nve-grid-cell data-value="8">84.8%</nve-grid-cell>
<nve-grid-cell data-value="7">78.4%</nve-grid-cell>
<nve-grid-cell data-value="9">91.1%</nve-grid-cell>
<nve-grid-cell data-value="7">71.9%</nve-grid-cell>
<nve-grid-cell data-value="7">76.9%</nve-grid-cell>
<nve-grid-cell data-value="9">97.3%</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>Control</nve-grid-cell>
<nve-grid-cell data-value="10">100.0%</nve-grid-cell>
<nve-grid-cell data-value="7">74.2%</nve-grid-cell>
<nve-grid-cell data-value="9">92.8%</nve-grid-cell>
<nve-grid-cell data-value="9">94.0%</nve-grid-cell>
<nve-grid-cell data-value="9">91.9%</nve-grid-cell>
<nve-grid-cell data-value="7">70.9%</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>Mapping</nve-grid-cell>
<nve-grid-cell data-value="8">89.2%</nve-grid-cell>
<nve-grid-cell data-value="8">85.0%</nve-grid-cell>
<nve-grid-cell data-value="9">91.9%</nve-grid-cell>
<nve-grid-cell data-value="9">99.1%</nve-grid-cell>
<nve-grid-cell data-value="8">82.9%</nve-grid-cell>
<nve-grid-cell data-value="9">91.6%</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>Sensor Fusion</nve-grid-cell>
<nve-grid-cell data-value="7">72.6%</nve-grid-cell>
<nve-grid-cell data-value="9">97.8%</nve-grid-cell>
<nve-grid-cell data-value="8">89.5%</nve-grid-cell>
<nve-grid-cell data-value="8">82.9%</nve-grid-cell>
<nve-grid-cell data-value="8">89.9%</nve-grid-cell>
<nve-grid-cell data-value="6">68.6%</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>Safety Monitor</nve-grid-cell>
<nve-grid-cell data-value="8">87.0%</nve-grid-cell>
<nve-grid-cell data-value="10">100.0%</nve-grid-cell>
<nve-grid-cell data-value="10">100.0%</nve-grid-cell>
<nve-grid-cell data-value="8">86.7%</nve-grid-cell>
<nve-grid-cell data-value="7">77.6%</nve-grid-cell>
<nve-grid-cell data-value="8">85.0%</nve-grid-cell>
</nve-grid-row>
</nve-grid>