# Example: Render your first grid

Three columns and five rows rendered with the Pretable drop-in component, no controlled state required.

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

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

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

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

export default function Demo() {
  return (
    <Pretable
      ariaLabel="Team roster"
      rows={people}
      columns={columns}
      getRowId={(r) => r.id}
    />
  );
}
```

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

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

export const columns: PretableColumn<Person>[] = [
  { id: "name", header: "Name", value: (r) => r.name },
  { id: "role", header: "Role", value: (r) => r.role },
  { id: "city", header: "City", value: (r) => r.city },
];
```

```ts data.ts
export interface Person {
  id: string;
  name: string;
  role: string;
  city: string;
}

export const people: Person[] = [
  { id: "1", name: "Ada", role: "Engineer", city: "London" },
  { id: "2", name: "Grace", role: "Admiral", city: "New York" },
  { id: "3", name: "Linus", role: "Maintainer", city: "Helsinki" },
  { id: "4", name: "Margaret", role: "Director", city: "Boston" },
  { id: "5", name: "Tim", role: "Inventor", city: "London" },
];
```