Table

Table dient dazu: listen anzeigen, Zeilen auswählen und auf Einstellungsseiten per Drag sortieren.

Grundlegende Verwendung

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

ParameterTypBeschreibung
rowKey`string(record, index) => React.Key`
showIndexbooleanZeilennummer vor der Auswahl anzeigen
isDraggablebooleanOb Drag-Sortierung aktiviert ist
onSortEnd`(from, to) => voidPromise`
showSortHandlebooleanOb der Standard-Drag-Handle angezeigt wird
sortHandleColumnWidthnumberBreite der automatischen Drag-Handle-Spalte

Zusätzliche Exporte

BeschreibungBeschreibung
DEFAULT_PAGE_SIZE50
PAGE_SIZE_OPTIONS[5, 10, 20, 50, 100, 200]