# CRUD Admin Page

Admin page with a full API Platform-ready CRUD data table.

## Installation

```bash
npx shadcn@latest add https://ui.uptoolkit.com/r/crud-admin-page.json
```

[Registry JSON](https://ui.uptoolkit.com/r/crud-admin-page.json)

## Preview

```tsx
import Page from "app/admin/page";

export function Preview() {
  return <Page />;
}
```


## Source

### page.tsx

```tsx
import { CrudAdminPageContent } from "@/components/crud-admin-content";

/**
 * CRUD admin page with a full API Platform-ready data table.
 *
 * Replace the sample rows by passing `endpoint` and enabling server mode on
 * `CrudDataTable` inside `CrudAdminPageContent`.
 */
export default function Page() {
  return (
    <div className="min-h-svh bg-muted/40">
      <div className="mx-auto max-w-6xl px-4 py-8">
        <CrudAdminPageContent />
      </div>
    </div>
  );
}
```


### components/crud-admin-content.tsx

```tsx
"use client";

import { CrudDataTable } from "@/components/crud-data-table";

/**
 * Client half of the CRUD admin page.
 *
 * Swap `endpoint="/api/books"` and `manual` for a live API Platform resource.
 * The preview runs in client mode against local sample rows.
 */
export function CrudAdminPageContent() {
  return (
    <CrudDataTable
      heading="Books"
      searchPlaceholder="Search books..."
      onCreate={() => undefined}
      onEdit={() => undefined}
      onDelete={() => undefined}
      onBulkDelete={() => undefined}
      onQueryChange={() => undefined}
    />
  );
}
```



## Usage

Admin page built around [`crud-data-table`](/blocks/crud-data-table).

```bash
npx shadcn@latest add @_cn/crud-admin-page
```

Installs to `app/admin/page.tsx` with the table block, hook, helpers, and sample
book columns.

Point the table at a live API Platform collection by editing
`CrudAdminPageContent`:

```tsx
<CrudDataTable endpoint="/api/books" manual heading="Books" />
```

The page stays a server component; only the table runs on the client.