# Example: The engine, working

Five customer accounts rendered with the Pretable drop-in component — the shortest path through the engine, and the shape both consumer paths on this page build on.

Source: https://pretable.ai/examples/overview-grid.md

```tsx demo.tsx
"use client";

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

import { columns } from "./columns";
import { customers } from "./data";

export default function Demo() {
  return (
    <Pretable
      ariaLabel="Customer accounts"
      rows={customers}
      columns={columns}
      getRowId={(row) => row.id}
    />
  );
}
```

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

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

export const columns: PretableColumn<Customer>[] = [
  { id: "name", header: "Account" },
  { id: "plan", header: "Plan" },
  {
    id: "mrr",
    header: "MRR",
    type: "number",
    numberFormat: numberFormats.money({ currency: "USD" }),
  },
];
```

```ts data.ts
export interface Customer {
  id: string;
  name: string;
  plan: string;
  mrr: number;
}

export const customers: Customer[] = [
  { id: "c1", name: "Acme Robotics", plan: "Enterprise", mrr: 4200 },
  { id: "c2", name: "Bluefin Labs", plan: "Growth", mrr: 980 },
  { id: "c3", name: "Cinder Systems", plan: "Growth", mrr: 1150 },
  { id: "c4", name: "Driftwood Studio", plan: "Starter", mrr: 190 },
  { id: "c5", name: "Everline Health", plan: "Enterprise", mrr: 5300 },
];
```