Table

Table sert à afficher des listes, sélectionner des lignes et trier par glisser-déposer dans les pages de configuration.

Utilisation de base

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

ParamètreTypeDescription
rowKey`string(record, index) => React.Key`
showIndexbooleanAfficher l’index de ligne avant la sélection
isDraggablebooleanIndique si le tri par glisser-déposer est activé
onSortEnd`(from, to) => voidPromise`
showSortHandlebooleanIndique si la poignée par défaut est affichée
sortHandleColumnWidthnumberLargeur de la colonne automatique de poignée

Exports associés

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

Liens associés