Data Table

A searchable data table with pagination.

Saved preference for elorm init --ui-library base-ui
NameEmailStatus
Alice Chenalice@example.com
Active
Bob Smithbob@example.com
Pending
Carol Leecarol@example.com
Active
PreviewCode
import { DataTable } from "@/components/blocks/data-table"

export function DataTableDemo() {
  return (
    <DataTable
      rows={[
        { id: "1", name: "Alice Chen", email: "alice@example.com", status: "Active" },
        { id: "2", name: "Bob Smith", email: "bob@example.com", status: "Pending" },
        { id: "3", name: "Carol Lee", email: "carol@example.com", status: "Active" },
      ]}
    />
  )
}

Installation#

Usage#

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

A searchable data table with pagination.