Data table

'use client'

import { Badge } from '@/components/badge'
import { DataTable } from '@/components/data-table'
import { useDataTable } from '@/components/use-data-table'
import type { ColumnDef } from '@tanstack/react-table'

type Payment = {
  id: string
  customer: string
  email: string
  amount: number
  status: 'succeeded' | 'pending' | 'refunded' | 'failed'
  method: string
  createdAt: string
}

const payments: Payment[] = [
  { id: 'pi_3Kx1', customer: 'Mariam Keita', email: 'mariam@example.com', amount: 8000, status: 'succeeded', method: 'Visa •••• 4242', createdAt: '2026-06-02' },
  { id: 'pi_3Kx2', customer: 'Chidi Okeke', email: 'chidi@example.com', amount: 14250, status: 'pending', method: 'Mastercard •••• 5100', createdAt: '2026-05-28' },
  { id: 'pi_3Kx3', customer: 'Lina Mansouri', email: 'lina@example.com', amount: 3200, status: 'failed', method: 'Bank transfer', createdAt: '2026-04-30' },
]

const statusColors = { succeeded: 'lime', pending: 'amber', refunded: 'zinc', failed: 'red' } as const

const dateFormat = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' })

function formatAmount(amount: number) {
  return `$${(amount / 100).toFixed(2)}`
}

const columns: ColumnDef<Payment, unknown>[] = [
  { id: 'customer', accessorFn: (row) => row.customer, header: 'Customer', cell: ({ row }) => row.original.customer, meta: { label: 'Customer' } },
  { id: 'amount', accessorFn: (row) => row.amount, header: 'Amount', cell: ({ row }) => formatAmount(row.original.amount), meta: { label: 'Amount', cellClass: 'text-right' } },
  { id: 'status', accessorFn: (row) => row.status, header: 'Status', cell: ({ row }) => <Badge color={statusColors[row.original.status]}>{row.original.status}</Badge>, meta: { label: 'Status' } },
  { id: 'method', accessorFn: (row) => row.method, header: 'Method', cell: ({ row }) => row.original.method, enableSorting: false, meta: { label: 'Method' } },
  { id: 'createdAt', accessorFn: (row) => row.createdAt, header: 'Created', cell: ({ row }) => dateFormat.format(new Date(row.original.createdAt)), meta: { label: 'Created' } },
]

export default function Example() {
  let { table } = useDataTable<Payment>({
    data: payments,
    columns,
    getRowId: (row) => row.id,
    defaultSorting: [{ id: 'createdAt', desc: true }],
    pageSize: 5,
  })

  return <DataTable table={table} aria-label="Payments" />
}

<script setup lang="ts">
import Badge from '@/components/badge.vue'
import DataTable from '@/components/data-table.vue'
import { useDataTable } from '@/components/use-data-table'
import type { ColumnDef } from '@tanstack/vue-table'
import { h } from 'vue'

type Payment = {
  id: string
  customer: string
  email: string
  amount: number
  status: 'succeeded' | 'pending' | 'refunded' | 'failed'
  method: string
  createdAt: string
}

const payments: Payment[] = [
  { id: 'pi_3Kx1', customer: 'Mariam Keita', email: 'mariam@example.com', amount: 8000, status: 'succeeded', method: 'Visa •••• 4242', createdAt: '2026-06-02' },
  { id: 'pi_3Kx2', customer: 'Chidi Okeke', email: 'chidi@example.com', amount: 14250, status: 'pending', method: 'Mastercard •••• 5100', createdAt: '2026-05-28' },
  { id: 'pi_3Kx3', customer: 'Lina Mansouri', email: 'lina@example.com', amount: 3200, status: 'failed', method: 'Bank transfer', createdAt: '2026-04-30' },
]

const statusColors = { succeeded: 'lime', pending: 'amber', refunded: 'zinc', failed: 'red' } as const

const dateFormat = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' })

function formatAmount(amount: number) {
  return `$${(amount / 100).toFixed(2)}`
}

