FLIP Sort Table
A free sortable data table with FLIP row animation for React and Next.js.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 2 runtime packages
FLIP Sort Table is a free React data table component for Next.js, built with Motion and styled with Tailwind. Clicking a column header sorts the rows, and instead of snapping into place each row glides to its new position with a FLIP layout animation on a soft spring, transform only, settling in about half a second.
Sort controls are real buttons inside each th, aria-sort stays in sync on the header cell, and the active column's arrow rotates 180 degrees when the direction changes. Sorting re-orders the DOM itself, so the accessible reading order always matches the visual order at rest, and with reduced motion enabled rows swap to their new order instantly.
| Atlas Analytics | Data | 61800 | 8.1 |
| Nova CRM | Software | 48200 | 12.4 |
| Beacon Mail | Marketing | 35150 | 4.9 |
| Quill Docs | Productivity | 29900 | 6.3 |
| Pulse Monitor | DevOps | 23400 | 21.7 |
| Forge CI | DevOps | 19600 | 16.2 |
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/table-sort-flipUsage
import { TableSortFlip } from "@/components/table-sort-flip";
const columns = [
{ key: "client", label: "Client" },
{ key: "invoices", label: "Invoices", numeric: true },
{ key: "revenue", label: "Revenue", numeric: true },
];
const rows = [
{ client: "Acme Ltd", invoices: 14, revenue: 12400 },
{ client: "Northwind", invoices: 9, revenue: 8600 },
{ client: "Globex", invoices: 21, revenue: 19750 },
];
export default function Page() {
return (
<TableSortFlip
columns={columns}
rows={rows}
defaultSort={{ key: "revenue", dir: "desc" }}
caption="Revenue by client this quarter"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | { key: string; label: string; numeric?: boolean }[] | required | Sortable column definitions in display order. numeric right-aligns the column and compares values numerically. |
| rows | Record<string, string | number>[] | required | Row data keyed by column key. Row identity follows the array index, so each row FLIPs as the same element across sorts. |
| defaultSort | { key: string; dir: "asc" | "desc" } | undefined | Initial sort column and direction. Omit to render rows in their authored order until a header is clicked. |
| caption | string | undefined | Rendered as a visible caption at the top of the table. |
| className | string | undefined | Additional classes merged onto the table. |
Customisation
FLIP Sort Table declares no tokens of its own; it consumes the global semantic tokens through the Tailwind utilities on the table, headers and cells. Restyle it from the className prop and retheme the borders, muted header text and foreground cells through the same semantic tokens the rest of the library uses:
<TableSortFlip
columns={columns}
rows={rows}
className="text-sm"
/>
/* retheme through semantic tokens */
:root {
--border: oklch(from var(--color-neutral-50) l c h / 0.16);
}Frequently asked questions
- Is FLIP Sort Table free for commercial use?
- Yes. FLIP Sort Table is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does FLIP Sort Table affect performance or accessibility?
- The re-order animates transforms only: each row FLIPs to its new slot at a fixed height, so there is no layout thrash and no layout shift while rows are in flight. Sort controls are real buttons with visible focus, the header cells keep aria-sort in sync, and sorting re-orders the DOM so screen readers always read the order that is on screen. With reduced motion enabled rows swap instantly and the arrow flips without rotation.
- Can I control how columns sort?
- Mark a column with numeric: true to right-align it and compare its values as numbers; other columns compare as natural-order, case-insensitive strings. Set the initial column and direction with defaultSort, and clicking the active header toggles between ascending and descending. Ties fall back to the authored row order, so repeat sorts are deterministic.