Sortable Data Table

The table every admin panel needs: clicking a header cycles through ascending, descending, and unsorted, and each row FLIP-slides from its old position to its new one so you can see what moved where; content taller than maxHeight scrolls inside the table under a sticky header. Checking any row springs a bulk-action bar in from the top (a "已選 N 筆" (N selected) count, action buttons, and a clear button); pass expandable and each row gets a leading chevron that opens a detail row with a height animation. Columns take custom renderers and comparators, and the default comparator auto-detects numbers, numeric strings, and date strings.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<SortableDataTable/>

    </div>
  );
}

Installation

Usage

import {
  SortableDataTable,
  type SortableColumn,
} from "@/components/ui/sortable-data-table";

type Order = {
  id: string;
  customer: string;
  amount: number;
  status: string;
  date: string;
};

const columns: SortableColumn<Order>[] = [
  { key: "id", label: "訂單編號", sortable: true },
  { key: "customer", label: "客戶", sortable: true },
  {
    key: "amount",
    label: "金額",
    sortable: true,
    align: "right",
    render: (row) => `NT$ ${row.amount.toLocaleString("zh-TW")}`,
  },
  { key: "status", label: "狀態" },
  { key: "date", label: "日期", sortable: true },
];

<SortableDataTable
  columns={columns}
  rows={orders}
  defaultSort={{ key: "date", dir: "desc" }}
  selectable
  bulkActions={[{ id: "ship", label: "標記出貨" }]}
  onBulkAction={(actionId, ids) => markShipped(ids)}
  expandable={(row) => <OrderDetail order={row} />}
/>;

Props

SortableColumn

SortState

BulkAction

The SortableRowBase, SortableColumn, SortState, and BulkAction types are also exported by name, along with the default comparator compareCellValues(a, b) for reuse inside a custom sortFn.

How it works

• Sort cycle: clicking the same header steps through ascending → descending → unsorted; clicking a different column starts at ascending. Unsorted returns to the original order of rows
• Default comparison: when both sides are numbers or numeric strings, they compare as numbers (so "12" does not sort before "3"); when both are date strings starting with YYYY-MM-DD or YYYY/M/D, they compare as times; anything else uses localeCompare. Empty values always sort last regardless of direction, and equal rows keep their original order
• FLIP reordering: each row uses motion's layout with a stable id key to slide into place. layoutId is deliberately avoided — it is a global namespace, so two tables on the same page sharing a row id would trigger a shared-element animation by mistake
• Controlled and uncontrolled: sort and selected can each be controlled or uncontrolled; expansion state is managed internally
• The header select-all checkbox shows an indeterminate state when only some rows are checked; select-all only applies to rows currently in rows

Accessibility

• Uses semantic table / thead / th scope="col"; sortable headers are type="button" buttons, and each th carries aria-sort (ascending / descending / none)
• The select-all and per-row checkboxes have an aria-label; expand buttons carry aria-expanded and an expand/collapse label
• The bulk-action bar is role="toolbar", its clear button has an aria-label, and every button has a focus-visible ring
• When the user's system has "reduce motion" enabled, rows reorder instantly without the FLIP slide, the bulk-action bar and detail rows appear without animation, and the header arrow flips instantly