const columns: ColumnDef<Payment, unknown>[] = [
  { id: 'customer', accessorFn: (row) => row.customer, header: 'Customer', cell: ({ row }) => row.original.customer, meta: { label: 'Customer' } },
  { id: 'amount', accessorFn: (row) => row.amount, header: 'Amount', cell: ({ row }) => formatAmount(row.original.amount), meta: { label: 'Amount', cellClass: 'text-right' } },
  { id: 'status', accessorFn: (row) => row.status, header: 'Status', cell: ({ row }) => h(Badge, { color: statusColors[row.original.status] }, () => row.original.status), meta: { label: 'Status' } },
  { id: 'method', accessorFn: (row) => row.method, header: 'Method', cell: ({ row }) => row.original.method, enableSorting: false, meta: { label: 'Method' } },
  { id: 'createdAt', accessorFn: (row) => row.createdAt, header: 'Created', cell: ({ row }) => dateFormat.format(new Date(row.original.createdAt)), meta: { label: 'Created' } },
]

const { table } = useDataTable<Payment>({
  data: payments,
  columns,
  getRowId: (row) => row.id,
  defaultSorting: [{ id: 'createdAt', desc: true }],
  pageSize: 5,
})
</script>

<template>
  <DataTable :table="table" aria-label="Payments" />
</template>

'use client'

import { Badge } from '@/components/badge'
import { DataTable } from '@/components/data-table'
import { useDataTable } from '@/components/use-data-table'
import type { ColumnDef } from '@tanstack/react-table'

type Payment = {
  id: string
  customer: string
  email: string
  amount: number
  status: 'succeeded' | 'pending' | 'refunded' | 'failed'
  method: string
  createdAt: string
}

const payments: Payment[] = [
  { id: 'pi_3Kx1', customer: 'Mariam Keita', email: 'mariam@example.com', amount: 8000, status: 'succeeded', method: 'Visa •••• 4242', createdAt: '2026-06-02' },
  { id: 'pi_3Kx2', customer: 'Chidi Okeke', email: 'chidi@example.com', amount: 14250, status: 'pending', method: 'Mastercard •••• 5100', createdAt: '2026-05-28' },
  { id: 'pi_3Kx3', customer: 'Lina Mansouri', email: 'lina@example.com', amount: 3200, status: 'failed', method: 'Bank transfer', createdAt: '2026-04-30' },
]

const statusColors = { succeeded: 'lime', pending: 'amber', refunded: 'zinc', failed: 'red' } as const

const dateFormat = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' })

function formatAmount(amount: number) {
  return `$${(amount / 100).toFixed(2)}`
}

const columns: ColumnDef<Payment, unknown>[] = [
  { id: 'customer', accessorFn: (row) => row.customer, header: 'Customer', cell: ({ row }) => row.original.customer, meta: { label: 'Customer' } },
  { id: 'amount', accessorFn: (row) => row.amount, header: 'Amount', cell: ({ row }) => formatAmount(row.original.amount), meta: { label: 'Amount', cellClass: 'text-right' } },
  { id: 'status', accessorFn: (row) => row.status, header: 'Status', cell: ({ row }) => <Badge color={statusColors[row.original.status]}>{row.original.status}</Badge>, meta: { label: 'Status' } },
  { id: 'method', accessorFn: (row) => row.method, header: 'Method', cell: ({ row }) => row.original.method, enableSorting: false, meta: { label: 'Method' } },
  { id: 'createdAt', accessorFn: (row) => row.createdAt, header: 'Created', cell: ({ row }) => dateFormat.format(new Date(row.original.createdAt)), meta: { label: 'Created' } },
]

const detailedColumns: ColumnDef<Payment, unknown>[] = columns.map((column) =>
  column.id === 'customer'
    ? {
        ...column,
        cell: ({ row }) => (
          <div className="min-w-0">
            <p className="truncate font-medium text-zinc-950 dark:text-white">{row.original.customer}</p>
            <p className="mt-0.5 truncate text-zinc-500 dark:text-zinc-400">{row.original.email}</p>
          </div>
        ),
      }
    : column
)

export default function Example() {
  let { table } = useDataTable<Payment>({ data: payments, columns: detailedColumns, getRowId: (row) => row.id })

  return <DataTable table={table} aria-label="Payments" />
}

