组件导航

ProTable

pro-table

高级表格 · 列表页编排层(复用 Table/SearchForm/Pagination) · 查询区 + 工具栏(密度/列设置/刷新/全屏) + 行选择 + 集成分页(企业中后台列表页旗舰)

用法

托管模式

传 request 即由 ProTable 自管 page/sort/filters/loading/data，按需请求服务端。

托管模式（服务端 request）


暂无数据

共 0 条

tsx

const request = async (p) => {
  const rows = await fetchEmployees(p.filters, p.sort);
  const start = (p.page - 1) * p.pageSize;
  return { data: rows.slice(start, start + p.pageSize), total: rows.length };
};

<ProTable
  title="员工列表"
  columns={columns}
  request={request}
  defaultPageSize={8}
  enableRowSelection
  search={{ fields: searchFields }}
/>

cursor 分页

paginationMode="cursor"，request 返回 { data, nextCursor, hasMore }，底部为上一页/下一页。

cursor 分页（上一页/下一页 · 无 total）


暂无数据

tsx

<ProTable
  title="日志"
  columns={columns}
  request={request}
  paginationMode="cursor"
  defaultPageSize={8}
  pageSizeOptions={[8, 16, 32]}
/>

展示模式（受控分页）

自管 data/分页时，传 data + pagination + search 回调即可。

员工列表


员工 01	1	研发部	在职	2024-01-15	¥8,000
员工 02	2	市场部	离职	2024-02-15	¥9,500
员工 03	3	财务部	待入职	2024-03-15	¥11,000
员工 04	4	人事部	在职	2024-04-15	¥12,500
员工 05	5	研发部	离职	2024-05-15	¥14,000
员工 06	6	市场部	待入职	2024-06-15	¥15,500
员工 07	7	财务部	在职	2024-07-15	¥17,000
员工 08	8	人事部	离职	2024-08-15	¥18,500

共 47 条

tsx

<ProTable
  title="员工列表"
  columns={columns}
  data={pageData}
  enableRowSelection
  onReload={reload}
  toolbarActions={<Button size="sm">+ 新增员工</Button>}
  search={{ fields: searchFields, onSearch, onReset }}
  pagination={{ page, pageSize, total, onPageChange: setPage }}
/>

精简表

紧凑密度 + 关掉全屏按钮 + 无查询区。

紧凑表（无查询区）


员工 01	1	研发部	在职
员工 02	2	市场部	离职
员工 03	3	财务部	待入职
员工 04	4	人事部	在职
员工 05	5	研发部	离职

tsx

<ProTable
  title="紧凑表"
  columns={columns.slice(0, 4)}
  data={rows}
  density="compact"
  toolbar={{ fullscreen: false }}
/>

何时用

企业中后台「一整个列表页」的旗舰组件：顶部查询区（SearchForm）+ 工具栏（密度/列设置/刷新/全屏）+ 主表（Table）+ 底部分页一套打包。只要列表 + 服务端分页/排序/筛选，优先用它。区别于 Table：Table 是裸表皮，要自己拼查询区、工具栏、分页、请求生命周期；ProTable 的「托管模式」（传 request）连这些都自管。

导入

import { ProTable } from "@hulianui/ui"

Props

继承 Omit<TableProps<TData>, "data">（即 Table 的 columns/enableSorting/enableRowSelection/density/getRowId/rowClassName… 全可用），并新增：

