ProTable 数据表格

TIP

• ProTable 基于 Shineout Table 是一个 Schema 驱动的配置化表格组件，传入 columns 定义列、request 提供数据源，即可渲染带分页、工具栏、行操作的完整数据表格。

// 设置全局分野大小
import { setConfig } from "@lite-code/pro-shineout";

setConfig({
  defaultPageSize: 10,
});

基本使用

数据源放在 request 方法中返回

tsx

import { ProTable } from "@lite-code/pro-shineout";
import axios from "axios";

export default () => {
  return (
    <ProTable
      {...{
        title: "用户列表",
        width: 1200,
        height: 430,
        bordered: true,
        fixed: "both",
        columns: [
          {
            title: "ID",
            dataIndex: "id",
            width: 80,
            sorter: "id",
          },
          {
            title: "姓名",
            dataIndex: "username",
            render(username, _record, _index) {
              return username;
            },
          },
          {
            title: "性别",
            dataIndex: "sex",
            enums: [
              {
                value: 0,
                label: "男",
                color: "success",
              },
              {
                value: 1,
                label: "女",
                color: "danger",
              },
            ],
          },
          {
            title: "城市",
            dataIndex: "city",
            tooltips: "描述信息",
          },
          {
            title: "签名",
            dataIndex: "sign",
          },
          {
            title: "登录次数",
            dataIndex: "logins",
            useThousandth: 0,
            sorter: "logins",
          },
          {
            title: "分类",
            dataIndex: "classify",
          },
          {
            title: "分数",
            dataIndex: "score",
            useThousandth: 2,
          },
          {
            title: "分数占比",
            dataIndex: "score",
            usePercentage: 2,
          },
        ],
        request: async (params, sorter = {}) => {
          console.log("request =>", params, sorter);
          const { data } = await axios.get("http://111.229.112.107:3003/mock/table1", {
            params,
          });
          return data;
        },
      }}
    />
  );
};

配置工具栏以及操作列

设置 tools 和 rowOperations 来工具栏和操作栏

tsx

import { ProTable } from '@lite-code/pro-shineout'
import axios from "axios";

export default () => {
  return (
    <ProTable
      {...{
        title: '用户列表',
        width: 1200,
        height: 400,
        bordered: true,
        autoNo: true,
        fixed: 'both',
        size: 'small',
        tools: [
          {
            type: 'primary',
            label: '新增用户',
            icon: 'plus',
            disabled: ({ data }) => data?.length > 5,
            onClick(Api) {
              console.log(Api)
            },
          },
        ],
        columns: [
          {
            title: 'ID',
            dataIndex: 'id',
            width: 80,
            sorter: 'id',
          },
          {
            title: '姓名',
            dataIndex: 'username',
          },
          {
            title: '性别',
            dataIndex: 'sex',
            enums: [
              {
                value: 0,
                label: '男',
                color: 'success',
              },
              {
                value: 1,
                label: '女',
                color: 'danger',
              },
            ],
          },
          {
            title: '城市',
            dataIndex: 'city',
            tooltips: '描述信息',
          },
          {
            title: '签名',
            dataIndex: 'sign',
          },
          {
            title: '登录次数',
            dataIndex: 'logins',
            useThousandth: 0,
            sorter: 'logins',
          },
          {
            title: '分类',
            dataIndex: 'classify',
          },
          {
            title: '分数',
            dataIndex: 'score',
          },
        ],
        rowOperations: {
          width: 180,
          maxCount: 2, // 最多显示2个操作按钮
          menus: [
            {
              label: '编辑',
              async onClick({ record }) {
                await new Promise(res => setTimeout(res, 1000)); // loading 1s
                console.log(record)
              },
              disabled({ record }) {
                return record.id === 1001
              },
              visible({ record }) {
                return record.id !== 1002
              },
            },
            {
              label: '查看',
              onClick({ record }) {
                console.log(record)
              },
            },
            {
              label: '删除',
              confirm: ({ username }) => `确定删除 《${username}》吗?`,
              async onClick({ search, record }) {
                console.log(record)
                await new Promise((res) => setTimeout(res, 800))
                await search?.()
              },
            },
            {
              label: '更多操作1',
              onClick({ record }) {
                console.log(record)
              },
            },
            {
              label: '更多操作2',
              onClick({ record }) {
                console.log(record)
              },
            },
          ],
        },
        request: async (params, sorter = {}) => {
          console.log('request =>', params, sorter)
          const { data } = await axios.get("http://111.229.112.107:3003/mock/table1", {
            params,
          });
          return data;
        },
      }}
    />
  )
}