<script setup lang="ts">
import Badge from '@/components/badge.vue'
import DataTable from '@/components/data-table.vue'
import { useDataTable } from '@/components/use-data-table'
import type { ColumnDef } from '@tanstack/vue-table'
import { h } from 'vue'

type Payment = {
  id: string
  customer: string
  email: string
  amount: number
  status: 'succeeded' | 'pending' | 'refunded' | 'failed'
  method: string
  createdAt: string
}

const payments: Payment[] = [
  { id: 'pi_3Kx1', customer: 'Mariam Keita', email: 'mariam@example.com', amount: 8000, status: 'succeeded', method: 'Visa •••• 4242', createdAt: '2026-06-02' },
  { id: 'pi_3Kx2', customer: 'Chidi Okeke', email: 'chidi@example.com', amount: 14250, status: 'pending', method: 'Mastercard •••• 5100', createdAt: '2026-05-28' },
  { id: 'pi_3Kx3', customer: 'Lina Mansouri', email: 'lina@example.com', amount: 3200, status: 'failed', method: 'Bank transfer', createdAt: '2026-04-30' },
]

const statusColors = { succeeded: 'lime', pending: 'amber', refunded: 'zinc', failed: 'red' } as const

const dateFormat = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' })

function formatAmount(amount: number) {
  return `$${(amount / 100).toFixed(2)}`
}

const columns: ColumnDef<Payment, unknown>[] = [
  { id: 'customer', accessorFn: (row) => row.customer, header: 'Customer', cell: ({ row }) => row.original.customer, meta: { label: 'Customer' } },
  { id: 'amount', accessorFn: (row) => row.amount, header: 'Amount', cell: ({ row }) => formatAmount(row.original.amount), meta: { label: 'Amount', cellClass: 'text-right' } },
  { id: 'status', accessorFn: (row) => row.status, header: 'Status', cell: ({ row }) => h(Badge, { color: statusColors[row.original.status] }, () => row.original.status), meta: { label: 'Status' } },
  { id: 'method', accessorFn: (row) => row.method, header: 'Method', cell: ({ row }) => row.original.method, enableSorting: false, meta: { label: 'Method' } },
  { id: 'createdAt', accessorFn: (row) => row.createdAt, header: 'Created', cell: ({ row }) => dateFormat.format(new Date(row.original.createdAt)), meta: { label: 'Created' } },
]

const { table } = useDataTable<Payment>({ data: payments, columns, getRowId: (row) => row.id })
</script>

<template>
  <DataTable :table="table" aria-label="Payments">
    <template #cell-customer="{ row }">
      <div class="min-w-0">
        <p class="truncate font-medium text-zinc-950 dark:text-white">{{ row.customer }}</p>
        <p class="mt-0.5 truncate text-zinc-500 dark:text-zinc-400">{{ row.email }}</p>
      </div>
    </template>
  </DataTable>
</template>

'use client'

import { Badge } from '@/components/badge'
import { DataTable } from '@/components/data-table'
import { useDataTable } from '@/components/use-data-table'
import type { ColumnDef } from '@tanstack/react-table'

type Payment = {
  id: string
  customer: string
  email: string
  amount: number
  status: 'succeeded' | 'pending' | 'refunded' | 'failed'
  method: string
  createdAt: string
}

const payments: Payment[] = [
  { id: 'pi_3Kx1', customer: 'Mariam Keita', email: 'mariam@example.com', amount: 8000, status: 'succeeded', method: 'Visa •••• 4242', createdAt: '2026-06-02' },
  { id: 'pi_3Kx2', customer: 'Chidi Okeke', email: 'chidi@example.com', amount: 14250, status: 'pending', method: 'Mastercard •••• 5100', createdAt: '2026-05-28' },
  { id: 'pi_3Kx3', customer: 'Lina Mansouri', email: 'lina@example.com', amount: 3200, status: 'failed', method: 'Bank transfer', createdAt: '2026-04-30' },
]

const statusColors = { succeeded: 'lime', pending: 'amber', refunded: 'zinc', failed: 'red' } as const

const dateFormat = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' })

function formatAmount(amount: number) {
  return `$${(amount / 100).toFixed(2)}`
}

