# Example: Money, accounting, and percent formats

A regional sales grid using numberFormats.money, numberFormats.accounting, and a raw percent numberFormat, grouped by region so each aggregate row inherits its column's format with no formatAggregate callback.

Source: https://pretable.ai/examples/number-formatting.md

```tsx RegionalSalesGrid.tsx
"use client";

import { useState, type ComponentProps } from "react";

import { PretableSurface } from "@pretable/react";

import { columns } from "./columns";
import { orders, type Order } from "./data";

const VIEWPORT_HEIGHT = 340;

export function RegionalSalesGrid() {
  const [query, setQuery] = useState<
    NonNullable<ComponentProps<typeof PretableSurface<Order>>["query"]>
  >({
    filters: [],
    sort: [],
    rowGroups: [{ columnId: "region" }],
  });

  return (
    <div>
      <p style={{ margin: "0 0 8px", fontSize: 13 }}>
        Revenue uses <code>numberFormats.money</code>, Refunds uses{" "}
        <code>numberFormats.accounting</code> (negative values print
        parenthesized), and Margin is a raw percent <code>numberFormat</code>.
        Grouped by region — every aggregate row below inherits its own
        column&apos;s format with no <code>formatAggregate</code> callback.
      </p>
      <PretableSurface<Order>
        ariaLabel="Regional sales"
        columns={columns}
        getRowId={(row) => row.id}
        groupColumn={{ header: "Region", widthPx: 200 }}
        locale="en-US"
        onQueryChange={setQuery}
        query={query}
        rows={orders}
        viewportHeight={VIEWPORT_HEIGHT}
      />
    </div>
  );
}
```

```ts columns.ts
import { numberFormats, type PretableColumn } from "@pretable/react";

import type { Order } from "./data";

export const columns: PretableColumn<Order>[] = [
  { id: "region", header: "Region" },
  { id: "channel", header: "Channel" },
  {
    id: "revenue",
    header: "Revenue",
    type: "number",
    aggregate: "sum",
    numberFormat: numberFormats.money({ currency: "USD" }),
  },
  {
    id: "refunds",
    header: "Refunds",
    type: "number",
    aggregate: "sum",
    numberFormat: numberFormats.accounting({ currency: "USD" }),
  },
  {
    id: "marginPct",
    header: "Margin",
    type: "number",
    aggregate: "avg",
    numberFormat: { style: "percent", maximumFractionDigits: 1 },
  },
];
```

```ts data.ts
export interface Order extends Record<string, unknown> {
  id: string;
  region: string;
  channel: string;
  revenue: number;
  refunds: number;
  marginPct: number;
}

export const orders: Order[] = [
  {
    id: "o1",
    region: "Northeast",
    channel: "Retail",
    revenue: 48200,
    refunds: -1250,
    marginPct: 0.212,
  },
  {
    id: "o2",
    region: "Northeast",
    channel: "Wholesale",
    revenue: 91500,
    refunds: -3100,
    marginPct: 0.164,
  },
  {
    id: "o3",
    region: "Northeast",
    channel: "Online",
    revenue: 27800,
    refunds: -420,
    marginPct: 0.288,
  },
  {
    id: "o4",
    region: "Midwest",
    channel: "Retail",
    revenue: 33400,
    refunds: -900,
    marginPct: 0.171,
  },
  {
    id: "o5",
    region: "Midwest",
    channel: "Wholesale",
    revenue: 62700,
    refunds: -2650,
    marginPct: 0.139,
  },
  {
    id: "o6",
    region: "Midwest",
    channel: "Online",
    revenue: 18900,
    refunds: -310,
    marginPct: 0.254,
  },
  {
    id: "o7",
    region: "South",
    channel: "Retail",
    revenue: 52600,
    refunds: -1780,
    marginPct: 0.198,
  },
  {
    id: "o8",
    region: "South",
    channel: "Wholesale",
    revenue: 74300,
    refunds: -2990,
    marginPct: 0.152,
  },
  {
    id: "o9",
    region: "South",
    channel: "Online",
    revenue: 24100,
    refunds: -360,
    marginPct: 0.301,
  },
  {
    id: "o10",
    region: "West",
    channel: "Retail",
    revenue: 61200,
    refunds: -2040,
    marginPct: 0.183,
  },
  {
    id: "o11",
    region: "West",
    channel: "Wholesale",
    revenue: 88900,
    refunds: -3550,
    marginPct: 0.147,
  },
  {
    id: "o12",
    region: "West",
    channel: "Online",
    revenue: 31700,
    refunds: -480,
    marginPct: 0.275,
  },
];
```