antd-simple-table

🚀 antd-simple-table

• antd-simple-table
  • ✨ 特色功能
  • 📦 安装
  • 🔨 使用说明
    • 示例
    • 指定表格右上角功能键
    • 保存为 Excel 文件到本地
    • 刷新列表
    • 可复制的
    • 隐藏表格内容
    • 默认值类型
      • 1. 百分比
      • 2. 货币
      • 3. 数字
      • 4. 标签
      • 5. 开关

✨ 特色功能

• 列设置 开启 antd-simple-table 表头的列设置 ⚙️ 按钮，可以选择性的隐藏表格的某些列，还可以使用鼠标拖动切换列顺序。重要的是这些配置信息会被保存，关闭网页重新打开将会恢复之前配置。
• 下载 antd-simple-table 提供将表格数据下载为 Exel 文件到用户电脑。

📦 安装

antd-simple-table 基于 Ant Design 构建，使用时务必同时安装 antd

npm i antd-simple-table @ant-design/icons antd

or

yarn add antd-simple-table @ant-design/icons antd

🔨 使用说明

示例

  您可以参考以下 storybook 精选示例，以了解 ant-simple-table 的工作方式: https://antd-simple-table-b472afd.netlify.app

指定表格右上角功能键

  表头默认展示全部功能键，包括下载、尺寸、刷新、设置列。可设置 options 选择性隐藏功能键。

<SimpleTable
  id="user"
  name="用户"
  options={{ size: false, download: true, setting: true, reload: true }}
/>

保存为 Excel 文件到本地

  点击表头下载图标，可将表格数据以 Excel 文件存储到本地。设置 name 可指定保存到本地的文件名称。

<SimpleTable id="user" name="用户" />
 
// 保存到本地的文件名为：2020-05-31-用户

刷新列表

  onRefresh 可实现刷新操作

<SimpleTable
  id="user"
  name="用户"
  onRefresh={async () => {
    const { data } = await axios.get(`https://xxx`);
    ...
  }}
/>

可复制的

  在 columns 属性中设置 copyable 为 true 后，可将表格数据复制到剪切板。

<SimpleTable
  id="user"
  name="用户"
  columns={[
    {
      title: "日期",
      key: "day",
      dataIndex: "day",
      copyable: true,
    },
  ]}
/>

隐藏表格内容

  当表格数据内容超出列宽度，可设置 ellipsis 为 true 进行缩略展示。

<SimpleTable
  id="user"
  name="用户"
  columns={[
    {
      title: "日期",
      key: "day",
      dataIndex: "day",
      ellipsis: true,
    },
  ]}
/>

默认值类型

  SimpleTable 封装了一些常用的值类型来减少重复的 render 操作，配置 valueType 即可展示格式化响应的数据。

ValueType 目前支持的值类型如下：

类型	描述	渲染结果示例
ValueType.DATE	日期	2019-11-16
ValueType.DATE_TIME	日期和时间	2019-11-16 12:50:00
ValueType.TIME	时间	12:50:00
ValueType.INDEX	行号	-
ValueType.PERCENT	百分号	23%
ValueType.NUMBER	数字	23.23
ValueType.MONEY	货币	¥10,000.26、$100、€100
ValueType.TAG	标签	-
ValueType.SWITCH	开关	-

1. 百分比

valueType 传入类型字符串

import { ValueType } from "antd-simple-table";
 
<SimpleTable
  id="user"
  name="用户"
  columns={[
    {
      title: "百分比",
      key: "percent",
      dataIndex: "percent",
      valueType: ValueType.PERCENT,
    },
  ]}
/>;
 
// 最大保留小数点后 20 位

valueType 传入类型配置对象

import { ValueType } from "antd-simple-table";
<SimpleTable
  id="user"
  name="用户"
  columns={[
    {
      title: "百分比",
      key: "percent",
      dataIndex: "percent",
      valueType: {
        type: ValueType.PERCENT,
        showSymbol: false,
        useGrouping: false,
        precision: 2,
      },
    },
  ]}
/>;

