4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T3bd1,"use client"; import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react"; import { motion, useReducedMotion } from "motion/react"; const CELL = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const; const SMALL = { type: "spring", stiffness: 700, damping: 46, mass: 0.5 } as const; const EASE = [0.23, 1, 0.32, 1] as const; const LEAVE = [0.23, 1, 0.32, 1] as const; const HIDE = { duration: 0.12, ease: LEAVE } as const; const SHOW = { duration: 0.25, ease: EASE } as const; const STEP = 0.018; const STEP_CAP = 8; const SETTLE_MS = 380; export type SortDirection = "asc" | "desc"; export type SortState = { columnId: string; direction: SortDirection }; export type SortableColumn = { id: string; header: string; width?: string; align?: "start" | "end"; numeric?: boolean; sortable?: boolean; value?: (row: T) => string | number | null | undefined; cell?: (row: T) => ReactNode; }; export type OrderedRow = { id: string; row: T; index: number }; export type UseSortableRowsOptions = { rows: T[]; getRowId: (row: T) => string; getValue: (row: T, columnId: string) => string | number | null | undefined; sort?: SortState | null; defaultSort?: SortState | null; onSortChange?: (next: SortState | null) => void; restoreOriginal?: boolean; }; export function useSortableRows({ rows, getRowId, getValue, sort, defaultSort = null, onSortChange, restoreOriginal = true, }: UseSortableRowsOptions) { const [internal, setInternal] = useState(defaultSort); const controlled = sort !== undefined; const current = controlled ? sort : internal; const collator = useMemo( () => new Intl.Collator("en", { numeric: true, sensitivity: "base" }), [], ); const ordered = useMemo[]>(() => { const base = rows.map((row, i) => ({ id: getRowId(row), row, i })); if (current) { const dir = current.direction === "asc" ? 1 : -1; base.sort((x, y) => { const a = getValue(x.row, current.columnId); const b = getValue(y.row, current.columnId); const emptyA = a === null || a === undefined || a === ""; const emptyB = b === null || b === undefined || b === ""; if (emptyA || emptyB) { if (emptyA && emptyB) return x.i - y.i; return emptyA ? 1 : -1; } const d = typeof a === "number" && typeof b === "number" ? a - b : collator.compare(String(a), String(b)); return d === 0 ? x.i - y.i : d * dir; }); } return base.map(({ id, row }, index) => ({ id, row, index })); }, [rows, current, getRowId, getValue, collator]); const toggle = useCallback( (columnId: string) => { const next: SortState | null = !current || current.columnId !== columnId ? { columnId, direction: "asc" } : current.direction === "asc" ? { columnId, direction: "desc" } : restoreOriginal ? null : { columnId, direction: "asc" }; if (!controlled) setInternal(next); onSortChange?.(next); }, [current, controlled, onSortChange, restoreOriginal], ); const ariaSort = useCallback( (columnId: string): "ascending" | "descending" | "none" => current?.columnId === columnId ? current.direction === "asc" ? "ascending" : "descending" : "none", [current], ); return { sort: current, ordered, toggle, ariaSort }; } export type SortableTableProps = { rows: T[]; columns: SortableColumn[]; getRowId: (row: T) => string; label: string; rowHeight?: number; maxHeight?: number; sort?: SortState | null; defaultSort?: SortState | null; onSortChange?: (next: SortState | null) => void; markable?: boolean; onMarkChange?: (id: string | null) => void; getRowLabel?: (row: T) => string; markLabel?: string; markRowLabel?: (name: string) => string; sortStatus?: (header: string | null, direction: SortDirection | null, rows: number) => string; className?: string; }; export function SortableTable({ rows, columns, getRowId, label, rowHeight = 44, maxHeight, sort, defaultSort = null, onSortChange, markable = false, onMarkChange, getRowLabel, markLabel = "Follow", markRowLabel = (name) => `Follow ${name}`, sortStatus = (header, direction, count) => header && direction ? `Sorted by ${header}, ${direction === "asc" ? "ascending" : "descending"}. ${count} rows.` : `Original order restored. ${count} rows.`, className = "", }: SortableTableProps) { const reduced = useReducedMotion(); const [marked, setMarked] = useState(null); const [touched, setTouched] = useState(false); const [moving, setMoving] = useState(false); const settleTimer = useRef | null>(null); useEffect( () => () => { if (settleTimer.current) clearTimeout(settleTimer.current); }, [], ); const getValue = useCallback( (row: T, columnId: string) => { const column = columns.find((c) => c.id === columnId); return column?.value ? column.value(row) : null; }, [columns], ); const { sort: current, ordered, toggle, ariaSort } = useSortableRows({ rows, getRowId, getValue, sort, defaultSort, onSortChange, }); const template = useMemo( () => (markable ? "44px " : "") + columns.map((c) => c.width ?? "minmax(0, 1fr)").join(" "), [columns, markable], ); const onToggle = (columnId: string) => { setTouched(true); toggle(columnId); if (reduced) return; setMoving(true); if (settleTimer.current) clearTimeout(settleTimer.current); settleTimer.current = setTimeout(() => setMoving(false), SETTLE_MS); }; const onMark = (id: string) => { const next = marked === id ? null : id; setMarked(next); onMarkChange?.(next); }; const nameOf = (row: T) => getRowLabel?.(row) ?? String(columns[0]?.value?.(row) ?? getRowId(row)); const activeHeader = columns.find((c) => c.id === current?.columnId)?.header; const message = !touched ? "" : sortStatus(activeHeader ?? null, current?.direction ?? null, rows.length); return (

{markable && (

{markLabel}

)} {columns.map((column) => { const state = ariaSort(column.id); const active = state !== "none"; const end = column.align === "end"; return (

{column.sortable === false ? ( {column.header} ) : ( )}

); })}

{rows.length === 0 && (

No rows

)} {ordered.map(({ id, row, index }) => { const isMarked = markable && marked === id; return ( {markable && (

)} {columns.map((column, c) => { const raw = column.value?.(row); const content = column.cell ? column.cell(row) : raw === null || raw === undefined || raw === "" ? "—" : String(raw); return (

{content}

); })} ); })} {Array.from({ length: Math.max(0, rows.length - 1) }, (_, i) => (

))}

{message}

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/sortable-table.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/sortable-table","itemId":"@motion-lexicon/sortable-table"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/registry/components/sortable-table.tsx","content":"$52","type":"registry:ui","target":"components/motion-lexicon/sortable-table.tsx"}]}]]}],"$L53"]}]

Sortable Table

Installation

Files

components

Styles