Data Table

Sortable, filterable table with typed columns and custom cell renderers.

AAtlas Kit·byAKAtlas Kit

2,390

Bookmarks

8,600

Installs

66,200

Views

44 lines

"use client"

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

type Payment = { invoice: string; customer: string; status: string; amount: number }

const rows: Payment[] = [
  { invoice: "INV-1042", customer: "Northwind", status: "Paid", amount: 2400 },
  { invoice: "INV-1043", customer: "Cadence Labs", status: "Pending", amount: 1200 },
  { invoice: "INV-1044", customer: "Trailhead", status: "Paid", amount: 860 },
  { invoice: "INV-1045", customer: "Helio", status: "Failed", amount: 4300 },
  { invoice: "INV-1046", customer: "Meridian", status: "Paid", amount: 1750 },
]