"use client" import * as React from "react" import { Table, type TableColumn } from "@/components/motion/table" import { Badge } from "@/components/ui/badge" type Person = { id: string name: string email: string role: string status: "active" | "invited" | "suspended" mrr: number } const FIRST = [ "Ava", "Leo", "Mia", "Kai", "Zoe", "Eli", "Noa", "Ren", "Ivy", "Jude", ] const LAST = [ "Cole", "Frost", "Vale", "Reyes", "Okafor", "Sato", "Lund", "Marsh", "Bose", "Quinn", ] const ROLES = ["Owner", "Admin", "Member", "Viewer"] const STATUSES: Person["status"][] = ["active", "invited", "suspended"] const STATUS_VARIANT = { active: "success", invited: "warning", suspended: "destructive", } as const // Deterministic so the server and the browser render the same rows. function buildPeople(count: number): Person[] { return Array.from({ length: count }, (_, i) => { const first = FIRST[i % FIRST.length] const last = LAST[(i * 7) % LAST.length] return { id: String(i), name: `${first} ${last}`, email: `${first.toLowerCase()}.${last.toLowerCase()}${i}@example.com`, role: ROLES[(i * 3) % ROLES.length], status: STATUSES[(i * 5) % STATUSES.length], mrr: 12 + ((i * 37) % 488), } }) } export default function TableDemo() { const data = React.useMemo(() => buildPeople(10_000), []) const [selected, setSelected] = React.useState([]) const columns = React.useMemo[]>( () => [ { key: "name", header: "Name", sortable: true, width: "1.4fr", cell: (row) => {row.name}, }, { key: "email", header: "Email", width: "1.8fr" }, { key: "role", header: "Role", sortable: true, width: "120px" }, { key: "status", header: "Status", width: "130px", cell: (row) => ( {row.status} ), }, { key: "mrr", header: "MRR", sortable: true, align: "right", width: "110px", cell: (row) => ( ${row.mrr.toLocaleString()} ), }, ], [] ) return (

{data.length.toLocaleString()} rows · virtualized {selected.length > 0 ? ( {selected.length.toLocaleString()} selected ) : null}

) }

Data TableNew

Installation

Dependencies

Source