# Support tickets table

A shadcn/ui ticket table for help-desk and support dashboards: saved views, live SLA timers, inline status and assignee, CSV export and a detail sheet.

> 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:** Help-desk and customer-support tools; Internal ops and admin dashboards; SaaS apps with a filterable queue of records
- **Category:** Data · **Type:** Tables · **Style:** Minimal, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/templates/tables-section-02) · [Screenshot](https://www.craftui.space/llms.md/preview/tables-section-02.9ebcac26.jpg)

![Support tickets table](https://www.craftui.space/llms.md/preview/tables-section-02.9ebcac26.jpg)

## Install

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

This is a paid item (SEC-0005): 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 TablesSection02 from "@/components/blocks/tables-section-02";

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

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `initialTickets` | `TicketRow[]` | — | The tickets the table starts with; it then manages its own list. |
| `agents` | `string[]` | `built-in demo content` | Agents tickets can be assigned to. |
| `currentUser` | `string` | `AGENTS[0]` | The signed-in agent: "Mine" and new tickets' default assignee. |
| `className` | `string` | — | Extra classes for the section's root element. |

### `TicketRow`

| Field | Type | Description |
| --- | --- | --- |
| `id` (required) | `string` | Unique ticket number, shown in the table and searchable, e.g. "TCK-1048". |
| `subject` (required) | `string` | The ticket's title: the main text of its row. |
| `preview` (required) | `string` | The latest message, shown in the detail sheet. |
| `requester` (required) | `TicketRequester` | The customer who opened it: name, email and optional company. |
| `status` (required) | `TicketStatus` | Where it is: "open", "pending", "on-hold", "solved" or "closed". Editable inline. |
| `priority` (required) | `TicketPriority` | "urgent", "high", "medium" or "low". Editable inline and sortable. |
| `assignee` (required) | `string \| null` | Null means unassigned. |
| `channel` (required) | `TicketChannel` | How it came in: "email", "chat", "phone" or "web". |
| `tags` (required) | `string[]` | Free-form labels, shown as chips, searched and exported. Can be empty. |
| `replies` (required) | `number` | How many replies it has. Not shown by the table: kept with the ticket for your own columns or views. |
| `unread` (required) | `boolean` | A customer reply nobody has read yet. |
| `createdAt` (required) | `number` | When it was opened, in milliseconds since 1970 (`Date.now()`). |
| `updatedAt` (required) | `number` | Last change, in milliseconds since 1970: shown as "Updated 2h ago" and sorts the table. |
| `slaDueAt` (required) | `number` | When the next response is due under the SLA. |

### `TicketRequester`

| Field | Type | Description |
| --- | --- | --- |
| `name` (required) | `string` | The customer's name. |
| `email` (required) | `string` | Their email address: searched and exported. |
| `company` (required) | `string` | Their company, shown under the name. |

## Files

The install adds:

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

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