const columns: ColumnDef<Payment, unknown>[] = [
  { id: 'customer', accessorFn: (row) => row.customer, header: 'Customer', cell: ({ row }) => row.original.customer, meta: { label: 'Customer' } },
  { id: 'amount', accessorFn: (row) => row.amount, header: 'Amount', cell: ({ row }) => formatAmount(row.original.amount), meta: { label: 'Amount', cellClass: 'text-right' } },
  { id: 'status', accessorFn: (row) => row.status, header: 'Status', cell: ({ row }) => <Badge color={statusColors[row.original.status]}>{row.original.status}</Badge>, meta: { label: 'Status' } },
  { id: 'method', accessorFn: (row) => row.method, header: 'Method', cell: ({ row }) => row.original.method, enableSorting: false, meta: { label: 'Method' } },
  { id: 'createdAt', accessorFn: (row) => row.createdAt, header: 'Created', cell: ({ row }) => dateFormat.format(new Date(row.original.createdAt)), meta: { label: 'Created' } },
]

export default function Example() {
  let { table } = useDataTable<Payment>({ data: payments, columns, getRowId: (row) => row.id })

  return (
    <DataTable
      table={table}
      aria-label="Payments"
      rowHref={(row) => `/payments/${row.id}`}
      rowTitle={(row) => `Payment ${row.id}`}
    />
  )
}

<script setup lang="ts">
import Badge from '@/components/badge.vue'
import DataTable from '@/components/data-table.vue'
import { useDataTable } from '@/components/use-data-table'
import type { ColumnDef } from '@tanstack/vue-table'
import { h } from 'vue'

type Payment = {
  id: string
  customer: string
  email: string
  amount: number
  status: 'succeeded' | 'pending' | 'refunded' | 'failed'
  method: string
  createdAt: string
}

const payments: Payment[] = [
  { id: 'pi_3Kx1', customer: 'Mariam Keita', email: 'mariam@example.com', amount: 8000, status: 'succeeded', method: 'Visa •••• 4242', createdAt: '2026-06-02' },
  { id: 'pi_3Kx2', customer: 'Chidi Okeke', email: 'chidi@example.com', amount: 14250, status: 'pending', method: 'Mastercard •••• 5100', createdAt: '2026-05-28' },
  { id: 'pi_3Kx3', customer: 'Lina Mansouri', email: 'lina@example.com', amount: 3200, status: 'failed', method: 'Bank transfer', createdAt: '2026-04-30' },
]

const statusColors = { succeeded: 'lime', pending: 'amber', refunded: 'zinc', failed: 'red' } as const

const dateFormat = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' })

function formatAmount(amount: number) {
  return `$${(amount / 100).toFixed(2)}`
}

const columns: ColumnDef<Payment, unknown>[] = [
  { id: 'customer', accessorFn: (row) => row.customer, header: 'Customer', cell: ({ row }) => row.original.customer, meta: { label: 'Customer' } },
  { id: 'amount', accessorFn: (row) => row.amount, header: 'Amount', cell: ({ row }) => formatAmount(row.original.amount), meta: { label: 'Amount', cellClass: 'text-right' } },
  { id: 'status', accessorFn: (row) => row.status, header: 'Status', cell: ({ row }) => h(Badge, { color: statusColors[row.original.status] }, () => row.original.status), meta: { label: 'Status' } },
  { id: 'method', accessorFn: (row) => row.method, header: 'Method', cell: ({ row }) => row.original.method, enableSorting: false, meta: { label: 'Method' } },
  { id: 'createdAt', accessorFn: (row) => row.createdAt, header: 'Created', cell: ({ row }) => dateFormat.format(new Date(row.original.createdAt)), meta: { label: 'Created' } },
]

const { table } = useDataTable<Payment>({ data: payments, columns, getRowId: (row) => row.id })
</script>

<template>
  <DataTable
    :table="table"
    aria-label="Payments"
    :row-href="(row) => `/payments/${row.id}`"
    :row-title="(row) => `Payment ${row.id}`"
  />
</template>

'use client'

