Data table
Search, filter, sort, select, and expand rows in a reusable accessible table.
Component releases
| Orders table | Ready | 12 | |
| Inventory table | In review | 9 | |
| Feature flags | Ready | 14 | |
| Total | 35 |
3 rows
Illustrative sample data. Sort a column, filter records, or use the table’s keyboard controls.
Implementation
1/**2 * Adapted from Spectrum UI by Arihant Jain (Apache-2.0).3 * Upstream revision: acdc998c64829f8ae037be48e3c273ccc8d71f60.4 * Modified for Gamma tokens, supplied data, portable exports, and accessible feedback.5 * License and attribution: docs/spectrum/LICENSE and docs/spectrum/NOTICE.6 */7"use client";8 9import * as React from "react";10import {11 AnimatePresence,12 LayoutGroup,13 motion,14 useMotionValueEvent,15 useReducedMotion,16 useSpring,17} from "motion/react";18 19import { clsx, type ClassValue } from "clsx";20import { twMerge } from "tailwind-merge";21 22function cn(...values: ClassValue[]) {23 return twMerge(clsx(values));24}25 26/* ---------------------------------------------------------------------------27 * Iconly on a 24px grid, recolored with `currentColor`. Outline (Light) is the28 * idle mark — search, clear — and fill (Bold) is reserved for a state that is