配置本地持久化列设置

设置 filterKey 持久化存储列过滤设置

tsx

import { ProTable } from '@lite-code/pro-shineout'
import { Message } from 'shineout'
import axios from "axios";

export default () => {
  return (
    <ProTable
      {...{
        title: '用户列表',
        width: 1200,
        height: 400,
        filterKey: '/filters/user-list', // 开启本地缓存
        columnsCacheDragable: false, // 有分组关闭可拖拽
        bordered: true,
        size: 'small',
        autoNo: true,
        fixed: 'both',
        columns: [
          {
            title: 'ID',
            dataIndex: 'id',
            width: 80,
            sorter: 'id',
            disabledChecked: true,
          },
          {
            title: '姓名',
            dataIndex: 'username',
            disabledChecked: true,
            group: "基本信息",
          },
          {
            title: '性别',
            dataIndex: 'sex',
            group: "基本信息",
            enums: [
              {
                value: 0,
                label: '男',
                color: 'success',
              },
              {
                value: 1,
                label: '女',
                color: 'danger',
              },
            ],
          },
          {
            title: '城市',
            dataIndex: 'city',
            tooltips: '描述信息',
          },
          {
            title: '签名',
            dataIndex: 'sign',
          },
          {
            title: '登录次数',
            dataIndex: 'logins',
            useThousandth: 0,
            sorter: 'logins',
          },
          {
            title: '分类',
            dataIndex: 'classify',
          },
          {
            title: '分数',
            dataIndex: 'score',
            checked: false,
          },
        ],
        rowOperations: {
          width: 180,
          menus: [
            {
              label: '编辑',
              onClick({ record }) {
                console.log(record)
              },
              disabled({ index }) {
                return index === 0
              },
            },
            {
              label: '查看',
              onClick({ record }) {
                console.log(record)
              },
            },
            {
              label: '删除',
              confirm: ({ username }) => `确定删除 《${username}》吗?`,
              async onClick({ search, record }) {
                await new Promise((res) => setTimeout(res, 800))
                Message.success('已删除!')
                await search?.()
                console.log(record)
              },
            },
          ],
        },
        request: async (params, sorter = {}) => {
          console.log('request =>', params, sorter)
          const { data } = await axios.get("http://111.229.112.107:3003/mock/table1", {
            params,
          });
          return data;
        },
      }}
    />
  )
}

配置多 tabs

配置 tabs 属性控制多标签

tsx

import { ProTable } from '@lite-code/pro-shineout'

export default () => {
  return (
    <ProTable
      {...{
        width: 1000,
        height: 430,
        bordered: true,
        tabs: [
          {
            label: '业务',
            value: 1,
          },
          {
            label: '管理员',
            value: 2,
          },
        ],
        tools: [
          {
            label: "添加用户",
            type: "primary",
            visible({ tabKey }) {
              return tabKey === 1;
            },
          },
          {
            label: "添加管理员",
            type: "primary",
            mode: 'outline',
            visible({ tabKey }) {
              return tabKey === 2;
            },
          },
        ],
        columns: [
          {
            title: '列1',
            dataIndex: '1',
            visibleTab: 1, // 仅在第一个 tab 显示
          },
          {
            title: '列2',
            dataIndex: '2',
            visibleTab: 1, // 仅在第一个 tab 显示
          },
          {
            title: '列3',
            dataIndex: '3',
            visibleTab: 2, // 仅在第二个 tab 显示
          },
          {
            title: '列4',
            dataIndex: '4',
            visibleTab: 2, // 仅在第二个 tab 显示
          },
          {
            title: '列5',
            dataIndex: '5',
          },
          {
            title: '列6',
            dataIndex: '6',
          },
          {
            title: '列7',
            dataIndex: '7',
          },
          {
            title: '列8',
            dataIndex: '8',
          },
        ],
        request: async (_, __, activeTabKey) => {
          await new Promise((res) => setTimeout(res, 1000))
          return {
            list:
              activeTabKey === 1
                ? new Array(10).fill('').map(() => ({
                    1: 'tab1',
                    2: 'tab1',
                    5: 'tab1',
                    6: 'tab1',
                    7: 'tab1',
                    8: 'tab1',
                  }))
                : new Array(10).fill('').map(() => ({
                    3: 'tab2',
                    4: 'tab2',
                    5: 'tab2',
                    6: 'tab2',
                    7: 'tab2',
                    8: 'tab2',
                  })),
            count: 10,
          }
        },
      }}
    />
  )
}

