Sidcn

Data Table

A highly customizable data table component


Avram	aliquam@aol.ca	24
Shea	ac.mi.eleifend@outlook.net	38
Freya	amet.risus@icloud.org	35
Thane	integer.in@aol.edu	24
Doris	pellentesque.habitant@google.couk	50
Yardley	facilisis@yahoo.couk	31
Inga	at.arcu.vestibulum@google.net	18
Craig	elit.aliquam.auctor@hotmail.couk	50
Odette	ac.sem.ut@google.edu	36
Thane	tristique.senectus.et@outlook.org	29

Rows per page

Page 1 of 3

Installation

npx shadcn@latest add https://sid-cn.vercel.app/r/data-table.json

Usage

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

const columns: ColumnDef<Userinfo>[] = [
  {
    accessorKey: "name",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Name" />
    ),
  },
  {
    accessorKey: "email",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Email" />
    ),
  },
  {
    accessorKey: "age",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Age" />
    ),
  },
];

<DataTable columns={columns} data={data} />