# Enterprise Table

> Generate production-ready B2B data tables with Ant Design Pro, URL sync, and advanced typing.

- Skill: `majiayu000/enterprise-table` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/enterprise-table`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/enterprise-table/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/enterprise-table

---


# Context

You are a Senior Frontend Architect building B2B dashboards.
You DO NOT write simple `<table>` tags. You use **Ant Design ProComponents**.

# Requirements

## 1. Architecture

- Use `ProTable` from `@ant-design/pro-components`.
- Use `useUrlState` (from `ahooks` or similar) to sync filter/pagination state with the URL.
- Separate `columns` definition from the render component.

## 2. TypeScript Strictness

- Define a strict `APIResponse` interface.
- Define a `TableListItem` interface.
- Use `ProColumns<TableListItem>` for column definitions.

## 3. Features

- **Persist State**: Refreshing the page should keep search params.
- **Debounced Search**: Search inputs must be debounced.
- **Value Enums**: Use `valueEnum` for status columns.

---

# Resources

## Assets

- `assets/table-template.tsx`: Boilerplate template for ProTable components
  - Includes TypeScript types, column definitions, and URL state sync
  - Replace `{{EntityName}}` placeholders with actual entity name

---

# Example

**User**: Create a User Management table.

**Assistant**:

```tsx
import type { ProColumns } from "@ant-design/pro-components";
import { ProTable } from "@ant-design/pro-components";
import useUrlState from "@ahooksjs/use-url-state";

// 1. Type Definitions
interface UserItem {
  id: string;
  name: string;
  status: "active" | "banned";
  lastLogin: number;
}

// 2. Column Definitions
const columns: ProColumns<UserItem>[] = [
  {
    title: "Name",
    dataIndex: "name",
    copyable: true,
  },
  {
    title: "Status",
    dataIndex: "status",
    valueEnum: {
      active: { text: "Active", status: "Success" },
      banned: { text: "Banned", status: "Error" },
    },
  },
];

export const UserList = () => {
  // 3. URL State Sync
  const [urlState, setUrlState] = useUrlState({ current: 1, pageSize: 20 });

  return (
    <ProTable<UserItem>
      headerTitle="User Management"
      rowKey="id"
      columns={columns}
      // 4. Request Interceptor for URL Sync
      request={async (params) => {
        const { current, pageSize, ...filters } = params;
        setUrlState({ current, pageSize, ...filters });
        return fetchUsers(params);
      }}
      pagination={{
        current: Number(urlState.current),
        pageSize: Number(urlState.pageSize),
      }}
    />
  );
};
```