GridTable

类型table组件，不同的是布局使用grid而不是table

示例

点我查看代码

import { GridTable } from "@wenonly/react-components";
import { Card } from "antd";
import React from "react";
import { useMemo, useState } from "react";

const data = Array(100)
  .fill(1)
  .map((_, index) => ({
    id: index,
    name: `姓名${index}`,
    age: index,
  }));

const RCGridTable: React.FunctionComponent = () => {
  const [pageSize, setPageSize] = useState(6);
  const [page, setPage] = useState(1);

  const dataSource = useMemo(() => {
    return data.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
  }, [page]);

  return (
    <GridTable
      rowKey="id"
      gridGap={20}
      dataSource={dataSource}
      pagination={{
        pageSize: pageSize,
        current: page,
        total: data.length,
        onChange(page, pageSize) {
          setPage(page);
          setPageSize(pageSize);
        },
      }}
    >
      {(r) => (
        <Card title={r.name}>
          <div>姓名：{r.name}</div>
          <div>年龄：{r.age}</div>
        </Card>
      )}
    </GridTable>
  );
};

export default RCGridTable;

参数

key	类型	描述
loading	boolean | undefined	是否加载中
dataSource	RecordType[] | undefined	数据源
gridGap	number | undefined	网格间距
gridItemMinWidth	number | undefined	网格最小宽度
pagination	false | PaginationProps | undefined	分页
cardStyle	React.CSSProperties | undefined	卡片样式
style	React.CSSProperties | undefined	样式
rowKey	string | undefined	唯一标识
children	((r: RecordType) => React.ReactNode) | undefined	子组件