1 variant

Data Table

A searchable, filterable table that collapses to cards on mobile.

0 selected

	Category	Status
Argon Digital	Design	active	$9,120	8h ago
Ember & Co	Design	archived	$3,400	4d ago
Fenwick Partners	Engineering	active	$15,760	6h ago
Halcyon Labs	Marketing	active	$21,050	1d ago
Northline Studio	Design	active	$12,480	2h ago
Portage Analytics	Engineering	archived	$4,300	5d ago
Solstice Group	Marketing	pending	$6,900	3d ago
Vera Systems	Engineering	pending	$8,200	5h ago

Argon Digitalactive

Design8h ago

$9,120

Ember & Coarchived

Design4d ago

$3,400

Fenwick Partnersactive

Engineering6h ago

$15,760

Halcyon Labsactive

Marketing1d ago

$21,050

Northline Studioactive

Design2h ago

$12,480

Portage Analyticsarchived

Engineering5d ago

$4,300

Solstice Grouppending

Marketing3d ago

$6,900

Vera Systemspending

Engineering5h ago

$8,200

usage.tsx

import { DataTable } from "@/components/registry/data-table";

export function Accounts() {
  return <DataTable rows={accounts} />;
}

"use client";

import { ArrowUp, Check, Search } from "lucide-react";
import { useMemo, useState } from "react";
import { cn } from "@/lib/utils";

export interface DataTableRow {
  id: string;
  name: string;
  category: string;
  status: "active" | "pending" | "archived";
  value: string;

292 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/data-table

Props

DataTable

rowsDataTableRow[]Default a sample dataset

Each row needs an id, name, category, status, value and updatedAt.

classNamestring

Merged last, so anything passed here wins over the component's own classes.

DataTableRow

idRequiredstring

Stable across sorts and filters, since selection is tracked by it.

nameRequiredstring

The searchable, sortable first column.

categoryRequiredstring

Becomes a filter chip above the table.

statusRequired"active" | "pending" | "archived"

Drawn as a colored pill.

valueRequiredstring

Already formatted. Sorting parses the number out of it.

updatedAtRequiredstring

Already formatted, such as 2h ago.