Financial Table

import { FinancialTable, FinancialColumn } from '@/blocks/data-display/financial-table'

interface SalesData {
  region: string
  revenue: number
  profit: number
}

const columns: FinancialColumn<SalesData>[] = [
  { key: 'region', label: 'Region', align: 'left' },
  { key: 'revenue', label: 'Revenue', currency: 'USD', sortable: true },
  { key: 'profit', label: 'Profit', currency: 'USD', sortable: true },
]

const data: SalesData[] = [
  { region: 'North America', revenue: 125000, profit: 45000 },
  { region: 'Europe', revenue: 98000, profit: 32000 },
]

export default function Example() {
  return (
    <>
      {/* Basic table */}
      <FinancialTable columns={columns} data={data} />

      {/* With totals row */}
      <FinancialTable
        columns={columns}
        data={data}
        showTotals
        totalsLabel="Total"
      />

      {/* Highlight negative values */}
      <FinancialTable
        columns={columns}
        data={data}
        highlightNegative
      />

      {/* Custom number formatting */}
      <FinancialTable
        columns={[
          { key: 'revenue', label: 'Revenue', format: (v) => `$${(v / 1000).toFixed(0)}K` },
        ]}
        data={data}
      />

      {/* Different densities */}
      <FinancialTable columns={columns} data={data} density="compact" />
      <FinancialTable columns={columns} data={data} density="comfortable" />
      <FinancialTable columns={columns} data={data} density="spacious" />

      {/* Striped rows */}
      <FinancialTable columns={columns} data={data} striped />
    </>
  )
}