import { Badge } from '@/components/badge'
import { Button } from '@/components/button'
import { Checkbox } from '@/components/checkbox'
import { DataTableBulkBar } from '@/components/data-table-bulk-bar'
import { DataTable } from '@/components/data-table'
import { useDataTable } from '@/components/use-data-table'
import type { ColumnDef } from '@tanstack/react-table'
import { useState } from 'react'

type Payment = {
  id: string
  customer: string
  email: string
  amount: number
  status: 'succeeded' | 'pending' | 'refunded' | 'failed'
  method: string
  createdAt: string
}

const payments: Payment[] = [
  { id: 'pi_3Kx1', customer: 'Mariam Keita', email: 'mariam@example.com', amount: 8000, status: 'succeeded', method: 'Visa •••• 4242', createdAt: '2026-06-02' },
  { id: 'pi_3Kx2', customer: 'Chidi Okeke', email: 'chidi@example.com', amount: 14250, status: 'pending', method: 'Mastercard •••• 5100', createdAt: '2026-05-28' },
  { id: 'pi_3Kx3', customer: 'Lina Mansouri', email: 'lina@example.com', amount: 3200, status: 'failed', method: 'Bank transfer', createdAt: '2026-04-30' },
]

const statusColors = { succeeded: 'lime', pending: 'amber', refunded: 'zinc', failed: 'red' } as const

const dateFormat = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' })

function formatAmount(amount: number) {
  return `$${(amount / 100).toFixed(2)}`
}

const columns: ColumnDef<Payment, unknown>[] = [
  { id: 'customer', accessorFn: (row) => row.customer, header: 'Customer', cell: ({ row }) => row.original.customer, meta: { label: 'Customer' } },
  { id: 'amount', accessorFn: (row) => row.amount, header: 'Amount', cell: ({ row }) => formatAmount(row.original.amount), meta: { label: 'Amount', cellClass: 'text-right' } },
  { id: 'status', accessorFn: (row) => row.status, header: 'Status', cell: ({ row }) => <Badge color={statusColors[row.original.status]}>{row.original.status}</Badge>, meta: { label: 'Status' } },
  { id: 'method', accessorFn: (row) => row.method, header: 'Method', cell: ({ row }) => row.original.method, enableSorting: false, meta: { label: 'Method' } },
  { id: 'createdAt', accessorFn: (row) => row.createdAt, header: 'Created', cell: ({ row }) => dateFormat.format(new Date(row.original.createdAt)), meta: { label: 'Created' } },
]

const selectionColumns: ColumnDef<Payment, unknown>[] = [
  {
    id: 'select',
    header: ({ table }) => (
      <Checkbox
        aria-label="Select all on this page"
        checked={table.getIsAllPageRowsSelected()}
        indeterminate={table.getIsSomePageRowsSelected()}
        onChange={(checked) => table.toggleAllPageRowsSelected(checked)}
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        aria-label={`Select ${row.original.id}`}
        checked={row.getIsSelected()}
        onChange={(checked) => row.toggleSelected(checked)}
      />
    ),
    enableSorting: false,
    enableHiding: false,
    meta: { label: 'Selection', fixed: true, cellClass: 'w-0 pr-0' },
  },
  ...columns,
]

export default function Example() {
  let [rows, setRows] = useState(payments)
  let { table, selectedRows, clearSelection } = useDataTable<Payment>({
    data: rows,
    columns: selectionColumns,
    getRowId: (row) => row.id,
  })

  function refund() {
    let ids = new Set(selectedRows.map((row) => row.id))
    setRows((current) => current.map((row) => (ids.has(row.id) ? { ...row, status: 'refunded' as const } : row)))
    clearSelection()
  }

  function remove() {
    let ids = new Set(selectedRows.map((row) => row.id))
    setRows((current) => current.filter((row) => !ids.has(row.id)))
  }

  return (
    <div className={selectedRows.length > 0 ? 'pb-24' : undefined}>
      <DataTable table={table} aria-label="Payments" />
      <DataTableBulkBar count={selectedRows.length} max={100} onClear={clearSelection}>
        <Button outline onClick={refund}>
          Refund
        </Button>
        <Button color="red" onClick={remove}>
          Delete
        </Button>
      </DataTableBulkBar>
    </div>
  )
}