# API keys table

A shadcn/ui data table for developer dashboards that manage API keys: search, filters, bulk select, pagination and create, rotate and delete flows.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** Developer platforms and API dashboards; Admin panels that manage keys or tokens; SaaS settings and account pages
- **Category:** Data · **Type:** Tables · **Style:** Minimal, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/templates/tables-section) · [Screenshot](https://www.craftui.space/llms.md/preview/tables-section.0de4747e.jpg)

![API keys table](https://www.craftui.space/llms.md/preview/tables-section.0de4747e.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/tables-section.json
```

This is a paid item (SEC-0004): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import TablesSection from "@/components/blocks/tables-section";

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

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `initialKeys` | `ApiKeyRow[]` | — | The keys the table starts with; it then manages its own list. |
| `currentUser` | `string` | `"you"` | Shown as the author of keys created from this UI. |
| `sdkHref` | `string` | `"#"` | Where the toolbar's "SDK" link goes. |
| `docsHref` | `string` | `"#"` | Where the toolbar's "Docs" link goes. |
| `className` | `string` | — | Extra classes for the section's root element. |

### `ApiKeyRow`

| Field | Type | Description |
| --- | --- | --- |
| `id` (required) | `string` | Unique id for the key, used for selection and actions. Not shown. |
| `name` (required) | `string` | The key's name, as people chose it. Editable in the table. |
| `prefix` (required) | `string` | The key's visible start, e.g. "rl_prod_fuaZQ0fdm", never the full secret. Copyable. |
| `status` (required) | `ApiKeyStatus` | "active" or "disabled". A disabled key is shown dimmed. |
| `lastUsedAt` (required) | `number \| null` | Null means the key was never used ("No Activity"). |
| `createdBy` (required) | `string` | Who created it: a username or name. |
| `createdAt` (required) | `number` | When it was created, in milliseconds since 1970 (`Date.now()`). |

## Files

The install adds:

- `components/blocks/tables-section.tsx`

npm dependencies (installed for you): `lucide-react`.