@cloudeasy/react-table

基于 VTable 的 React 表格组件，提供高性能的数据展示能力。

安装

npm install @cloudeasy/react-table
# 或
pnpm add @cloudeasy/react-table

基础用法

import { Table } from '@cloudeasy/react-table';
import type { ColumnType } from '@cloudeasy/react-table';

const columns: ColumnType[] = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
];

const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];

function App() {
  return (
    <Table
      columns={columns}
      dataSource={dataSource}
    />
  );
}

API

Table Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | columns | 表格列的配置描述 | ColumnType[] | - | | dataSource | 数据数组 | object[] | - | | rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string \| (record) => string | 'key' | | size | 表格大小 | 'small' \| 'middle' \| 'large' | 'middle' | | bordered | 是否展示外边框和列边框 | boolean | false | | showHeader | 是否显示表头 | boolean | true | | loading | 页面是否加载中 | boolean | false | | pagination | 分页器，参考配置项或 pagination 文档 | object \| false | - | | scroll | 表格是否可滚动，也可以指定滚动区域的宽、高 | object | - | | className | 表格类名 | string | - | | style | 表格样式 | React.CSSProperties | - | | onRow | 设置行属性 | (record, index) => object | - | | onChange | 分页、排序、筛选变化时触发 | (pagination, filters, sorter) => void | - |

Column

列描述数据对象，是 columns 中的一项。

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | title | 列头显示文字 | string | - | | dataIndex | 列数据在数据项中对应的路径 | string | - | | key | React 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性 | string | - | | width | 列宽度 | number | - | | minWidth | 最小列宽 | number | - | | maxWidth | 最大列宽 | number | - | | align | 设置列的对齐方式 | 'left' \| 'right' \| 'center' | 'left' | | fixed | 列是否固定 | 'left' \| 'right' \| boolean | - | | sorter | 表头是否显示下一次排序的 tooltip 提示 | boolean \| function | - | | render | 生成复杂数据的渲染函数 | (value, record, index) => ReactNode | - |

高级用法

自定义渲染

const columns: ColumnType[] = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <span>
        <a>编辑</a>
        <a style={{ marginLeft: 16 }}>删除</a>
      </span>
    ),
  },
];

分页

const [pagination, setPagination] = useState({
  current: 1,
  pageSize: 10,
  total: 100,
});

<Table
  columns={columns}
  dataSource={dataSource}
  pagination={{
    ...pagination,
    onChange: (page, pageSize) => {
      setPagination({ ...pagination, current: page, pageSize });
    },
  }}
/>

行选择

const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);

const rowSelection = {
  selectedRowKeys,
  onChange: (newSelectedRowKeys: string[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  },
};

<Table
  columns={columns}
  dataSource={dataSource}
  rowSelection={rowSelection}
/>

滚动

<Table
  columns={columns}
  dataSource={dataSource}
  scroll={{ x: 1500, y: 300 }}
/>

TypeScript

import type { ColumnType, TableProps } from '@cloudeasy/react-table';

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
}

const columns: ColumnType<DataType>[] = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
];

const MyTable: React.FC<TableProps<DataType>> = (props) => {
  return <Table<DataType> {...props} />;
};