Sortable Data Table
A searchable table with three-state column sorting and a real loading skeleton.
- Category
- Components
- Added
- 2026-09-01
- Deps
- 1
- Updated
- 2026-09-01
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
"use client";
import { useEffect, useMemo, useState } from "react";
import { ArrowDown, ArrowUp, ArrowUpDown, Search } from "lucide-react";
type Row = {
id: string;
name: string;
status: "Active" | "Paused" | "Trial";
revenue: number;
updated: string;
};
const ROWS: Row[] = [
{ id: "1", name: "Acme Analytics", status: "Active", revenue: 4200, updated: "2d ago" },
{ id: "2", name: "Brightline CRM", status: "Trial", revenue: 0, updated: "5h ago" },
{ id: "3", name: "Coral Studio", status: "Active", revenue: 1890, updated: "1w ago" },
{ id: "4", name: "Driftwood App", status: "Paused", revenue: 640, updated: "3w ago" },
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this component
A plain HTML table has no interaction budget: no sort, no loading state, no empty state, and every consumer re-derives the same sort/filter logic by hand. This component packages the parts that are actually fiddly to get right: a three-state sort cycle (asc, desc, then back to unsorted) so users are never stuck on a sort they didn't want, a memoized filter-then-sort pipeline so typing in the search box doesn't re-sort from scratch on every keystroke, and a real initial-load skeleton driven by a cleanup-safe timer rather than a static placeholder. Reach for this over a heavier table library (TanStack Table, AG Grid) when you have a bounded, client-side dataset and want sort/search without pulling in a headless table engine; reach past it once you need virtualization, server-side pagination, or column resizing. The caveat: sorting is client-side only over the full array, so it does not scale past a few hundred rows without adding pagination or windowing.
Curator’s note
The sort cycle is asc -> desc -> unsorted, not asc -> desc -> asc — losing the ability to get back to original order is the most common complaint about naive two-state sortable tables.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Spec Ledger Section
sectionsA dense spec table with real header association, a focusable scroll region, and a sticky head that keeps its rule.
Fuzzy Match Input
componentsSubsequence search that scores by run length and word starts, and highlights the hits.
Sparkline Scrub Cell
componentsAn inline micro-chart you sweep to read exact values, with monotone interpolation that never invents a peak.