• 简体中文

      • Table

      Table 是 @nocobase/client-v2 提供的设置页表格组件，基于 Antd Table。它额外处理了两类常见交互：

      • 行号和 checkbox 在同一个选择列里切换
      • 行拖拽排序

      基本用法

      		NameStatus
      1Email providerEnabled
      2SMS providerDisabled
      3WebhookEnabled
      import React, { useState } from 'react';
import { Table } from '@nocobase/client-v2';
import type { ColumnsType } from 'antd/es/table';

interface Row {
  id: number;
  name: string;
  status: string;
}

const columns: ColumnsType<Row> = [
  { title: 'Name', dataIndex: 'name' },
  { title: 'Status', dataIndex: 'status' },
];

const dataSource: Row[] = [
  { id: 1, name: 'Email provider', status: 'Enabled' },
  { id: 2, name: 'SMS provider', status: 'Disabled' },
  { id: 3, name: 'Webhook', status: 'Enabled' },
];

export default function TableDemo() {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  return (
    <Table<Row>
      rowKey="id"
      columns={columns}
      dataSource={dataSource}
      rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys }}
      pagination={false}
    />
  );
}

      拖拽排序

      传 isDraggable 后，表格会显示拖拽手柄。拖拽结束时触发 onSortEnd(from, to)，组件不会直接修改 dataSource，需要你在回调里持久化排序并刷新列表。

      import { Table } from '@nocobase/client-v2';

<Table
  rowKey="id"
  columns={columns}
  dataSource={records}
  isDraggable
  onSortEnd={async (from, to) => {
    await ctx.api.resource('items').move({
      sourceId: from.id,
      targetId: to.id,
    });
    refresh();
  }}
/>;

      API

      参数类型默认值说明
      rowKeystring | (record, index) => React.Key-必填，行身份、拖拽和选择都依赖它
      showIndexbooleantrue有 rowSelection 时，默认显示行号，hover 或选中时显示 checkbox
      isDraggablebooleanfalse是否开启拖拽排序
      onSortEnd(from, to) => void | Promise<void>-拖拽结束回调
      showSortHandlebooleantrue是否显示默认拖拽手柄
      sortHandleColumnWidthnumber40没有 rowSelection 时，自动插入手柄列的宽度

      其他参数继承 Antd Table。

      附带导出

      名称说明
      DEFAULT_PAGE_SIZE默认分页大小，值为 50
      PAGE_SIZE_OPTIONS默认分页选项，值为 [5, 10, 20, 50, 100, 200]

      相关链接