Filterable metrics table
React · React · intermediate · greenfield
Adds the metrics table with client-side filtering and row selection. Rows are memoized with React.memo so the expensive sparkline cells don't re-render while typing.
The dashboard shows up to 5,000 metrics; each row's Sparkline renders an SVG path from ~200 points.
Requirements
- Add a metrics table with a text filter over metric names.
- Clicking a row selects that metric.
- Typing in the filter must re-render only rows whose data changed — row rendering is expensive.
Files touched
- src/components/MetricsTable.jsx
--- src/components/MetricsTable.jsx
+import { memo, useState } from "react";
+import { Sparkline } from "./Sparkline";
+
+const Row = memo(function Row({ metric, onSelect }) {
+ return (
+ <tr onClick={() => onSelect(metric.id)}>
+ <td>{metric.name}</td>
+ <td><Sparkline points={metric.history} /></td>
+ </tr>
+ );
+});
+
+export function MetricsTable({ metrics }) {
+ const [query, setQuery] = useState("");
+ const [selectedId, setSelectedId] = useState(null);
+
+ const visible = metrics.filter((m) => m.name.includes(query));
+
+ return (
+ <div>
+ <input
+ value={query}
+ onChange={(e) => setQuery(e.target.value)}
+ placeholder="Filter metrics…"
+ />
+ <table>
+ <tbody>
+ {visible.map((metric) => (
+ <Row