Customers table
Compare accounts by plan, monthly revenue, and renewal risk.
Customers
DriftlabFreya Lindgren | Enterprise | $4,200 |
Sable & CoLeila Haddad | Enterprise | $3,600 |
KeelworksMateo Alvarez | Scale | $1,840 |
LumenshiftAiko Watanabe | Scale | $1,420 |
FernwerkJonas Keller | Team | $640 |
CopperlineZara Osei | Team | $520 |
HavenpointNils Bakker | Starter | $96 |
| Total | $12,316 |
7 rows
Illustrative sample data. Sort a column, filter records, or use the table’s keyboard controls.
Implementation
1"use client";2 3import * as React from "react";4import { AnimatePresence, LayoutGroup, motion, useMotionValueEvent, useReducedMotion, useSpring } from "motion/react";5import { clsx, type ClassValue } from "clsx";6import { twMerge } from "tailwind-merge";7 8/**9 * Adapted from Spectrum UI by Arihant Jain (Apache-2.0).10 * Upstream revision: acdc998c64829f8ae037be48e3c273ccc8d71f60.11 * Modified for Gamma tokens, supplied data, portable exports, and accessible feedback.12 * License and attribution: docs/spectrum/LICENSE and docs/spectrum/NOTICE.13 */14function cn(...values: ClassValue[]) {15 return twMerge(clsx(values));16}17 18/* ---------------------------------------------------------------------------19 * Iconly on a 24px grid, recolored with `currentColor`. Outline (Light) is the20 * idle mark — search, clear — and fill (Bold) is reserved for a state that is21 * already on: a copied tick, a document in the empty body.22 * ------------------------------------------------------------------------- */23 24type IconProps = React.SVGProps<SVGSVGElement>;25 26function Glyph({ children, ...props }: IconProps) {27 return (28 <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>