{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table-6",
  "type": "registry:component",
  "title": "DataTable 6",
  "description": "DataTable 6. A component for displaying and managing tabular data.",
  "dependencies": [],
  "registryDependencies": [
    "table"
  ],
  "files": [
    {
      "path": "components/watermelon/data-table-6.tsx",
      "type": "registry:component",
      "content": "'use client'\n\nimport type { MouseEvent as ReactMouseEvent } from 'react'\nimport { useEffect, useMemo, useRef, useState } from 'react'\n\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/base-ui/table'\n\ntype InvoiceStatus = 'failed' | 'paid' | 'processing' | 'review'\n\ntype ClientInvoice = {\n  amount: number\n  dueDate: string\n  email: string\n  id: string\n  name: string\n  status: InvoiceStatus\n}\n\ntype ColumnKey = 'amount' | 'dueDate' | 'email' | 'name' | 'status'\n\ntype ColumnConfig = {\n  key: ColumnKey\n  label: string\n  minWidth: number\n}\n\ntype ColumnWidths = Record<ColumnKey, number>\n\ntype ResizeState = {\n  column: ColumnKey\n  startWidth: number\n  startX: number\n} | null\n\nconst data: readonly ClientInvoice[] = [\n  {\n    id: 'INV-401',\n    name: 'Shang Chain',\n    amount: 699,\n    status: 'paid',\n    email: 'shang07@yahoo.com',\n    dueDate: '2026-04-14'\n  },\n  {\n    id: 'INV-402',\n    name: 'Kevin Lincoln',\n    amount: 242,\n    status: 'paid',\n    email: 'kevinli09@gmail.com',\n    dueDate: '2026-04-18'\n  },\n  {\n    id: 'INV-403',\n    name: 'Milton Rose',\n    amount: 655,\n    status: 'processing',\n    email: 'rose96@gmail.com',\n    dueDate: '2026-04-20'\n  },\n  {\n    id: 'INV-404',\n    name: 'Silas Ryan',\n    amount: 874,\n    status: 'review',\n    email: 'silas22@gmail.com',\n    dueDate: '2026-04-24'\n  },\n  {\n    id: 'INV-405',\n    name: 'Ben Tenison',\n    amount: 541,\n    status: 'failed',\n    email: 'bent@hotmail.com',\n    dueDate: '2026-04-29'\n  }\n] as const\n\nconst columns: readonly ColumnConfig[] = [\n  { key: 'name', label: 'Name', minWidth: 170 },\n  { key: 'status', label: 'Status', minWidth: 120 },\n  { key: 'email', label: 'Email', minWidth: 220 },\n  { key: 'amount', label: 'Amount', minWidth: 120 },\n  { key: 'dueDate', label: 'Due Date', minWidth: 130 }\n] as const\n\nconst defaultWidths: ColumnWidths = {\n  name: 180,\n  status: 120,\n  email: 230,\n  amount: 120,\n  dueDate: 140\n}\n\nconst formatCurrency = (amount: number) =>\n  new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency: 'USD'\n  }).format(amount)\n\nconst DataTable6 = () => {\n  const [columnWidths, setColumnWidths] = useState<ColumnWidths>(defaultWidths)\n  const [resizeState, setResizeState] = useState<ResizeState>(null)\n  const resizeStateRef = useRef<ResizeState>(null)\n\n  const tableWidth = useMemo(\n    () => columns.reduce((total, column) => total + columnWidths[column.key], 0),\n    [columnWidths]\n  )\n\n  useEffect(() => {\n    resizeStateRef.current = resizeState\n  }, [resizeState])\n\n  useEffect(() => {\n    const handlePointerMove = (event: MouseEvent) => {\n      const currentResize = resizeStateRef.current\n\n      if (!currentResize) {\n        return\n      }\n\n      const column = columns.find((item) => item.key === currentResize.column)\n\n      if (!column) {\n        return\n      }\n\n      const nextWidth = Math.max(column.minWidth, currentResize.startWidth + (event.clientX - currentResize.startX))\n\n      setColumnWidths((current) => ({\n        ...current,\n        [currentResize.column]: nextWidth\n      }))\n    }\n\n    const handlePointerUp = () => {\n      setResizeState(null)\n    }\n\n    window.addEventListener('mousemove', handlePointerMove)\n    window.addEventListener('mouseup', handlePointerUp)\n\n    return () => {\n      window.removeEventListener('mousemove', handlePointerMove)\n      window.removeEventListener('mouseup', handlePointerUp)\n    }\n  }, [])\n\n  const startResize = (column: ColumnKey, event: ReactMouseEvent<HTMLButtonElement>) => {\n    event.preventDefault()\n    setResizeState({\n      column,\n      startX: event.clientX,\n      startWidth: columnWidths[column]\n    })\n  }\n\n  return (\n    <div className='max-w-5xl max-md:max-w-full'>\n      <div className='overflow-hidden rounded-lg border border-border/60 bg-background'>\n        <Table className='table-fixed' style={{ width: tableWidth }}>\n          <TableHeader>\n            <TableRow>\n              {columns.map((column) => {\n                const isResizing = resizeState?.column === column.key\n\n                return (\n                  <TableHead\n                    key={column.key}\n                    className='group/head relative h-11 bg-muted/20 font-medium'\n                    style={{ width: columnWidths[column.key] }}\n                  >\n                    <div className='truncate pr-4'>{column.label}</div>\n                    <button\n                      type='button'\n                      onDoubleClick={() =>\n                        setColumnWidths((current) => ({\n                          ...current,\n                          [column.key]: defaultWidths[column.key]\n                        }))\n                      }\n                      onMouseDown={(event) => startResize(column.key, event)}\n                      aria-label={`Resize ${column.label} column`}\n                      className='absolute top-0 right-0 h-full w-4 cursor-col-resize touch-none select-none'\n                    >\n                      <span\n                        className={`absolute inset-y-0 right-1 w-px bg-border transition-opacity ${\n                          isResizing ? 'opacity-100' : 'opacity-0 group-hover/head:opacity-100'\n                        }`}\n                      />\n                    </button>\n                  </TableHead>\n                )\n              })}\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {data.map((row) => (\n              <TableRow key={row.id} className='hover:bg-muted/10'>\n                <TableCell className='truncate py-3'>\n                  <div className='font-medium'>{row.name}</div>\n                </TableCell>\n                <TableCell className='truncate py-3'>\n                  <div className='capitalize text-sm text-muted-foreground'>{row.status}</div>\n                </TableCell>\n                <TableCell className='truncate py-3'>\n                  <div className='text-sm text-muted-foreground'>{row.email}</div>\n                </TableCell>\n                <TableCell className='truncate py-3'>\n                  <div className='font-medium'>{formatCurrency(row.amount)}</div>\n                </TableCell>\n                <TableCell className='truncate py-3'>\n                  <div className='text-muted-foreground'>{row.dueDate}</div>\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n\nexport default DataTable6\n"
    }
  ]
}