valueType 参数	参数类型	描述	示例
type	string	类型	ValueType.PERCENT
showSymbol	boolean	是否显示正负号	+23% (-23%)
useGrouping	boolean	是否显示分隔符	10,000.00%
precision	number	保留小数点后位数，默认两位	23.00%

2. 货币

配置为货币类型，经过 antd-simple-table 内部 format 后自动转换为您想要的货币格式。

valueType 传入对象

import { ValueType } from "antd-simple-table";
const column = {
  title: "货币",
  key: "money",
  dataIndex: "money",
  valueType: {
    type: ValueType.MONEY,
    currency: "USD"
    useGrouping: false,
  },
};

valueType 参数	参数类型	描述	示例
type	string	类型	ValueType.MONEY
currency	string ｜（value:any, record:T, index:number）=> string	货币代码	"USD"
useGrouping	boolean	是否显示分隔符	$10,000,000

⚠️ 注意：若 dataSource 中有指定货币符号，currency 可以传入函数，返回 record 中的货币符号。此场景适用于货币符号由后端数据决定。

currency 输出参数说明

参数	参数类型	描述	示例
value	any	-	-
record	T	该行所有属性	-
index	number	该行在表格中的序号	-

import { ValueType } from "antd-simple-table";
const column = {
  title: "货币",
  key: "money",
  dataIndex: "money",
  valueType: {
    type: ValueType.MONEY,
    currency: (value, record, index) => record.currencyCode
    useGrouping: false,
  },
};

3. 数字

valueType 传入字符串

import { ValueType } from "antd-simple-table";
const column = {
  title: "数字",
  key: "number",
  dataIndex: "number",
  valueType: ValueType.NUMBER,
};
 
// 最大保留小数点后 20 位，不展示分隔符

valueType 传入对象

import { ValueType } from "antd-simple-table";
const column = {
  title: "数字",
  key: "number",
  dataIndex: "number",
  valueType: {
    type: ValueType.NUMBER,
    useGrouping: true,
    precision: 3,
  },
};
 
// 保留小数点后 3 位，使用分隔符。

valueType 参数	参数类型	描述	示例
type	string	类型	ValueType.NUMBER
precision	number	保留小数点后位数，默认 3 位	23.000
useGrouping	boolean	是否显示分隔符	10,000,000

4. 标签

⚠️ 注意！ dataSource 中的 tag 标签必须为数组才能正常渲染。

valueType 传入字符串

import { ValueType } from "antd-simple-table";
const column = {
  title: "标签",
  key: "tags",
  dataIndex: "tags",
  valueType: ValueType.TAG,
};

如果你想给表格中的标签绑定点击事件，可以以对象形式传入 onClick 属性。

valueType 传入对象

import { ValueType } from "antd-simple-table";
const column = {
  title: "数字",
  key: "number",
  dataIndex: "number",
  valueType: {
    type: ValueType.TAG,
    onClick: (tag, tags, record, index) => {
      console.log(tag, tags, record, index);
    },
  },
};

onClick 输出参数说明

参数	参数类型	描述	示例
tag	[tag: string, index: number]	被点击的 tag， tag[0] 为 tag 文本，tag[1] 为在 tags 数组中的索引	["Tony"， 1]
tags	any[]	该行所有 tag	["2020-6-1", "Tom", "管理员"]
record	T	该行所有属性	-
index	number	该行在表格中的序号	-

5. 开关

valueType 传入对象

import { ValueType } from "antd-simple-table";
const column = {
  title: "开关",
  key: "enable",
  dataIndex: "enable",
  valueType: {
    type: ValueType.SWITCH,
    loading: loading,
    disabled: false,
    size: "small"
    onChange: (value, oldValue, record, index) => {
      console.log(value, oldValue, record, index);
    },
  },
};

valueType 参数	参数类型	描述	示例
type	string	类型	ValueType.SWITCH
loading	boolean	是否正在加载	-
size	small	default	按钮大小
disabled	boolean	是否禁用开关	-
onChange	(value, oldValue, record, index) => void	拨动开关的事件回调	-

onChange 输出参数说明

参数	参数类型	描述	示例
value	boolean	当前开关状态	-
oldValue	any	原始数据	-
record	T	该行所有属性	-
index	number	该行在表格中的序号	-