# Example: A library catalog, three props of columns

Five books rendered with createColumnHelper and the Pretable preset — no sort UI, no filter UI, no controlled state, just typed columns and rows.

Source: https://pretable.ai/examples/pretable-drop-in.md

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

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

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

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

```ts columns.ts
import { createColumnHelper } from "@pretable/core";

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

const column = createColumnHelper<Book>();

export const columns = [
  column.accessor("title", { type: "text", header: "Title" }),
  column.accessor("author", { type: "text", header: "Author" }),
  column.accessor("year", { type: "number", header: "Year" }),
] as const;
```

```ts data.ts
export interface Book {
  id: string;
  title: string;
  author: string;
  year: number;
}

export const books: Book[] = [
  {
    id: "b1",
    title: "The Left Hand of Darkness",
    author: "Le Guin",
    year: 1969,
  },
  { id: "b2", title: "Kindred", author: "Butler", year: 1979 },
  { id: "b3", title: "Annihilation", author: "VanderMeer", year: 2014 },
  { id: "b4", title: "Piranesi", author: "Clarke", year: 2020 },
  { id: "b5", title: "Dune", author: "Herbert", year: 1965 },
];
```