Things

The Data Table component is a powerful, feature-rich table for displaying and managing tabular data. It includes search/filtering, sorting, column visibility toggles, row selection, and pagination. Built from scratch using React and native HTML elements. No dependencies on any UI library.

Code

TypeScript: Copy this code into components/ui/data-table.tsx:

tsx

"use client"

import * as React from "react"
import { cn } from "@/lib/utils"
import { Input } from "./input"
import { Button } from "./button"
import { Checkbox } from "./checkbox"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "./dropdown-menu"

export interface Column<T> {
  id: string
  header: string | ((props: { table: any }) => React.ReactNode)
  accessorKey?: keyof T
  accessorFn?: (row: T) => React.ReactNode
  enableSorting?: boolean
  enableHiding?: boolean
  cell?: (props: { row: T; value: any }) => React.ReactNode
}

// ... (full component code)
// See the actual file for complete implementation

JavaScript: Copy this code into components/ui/data-table.jsx:

jsx

"use client"

import * as React from "react"
import { cn } from "@/lib/utils"
import { Input } from "./input"
import { Button } from "./button"
import { Checkbox } from "./checkbox"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuLabel,
} from "./dropdown-menu"

// ... (full component code)
// See the actual file for complete implementation

Usage

TypeScript:

tsx

import {
  DataTable,
  DataTableToolbar,
  DataTableHeader,
  DataTableBody,
  DataTableFooter,
  Column,
} from "@/components/ui/data-table"
import { Badge } from "@/components/ui/badge"

type Payment = {
  id: string
  status: "success" | "processing" | "failed"
  email: string
  amount: string
}

const columns: Column<Payment>[] = [
  {
    id: "status",
    header: "Status",
    accessorKey: "status",
    enableSorting: true,
    cell: ({ value }) => <Badge>{value}</Badge>,
  },
  {
    id: "email",
    header: "Email",
    accessorKey: "email",
    enableSorting: true,
  },
  {
    id: "amount",
    header: "Amount",
    accessorKey: "amount",
    enableSorting: true,
  },
]

function MyComponent() {
  const data: Payment[] = [
    { id: "1", status: "success", email: "ken99@yahoo.com", amount: "$31" },
    { id: "2", status: "processing", email: "abe45@gmail.com", amount: "$242.00" },
  ]

  return (
    <DataTable data={data} columns={columns}>
      <DataTableToolbar searchPlaceholder="Filter emails..." />
      <div className="rounded-md border-2 border-foreground neobrutalism-shadow">
        <table className="w-full">
          <DataTableHeader />
          <DataTableBody />
        </table>
      </div>
      <DataTableFooter />
    </DataTable>
  )
}

JavaScript:

jsx

import {
  DataTable,
  DataTableToolbar,
  DataTableHeader,
  DataTableBody,
  DataTableFooter,
} from "@/components/ui/data-table"
import { Badge } from "@/components/ui/badge"

const columns = [
  {
    id: "status",
    header: "Status",
    accessorKey: "status",
    enableSorting: true,
    cell: ({ value }) => <Badge>{value}</Badge>,
  },
  {
    id: "email",
    header: "Email",
    accessorKey: "email",
    enableSorting: true,
  },
  {
    id: "amount",
    header: "Amount",
    accessorKey: "amount",
    enableSorting: true,
  },
]

function MyComponent() {
  const data = [
    { id: "1", status: "success", email: "ken99@yahoo.com", amount: "$31" },
    { id: "2", status: "processing", email: "abe45@gmail.com", amount: "$242.00" },
  ]

  return (
    <DataTable data={data} columns={columns}>
      <DataTableToolbar searchPlaceholder="Filter emails..." />
      <div className="rounded-md border-2 border-foreground neobrutalism-shadow">
        <table className="w-full">
          <DataTableHeader />
          <DataTableBody />
        </table>
      </div>
      <DataTableFooter />
    </DataTable>
  )
}

Make sure you also have the lib/utils.ts file with the cn helper function, and the required UI components (input, button,checkbox, dropdown-menu).

Examples


Success	ken99@yahoo.com	$31
Success	abe45@gmail.com	$242.00
Processing	monserrat44@gmail.com	$837.00
Success	silas22@gmail.com	$874.00
Failed	carmella@hotmail.com	$721.00

0 of 5 row(s) selected.