# antd-simple-table > [![Build Status](https://img.shields.io/github/workflow/status/shadowolfapp/antd-simple-table/Release)](https://github.com/shadowolfapp/antd-simple-table/actions?query=workflow%3A%22Release%22) [![Coverage Status](https://img.shields.io/codecov/c/github/s Latest version **1.4.11** (published 2020-11-12) · MIT license · 0 weekly downloads ## Install ```sh npm install antd-simple-table pnpm add antd-simple-table yarn add antd-simple-table bun add antd-simple-table ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned. ## Facts | | | |---|---| | Version | 1.4.11 | | Published | 2020-11-12 | | First published | 2020-05-14 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 13 | | Unpacked size | 116.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 5 | | Maintainers | xudong | ## Links - npm: https://www.npmjs.com/package/antd-simple-table - Repository: https://github.com/shadowolfapp/antd-simple-table - Homepage: https://github.com/shadowolfapp/antd-simple-table#readme - Issues: https://github.com/shadowolfapp/antd-simple-table/issues - npm.io page: https://npm.io/package/antd-simple-table ## Dependencies (13) - [antd](https://npm.io/package/antd.md) ^4.5.2 - [lodash](https://npm.io/package/lodash.md) ^4.17.15 - [moment](https://npm.io/package/moment.md) ^2.26.0 - [dnd-core](https://npm.io/package/dnd-core.md) ^10.0.2 - [papaparse](https://npm.io/package/papaparse.md) ^5.2.0 - [react-dnd](https://npm.io/package/react-dnd.md) ^10.0.2 - [react-use](https://npm.io/package/react-use.md) ^15.1.0 - [file-saver](https://npm.io/package/file-saver.md) ^2.0.2 - [react-resizable](https://npm.io/package/react-resizable.md) ^1.10.1 - [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^4.1.0 - [styled-components](https://npm.io/package/styled-components.md) ^5.1.0 - [immutability-helper](https://npm.io/package/immutability-helper.md) ^3.0.2 - [react-dnd-html5-backend](https://npm.io/package/react-dnd-html5-backend.md) ^10.0.2 ## Recent versions - 1.4.11 (latest) — 2020-11-12 - 1.4.10 — 2020-11-05 - 1.4.9 — 2020-11-04 - 1.4.8 — 2020-10-15 - 1.4.7 — 2020-10-13 - 1.4.6 — 2020-08-04 - 1.4.5 — 2020-07-03 - 1.4.4 — 2020-07-02 - 1.4.3 — 2020-07-01 - 1.4.2 — 2020-06-28 - 1.4.1 — 2020-06-24 - 1.4.0 — 2020-06-19 - 1.3.0 — 2020-06-15 - 1.2.1 — 2020-06-04 - 1.2.0 — 2020-06-01 - … 8 more at https://npm.io/package/antd-simple-table/versions ## README # antd-simple-table [![Build Status](https://img.shields.io/github/workflow/status/shadowolfapp/antd-simple-table/Release)](https://github.com/shadowolfapp/antd-simple-table/actions?query=workflow%3A%22Release%22) [![Coverage Status](https://img.shields.io/codecov/c/github/shadowolfapp/antd-simple-table)](https://codecov.io/github/shadowolfapp/antd-simple-table) [![License](https://img.shields.io/npm/l/antd-simple-table)](https://www.npmjs.com/package/antd-simple-table) [![Version](https://img.shields.io/npm/v/antd-simple-table)](https://www.npmjs.com/package/antd-simple-table) [![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![Semantic Release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) ![Dependabot](https://badgen.net/dependabot/thepracticaldev/dev.to?icon=dependabot)

🚀 antd-simple-table

- [antd-simple-table](#antd-simple-table) - [✨ 特色功能](#-特色功能) - [📦 安装](#-安装) - [🔨 使用说明](#-使用说明) - [示例](#示例) - [指定表格右上角功能键](#指定表格右上角功能键) - [保存为 Excel 文件到本地](#保存为-excel-文件到本地) - [刷新列表](#刷新列表) - [可复制的](#可复制的) - [隐藏表格内容](#隐藏表格内容) - [默认值类型](#默认值类型) - [1. 百分比](#1-百分比) - [2. 货币](#2-货币) - [3. 数字](#3-数字) - [4. 标签](#4-标签) - [5. 开关](#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 的工作方式: ### 指定表格右上角功能键   表头默认展示全部功能键，包括下载、尺寸、刷新、设置列。可设置 **options** 选择性隐藏功能键。 ```javascript ```
### 保存为 Excel 文件到本地   点击表头下载图标，可将表格数据以 **Excel** 文件存储到本地。设置 **name** 可指定保存到本地的文件名称。 ```javascript // 保存到本地的文件名为：2020-05-31-用户 ```
### 刷新列表   **onRefresh** 可实现刷新操作 ```javascript { const { data } = await axios.get(`https://xxx`); ... }} /> ```
### 可复制的   在 **columns** 属性中设置 **copyable** 为 true 后，可将表格数据复制到剪切板。 ```javascript ```
### 隐藏表格内容   当表格数据内容超出列宽度，可设置 **ellipsis** 为 true 进行缩略展示。 ```javascript ```
### 默认值类型   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** 传入类型字符串 ```javascript import { ValueType } from "antd-simple-table"; ; // 最大保留小数点后 20 位 ``` **valueType** 传入类型配置对象 ```javascript import { ValueType } from "antd-simple-table"; ; ``` | valueType 参数 | 参数类型 | 描述 | 示例 | | -------------- | -------- | -------------------------- | ----------------- | | type | string | 类型 | ValueType.PERCENT | | showSymbol | boolean | 是否显示正负号 | +23% (-23%) | | useGrouping | boolean | 是否显示分隔符 | 10,000.00% | | precision | number | 保留小数点后位数，默认两位 | 23.00% |
#### 2. 货币 配置为货币类型，经过 antd-simple-table 内部 format 后自动转换为您想要的货币格式。 **valueType** 传入对象 ```javascript 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 | 该行在表格中的序号 | - |
```javascript 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** 传入字符串 ```javascript import { ValueType } from "antd-simple-table"; const column = { title: "数字", key: "number", dataIndex: "number", valueType: ValueType.NUMBER, }; // 最大保留小数点后 20 位，不展示分隔符 ``` **valueType** 传入对象 ```javascript 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** 传入字符串 ```javascript import { ValueType } from "antd-simple-table"; const column = { title: "标签", key: "tags", dataIndex: "tags", valueType: ValueType.TAG, }; ```
如果你想给表格中的标签绑定点击事件，可以以对象形式传入 onClick 属性。
**valueType** 传入对象 ```javascript 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** 传入对象 ```javascript 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 | 该行在表格中的序号 | - |

--- _Source: https://npm.io/package/antd-simple-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._