静态数据过滤

对列设置 staticFilter 开启静态过滤

tsx

import { ProTable } from '@lite-code/pro-shineout'

const randomData = (size = 80) => {
  const name = ["Ephraim", "Osvaldo", "Darrick", "Lashanda", "Jovanny"];
  const age = ["18", "19", "20", "21", "22"];
  const date = [
    "2025-03-01",
    "2025-03-02",
    "2025-04-01",
    "2025-04-02",
    "2025-05-01",
  ];
  const salary = ["$1000", "$2000", "$3000", "$4000", "$5000"];
  const company = ["Googlek2k3kkjjkwewwekklksdkksdklklskdl,Googlek2k3kkjjkwewwekklksdkksdklklskdl", "Facebook", "Amazon", "Apple", "Microsoft"];
  return new Array(size).fill("").map((_, index) => {
    const idx1 = Math.floor(Math.random() * 5);
    const idx2 = Math.floor(Math.random() * 5);
    return {
      id: index + 1,
      name: name[idx1],
      age: age[idx1],
      date: date[idx2],
      salary: salary[idx2],
      company: company[idx2],
    };
  });
};

export default () => {
  return (
    <ProTable
      {...{
        width: 1000,
        height: 430,
        bordered: true,
        data: randomData(72).sort((a, b) => (a.date > b.date ? 1 : -1)),
        title: '静态数据列表',
        columns: [
          {
            title: 'Name',
            dataIndex: 'name',
            width: 80,
          },
          {
            title: 'Age',
            dataIndex: 'age',
            width: 80,
            staticFilter: true,
          },
          {
            title: 'Salary',
            dataIndex: 'salary',
            width: 80,
          },
          {
            title: 'Company',
            dataIndex: 'company',
            width: 80,
            staticFilter: true,
            ellipsisRows: 2, // 超过2行开始...
          },
          {
            title: 'Date',
            dataIndex: 'date',
            width: 80,
            staticFilter: true,
          },
        ],
      }}
    />
  )
}

API

ProTableProps 继承 Table 额外的属性描述

属性名	描述	类型	默认值	是否必需
filterKey	配置列过滤唯一标识	string	无	否
columns	列信息	ProTableColumnProps[]	无	否
request	统一数据请求	(params: any, sort: any) => Promise<{count: number;list: any[]}>	无	否
tableRef	table 实例	RefObject<ProTableRef>	无	否
tools	工具配置	ToolProps[]	无	否
rowOperations	操作列配置	{width: string ｜ number; menus: MenuProps[]}	无	否
autoNo	展示序号	boolean	无	否
useRefresh	是否开启刷新	boolean	true	否
title	标题	ReactNode	无	否

ProTableColumnProps 继承 ColumnItem 额外的属性描述

属性名	描述	类型	默认值	是否必需
tooltips	提示信息	ReactNode	无	否
checked	是否默认过滤改列	boolean	无	否
disabledChecked	是否允许过滤	boolean	无	否
enums	枚举	any	无	否
dateFormat	日期转换	string	无	否
useThousandth	千分位	number	无	否
staticFilter	开启静态过滤	boolean	true	否
staticFilterOptions	自定义过滤数据	any	无	否

ProTableRef

属性名	描述	类型	默认值	是否必需
refresh	刷新	Function	无	否
search	查询	Function	无	否
resetFilter	重置过滤	Function	无	否
data	数据源	any	无	否

MenuProps 继承 ProButton 额外的属性描述

属性名	描述	类型	默认值	是否必需
label	标签名	string	无	否
confirm	二次确认	string ｜ ((record: any) => string)	无	否
disabled	是否禁用	boolean ｜ (({ record: any; index: number }) => boolean)	无	否
visible	是否展示	boolean ｜ (({ record: any; index: number }) => boolean)	无	否
onClick	点击	({record: any; refresh?: Function; search?: Function; params: any }) => void	无	否

ToolProps 继承 ProButton 额外的属性描述

属性名	描述	类型	默认值	是否必需
icon	图标	string	无	否
label	标签名	string	无	否
onClick	点击	({refresh?: Function; search?: Function; params: any }) => void	无	否
disabled	是否禁用	({ data, tabKey }) => boolean	无	否