名称	类型	默认	说明
data	`TData[]`	—	展示模式必传；托管模式由 request 提供，忽略此项
request	`(params: ProTableRequestParams) => Promise<ProTableRequestResult<TData>>`	—	传则进「托管模式」：自管 page/pageSize/sort/filters/loading/data/选择，忽略 data/pagination/loading
paginationMode	`"page" \| "cursor"`	`"page"`	托管分页协议：page=返回 `{data,total}` 数字分页；cursor=入参带 cursor、返回 `{data,nextCursor,hasMore}` 上下页
defaultPageSize	`number`	`10`	托管模式初始每页条数
pageSizeOptions	`number[]`	—	提供则渲染「每页条数」切换器（如 [10,20,50,100]）
pagination	`ProTablePagination`	—	展示模式集成分页（底部）；`{page,pageSize,total,onPageChange,showFirstLast?,onPageSizeChange?}`
search	`Omit<SearchFormProps,"onSearch"> & { onSearch? }`	—	集成查询区（复用 SearchForm）；托管模式下 onSearch 可省
toolbar	`boolean \| ProTableToolbarFeatures`	`true`	true=全开 / false=不渲染 / 对象逐项开关（reload/density/columnSetting/fullscreen）
loading	`boolean`	—	加载态：刷新图标旋转
actionRef	`Ref<ProTableActions>`	—	命令式句柄：`reload()` 重新请求 / `clearSelection()` 清选
rootClassName	`string`	—	外层容器类名（区别透传 Table 的 className）

Events

继承的 Table 事件（onSortingChange / onRowSelectionChange / onExpandedChange / onColumnFiltersChange）随 Omit<TableProps,"data"> 一并可用。ProTable 自有：

事件	类型	说明
onReload	`() => void`	点工具栏刷新图标触发
onRequestError	`(error: unknown) => void`	托管 request 失败回调（默认 `console.error`）；失败时 loading 复位、保留上次数据

Slots

插槽	类型	说明
title	`ReactNode`	卡片标题（工具栏左侧）
toolbarActions	`ReactNode`	工具栏右侧自定义操作（新增按钮等），位于内置图标按钮左侧
batchActions	`(ctx: ProTableBatchCtx) => ReactNode`	渲染函数；选中行时渲染批量操作区（需 enableRowSelection）

禁忌 / 坑

托管模式（传 request）下 data/pagination/loading 三个 prop 被忽略——别两种模式混用。cursor 分页无 total/不能随机跳页，且 filters/sort/pageSize 任一变化会自动重置回第 1 页。
托管模式必须给 getRowId，否则行选择/批量在翻页后 key 不稳。
request reject 默认走 console.error 兜底（保证不 unhandled），生产里接 onRequestError 弹 toast / 上报。
batchActions 需配合 enableRowSelection 且有选中行才显示警示条。

ProTable

pro-table

高级表格 · 列表页编排层(复用 Table/SearchForm/Pagination) · 查询区 + 工具栏(密度/列设置/刷新/全屏) + 行选择 + 集成分页(企业中后台列表页旗舰)

用法

托管模式

传 request 即由 ProTable 自管 page/sort/filters/loading/data，按需请求服务端。

托管模式（服务端 request）


暂无数据

共 0 条

tsx

const request = async (p) => {
  const rows = await fetchEmployees(p.filters, p.sort);
  const start = (p.page - 1) * p.pageSize;
  return { data: rows.slice(start, start + p.pageSize), total: rows.length };
};

<ProTable
  title="员工列表"
  columns={columns}
  request={request}
  defaultPageSize={8}
  enableRowSelection
  search={{ fields: searchFields }}
/>

cursor 分页

paginationMode="cursor"，request 返回 { data, nextCursor, hasMore }，底部为上一页/下一页。

cursor 分页（上一页/下一页 · 无 total）


暂无数据

tsx

<ProTable
  title="日志"
  columns={columns}
  request={request}
  paginationMode="cursor"
  defaultPageSize={8}
  pageSizeOptions={[8, 16, 32]}
/>

展示模式（受控分页）

自管 data/分页时，传 data + pagination + search 回调即可。

员工列表


员工 01	1	研发部	在职	2024-01-15	¥8,000
员工 02	2	市场部	离职	2024-02-15	¥9,500
员工 03	3	财务部	待入职	2024-03-15	¥11,000
员工 04	4	人事部	在职	2024-04-15	¥12,500
员工 05	5	研发部	离职	2024-05-15	¥14,000
员工 06	6	市场部	待入职	2024-06-15	¥15,500
员工 07	7	财务部	在职	2024-07-15	¥17,000
员工 08	8	人事部	离职	2024-08-15	¥18,500

共 47 条

tsx

