Table

Table dùng để hiển thị danh sách, chọn hàng và sắp xếp kéo thả trong trang thiết lập.

Cách dùng cơ bản

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

Tham sốKiểuMô tả
rowKey`string(record, index) => React.Key`
showIndexbooleanHiển thị chỉ số hàng trước khi chọn
isDraggablebooleanCó bật sắp xếp kéo thả hay không
onSortEnd`(from, to) => voidPromise`
showSortHandlebooleanCó hiển thị tay nắm kéo mặc định hay không
sortHandleColumnWidthnumberĐộ rộng cột tay nắm kéo tự động

Export đi kèm

Mô tảMô tả
DEFAULT_PAGE_SIZE50
PAGE_SIZE_OPTIONS[5, 10, 20, 50, 100, 200]

Liên kết liên quan