Table Axis Inspector
A free tables axis inspector for comparing a selected cell with its row and column context in React.
Camera equipment comparison
Match a model to the next field trip
Review the practical differences across three camera kits. Selecting a cell keeps its row and model context visible.
Selected cell: Carry weight / Field model. The selected value remains in its table cell.
| Measure | Standard model | Field model | Pro model |
|---|---|---|---|
| Battery life | 8 hours | 11 hours | 14 hours |
| Carry weight | 640 g | 710 g | 820 g |
| Warranty | 2 years | 3 years | 3 years |
Customise
Code
const columns = [{ id: "standard", label: "Standard" }, { id: "field", label: "Field" }];
const rows = [{ id: "weight", label: "Weight", cells: { standard: "8 kg", field: "7.8 kg" } }];
const [accepted, setAccepted] = useState({ rowId: "weight", columnId: "field" });
<TableAxisInspector
caption="Field kit comparison"
columns={columns}
rows={rows}
accepted={accepted}
onValueChange={setAccepted}
/>Table Axis Inspector renders a native semantic table and lets a user request one cell while retaining its row and column headers as visible context. The accepted selection remains controlled by the caller.
Stable unique row and column IDs identify requests. Native keyboard activation is retained, arrow-key table navigation is not intercepted, and the complete accepted table remains available in server-rendered HTML.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/table-axis-inspectorUsage
"use client";
import { useState } from "react";
import { TableAxisInspector, type TableAxisInspectorSelection } from "@/components/table-axis-inspector";
const columns = [{ id: "standard", label: "Standard" }, { id: "actual", label: "Actual" }];
const rows = [{ id: "weight", label: "Weight", cells: { standard: "8 kg", actual: "7.8 kg" } }];
export function Comparison() {
const [accepted, setAccepted] = useState<TableAxisInspectorSelection | null>({ rowId: "weight", columnId: "actual" });
return <TableAxisInspector caption="Field kit comparison" columns={columns} rows={rows} accepted={accepted} onValueChange={setAccepted} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| caption | string | required | Accessible caption for the semantic table. |
| columns | TableAxisInspectorColumn[] | required | Ordered columns with stable unique IDs and visible labels. |
| rows | TableAxisInspectorRow[] | required | Ordered row headers and cells keyed by column ID. |
| accepted | TableAxisInspectorSelection | null | required | Caller-accepted coordinate, or null. Unknown and ambiguous IDs are not selected. |
| onValueChange | (selection: TableAxisInspectorSelection) => void | required | Requests a valid row and column coordinate. |
| className | string | undefined | Additional classes merged onto the component root. |
Customisation
The table uses semantic surface, border, foreground and focus tokens. Own the accepted row and column coordinate in caller state:
<TableAxisInspector caption="Field kit comparison" columns={columns} rows={rows} accepted={accepted} onValueChange={setAccepted} />Frequently asked questions
- Is Table Axis Inspector free for commercial use?
- Yes. The component is MIT licensed and may be used in personal and commercial projects.
- Does selecting a cell immediately update the accepted selection?
- The component requests a coordinate through onValueChange. The caller decides whether to accept it and passes the accepted coordinate back.
- Are row and column headers retained for assistive technology?
- Yes. The component uses native table headers and explicit header relationships for data cells.