Table

Table используется, чтобы показывать списки, выбирать строки и сортировать перетаскиванием на страницах настроек.

Базовое использование

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}
    />
  );
}

API

ПараметрТипОписание
rowKey`string(record, index) => React.Key`
showIndexbooleanПоказывать индекс строки перед выбором
isDraggablebooleanВключена ли сортировка перетаскиванием
onSortEnd`(from, to) => voidPromise`
showSortHandlebooleanПоказывать ли стандартную ручку перетаскивания
sortHandleColumnWidthnumberШирина автоматической колонки ручки перетаскивания

Дополнительные экспорты

ОписаниеОписание
DEFAULT_PAGE_SIZE50
PAGE_SIZE_OPTIONS[5, 10, 20, 50, 100, 200]

Связанные ссылки