<ProTable
  title="员工列表"
  columns={columns}
  data={pageData}
  enableRowSelection
  onReload={reload}
  toolbarActions={<Button size="sm">+ 新增员工</Button>}
  search={{ fields: searchFields, onSearch, onReset }}
  pagination={{ page, pageSize, total, onPageChange: setPage }}
/>

精简表

紧凑密度 + 关掉全屏按钮 + 无查询区。

紧凑表（无查询区）


员工 01	1	研发部	在职
员工 02	2	市场部	离职
员工 03	3	财务部	待入职
员工 04	4	人事部	在职
员工 05	5	研发部	离职

tsx

<ProTable
  title="紧凑表"
  columns={columns.slice(0, 4)}
  data={rows}
  density="compact"
  toolbar={{ fullscreen: false }}
/>

何时用

导入

import { ProTable } from "@hulianui/ui"

Props

继承 Omit<TableProps<TData>, "data">（即 Table 的 columns/enableSorting/enableRowSelection/density/getRowId/rowClassName… 全可用），并新增：

名称	类型	默认	说明
data	`TData[]`	—	展示模式必传；托管模式由 request 提供，忽略此项
request	`(params: ProTableRequestParams) => Promise<ProTableRequestResult<TData>>`	—	传则进「托管模式」：自管 page/pageSize/sort/filters/loading/data/选择，忽略 data/pagination/loading
paginationMode	`"page" \| "cursor"`	`"page"`	托管分页协议：page=返回 `{data,total}` 数字分页；cursor=入参带 cursor、返回 `{data,nextCursor,hasMore}` 上下页
defaultPageSize	`number`	`10`	托管模式初始每页条数
pageSizeOptions	`number[]`	—	提供则渲染「每页条数」切换器（如 [10,20,50,100]）
pagination	`ProTablePagination`	—	展示模式集成分页（底部）；`{page,pageSize,total,onPageChange,showFirstLast?,onPageSizeChange?}`
search	`Omit<SearchFormProps,"onSearch"> & { onSearch? }`	—	集成查询区（复用 SearchForm）；托管模式下 onSearch 可省
toolbar	`boolean \| ProTableToolbarFeatures`	`true`	true=全开 / false=不渲染 / 对象逐项开关（reload/density/columnSetting/fullscreen）
loading	`boolean`	—	加载态：刷新图标旋转
actionRef	`Ref<ProTableActions>`	—	命令式句柄：`reload()` 重新请求 / `clearSelection()` 清选
rootClassName	`string`	—	外层容器类名（区别透传 Table 的 className）

Events

继承的 Table 事件（onSortingChange / onRowSelectionChange / onExpandedChange / onColumnFiltersChange）随 Omit<TableProps,"data"> 一并可用。ProTable 自有：

事件	类型	说明
onReload	`() => void`	点工具栏刷新图标触发
onRequestError	`(error: unknown) => void`	托管 request 失败回调（默认 `console.error`）；失败时 loading 复位、保留上次数据

Slots

插槽	类型	说明
title	`ReactNode`	卡片标题（工具栏左侧）
toolbarActions	`ReactNode`	工具栏右侧自定义操作（新增按钮等），位于内置图标按钮左侧
batchActions	`(ctx: ProTableBatchCtx) => ReactNode`	渲染函数；选中行时渲染批量操作区（需 enableRowSelection）

禁忌 / 坑

托管模式（传 request）下 data/pagination/loading 三个 prop 被忽略——别两种模式混用。cursor 分页无 total/不能随机跳页，且 filters/sort/pageSize 任一变化会自动重置回第 1 页。
托管模式必须给 getRowId，否则行选择/批量在翻页后 key 不稳。
request reject 默认走 console.error 兜底（保证不 unhandled），生产里接 onRequestError 弹 toast / 上报。
batchActions 需配合 enableRowSelection 且有选中行才显示警示条。

ProTable

用法

托管模式

cursor 分页

展示模式（受控分页）

精简表

何时用

导入

Props

Events

Slots

禁忌 / 坑

相关

ProTable

用法

托管模式

cursor 分页

展示模式（受控分页）

精简表

何时用

导入

Props

Events

Slots

禁忌 / 坑

相关