# abc-standard-table

> 展示各种列表型的排行；提供四种模式，支持标题可配置、最大显示条数设置、子项模板渲染自定义；

Latest version **1.1.11** (published 2018-12-28) · 0 weekly downloads

## Install

```sh
npm install abc-standard-table
pnpm add abc-standard-table
yarn add abc-standard-table
bun add abc-standard-table
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.11 |
| Published | 2018-12-28 |
| First published | 2018-12-25 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 64 |
| Unpacked size | 11.8 MB |
| Known vulnerabilities | 0 (+37 in 7 direct dependencies) |
| Install scripts | no |
| Author | ywwu |
| Maintainers | ywwu.abcft |

## Links

- npm: https://www.npmjs.com/package/abc-standard-table
- npm.io page: https://npm.io/package/abc-standard-table

## Dependencies (64)

- [raf](https://npm.io/package/raf.md) 3.4.0
- [antd](https://npm.io/package/antd.md) ^3.6.6
- [jest](https://npm.io/package/jest.md) 20.0.4
- [mobx](https://npm.io/package/mobx.md) ^4.1.0
- [axios](https://npm.io/package/axios.md) ^0.18.0
- [chalk](https://npm.io/package/chalk.md) 1.1.3
- [react](https://npm.io/package/react.md) ^16.6.0
- [redux](https://npm.io/package/redux.md) ^3.7.2
- [dotenv](https://npm.io/package/dotenv.md) 4.0.0
- [eslint](https://npm.io/package/eslint.md) 4.10.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.10
- [moment](https://npm.io/package/moment.md) ^2.20.1
- [promise](https://npm.io/package/promise.md) 8.0.1
- [webpack](https://npm.io/package/webpack.md) 3.8.1
- [fs-extra](https://npm.io/package/fs-extra.md) 3.0.1
- [js-cookie](https://npm.io/package/js-cookie.md) ^2.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.6.0
- [babel-core](https://npm.io/package/babel-core.md) 6.26.0
- [babel-jest](https://npm.io/package/babel-jest.md) 20.0.3
- [css-loader](https://npm.io/package/css-loader.md) 0.28.7
- [excel-xlsx](https://npm.io/package/excel-xlsx.md) ^1.0.1
- [highcharts](https://npm.io/package/highcharts.md) ^6.1.0
- [mobx-react](https://npm.io/package/mobx-react.md) ^5.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [remarkable](https://npm.io/package/remarkable.md) ^1.7.1
- [url-loader](https://npm.io/package/url-loader.md) 0.6.2
- [better-xlsx](https://npm.io/package/better-xlsx.md) ^0.6.0
- [file-loader](https://npm.io/package/file-loader.md) 1.1.5
- [react-color](https://npm.io/package/react-color.md) ^2.14.0
- [react-redux](https://npm.io/package/react-redux.md) ^5.0.6
- [sass-loader](https://npm.io/package/sass-loader.md) ^6.0.7
- [autoprefixer](https://npm.io/package/autoprefixer.md) 7.1.6
- [babel-eslint](https://npm.io/package/babel-eslint.md) 7.2.3
- [babel-loader](https://npm.io/package/babel-loader.md) 7.1.2
- [highlight.js](https://npm.io/package/highlight.js.md) ^9.13.1
- [style-loader](https://npm.io/package/style-loader.md) 0.19.0
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) 2.0.3
- [babel-runtime](https://npm.io/package/babel-runtime.md) 6.26.0
- [eslint-loader](https://npm.io/package/eslint-loader.md) 1.9.0
- [object-assign](https://npm.io/package/object-assign.md) 4.1.1
- [webpack-merge](https://npm.io/package/webpack-merge.md) ^4.1.2
- [postcss-loader](https://npm.io/package/postcss-loader.md) 2.0.8
- [react-loadable](https://npm.io/package/react-loadable.md) ^5.5.0
- [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^4.2.1
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.2.2
- [react-clipboard.js](https://npm.io/package/react-clipboard.js.md) ^2.0.0
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 2.9.4
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) 7.4.0
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 2.29.0
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) 2.8.0
- [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^3.1.0
- [eslint-plugin-flowtype](https://npm.io/package/eslint-plugin-flowtype.md) 2.39.1
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) 5.1.1
- [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) 3.2.0
- [eslint-config-react-app](https://npm.io/package/eslint-config-react-app.md) ^2.0.1
- [react-copy-to-clipboard](https://npm.io/package/react-copy-to-clipboard.md) ^5.0.1
- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^2.13.1
- [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) 1.3.2
- [compression-webpack-plugin](https://npm.io/package/compression-webpack-plugin.md) ^1.1.12
- [sw-precache-webpack-plugin](https://npm.io/package/sw-precache-webpack-plugin.md) 0.11.4
- [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) 3.0.2
- [babel-preset-react-native-stage-0](https://npm.io/package/babel-preset-react-native-stage-0.md) ^1.0.1
- [babel-plugin-syntax-dynamic-import](https://npm.io/package/babel-plugin-syntax-dynamic-import.md) ^6.18.0
- [case-sensitive-paths-webpack-plugin](https://npm.io/package/case-sensitive-paths-webpack-plugin.md) 2.1.1

## Recent versions

- 1.1.11 (latest) — 2018-12-28
- 1.1.7 — 2018-12-25

## README

# 表格组件

核心是表格展示、筛选和排序能力，业务场景是智能搜索数据搜索进行表格展示及一系列操作

## 适用范围

- 1、 基本表格展示
- 2、 表格搜索、筛选和排序，可配置工具条
- 3、 excel导出
- 4、 深浅主题和高级表格展示
- 5、 编辑列功能：排序和添加计算列
- 6、 图表展示、色阶和数据条功能
- 7、 多表头
- 8、 树表结构展示
- 9、 股票类型
- 10、查看更多
- 11、数据处理回调函数
- 12、表格刷新和复制功能

## 代码演示

``` html
import AbcStandardTable from 'abc-standard-table';
import { SimpleTable } from 'abc-standard-table';//简单表格

 <AbcStandardTable
      columns={[
          {
              title:'公司',
              dataIndex: 'name',
              // filterMode: 'none',
              render: (text) => {
                  const keywords = '融资';
                  //根据关键词匹配标题中的html标签，实现变红
                  const index = text.indexOf(keywords);
                  if (index !== -1) {
                      return (<span>{text.substr(0, index)}<font
                          color="red">{keywords}</font>{text.substr(index + keywords.length, text.length - keywords.length - index)}</span>)
                  } else {
                      return (<span>{text}</span>)
                  }
              },
              width: 200
          }, {
              title: '地点',
              dataIndex: 'com_addr',
          }
          , {
              title: '状态',
              dataIndex: 'com_status',
          }, {
              title: '融资类型',
              dataIndex: 'invest_round_id',
          }, {
              title: '融资金额',
              dataIndex: 'invest_detail_money',
          }, {
              title: '负责人',
              dataIndex: 'person_name',
          }, {
              title: '融资日期',
              dataIndex: 'com_born_date',
          }]}
      config = {{
          rowColor: 'zebra',
          paginationMode: 'pager',
      }}
      pagination={{
          showSizeChanger: true,//每页显示条数
          showQuickJumper: true,//跳转
          hideOnSinglePage: false,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '40']
      }}
      bordered
      dataSource = {[
      {
         key: '1',
         name: "好融资",
         "com_addr": "重庆",
         "com_born_date": "2014-07",
         "com_status": "运营中",
         invest_round_id: "A轮",
         invest_date: "2014-08-22",
         invest_detail_money: -5000000,
         com_ass: "未透露",
         com_cat_name: "金融",
         "com_scale": "50-100人",
         person_name: "陈杭生",
         linedata: [[0, null, null, null, null, null, null, null, null, -0.019999999999999574, 0, null, null, null, null, null, -0.16000000000000014, -0.019999999999999574, -0.28000000000000025, -0.29000000000000004, -0.21999999999999975, -0.2699999999999996, -0.2400000000000002, -0.2400000000000002, -0.16999999999999993, -0.2699999999999996, -0.20000000000000018, -0.20999999999999996, -0.09999999999999964, null],
             [null, 0.040000000000000036, 0.08000000000000007, 0.040000000000000036, 0.08000000000000007, 0.11000000000000032, 0.08000000000000007, 0.08999999999999986, 0.020000000000000462, null, null, 0.2400000000000002, 0.17999999999999972, 0.11000000000000032, 0.09999999999999964, 0.07000000000000028, null, null, null, null, null, null, null, null, null, null, null, null, null, 0.33999999999999986]],
         linedata_plotLines: [{
             value: 0.3399,
             text: 0.3399
         }, {
             value: -0.290,
             text: -0.290
         }],
         columndata: [[0, null, null, null, null, null, null, null, null, -0.019999999999999574, 0, null, null, null, null, null, -0.16000000000000014, -0.019999999999999574, -0.28000000000000025, -0.29000000000000004, -0.21999999999999975, -0.2699999999999996, -0.2400000000000002, -0.2400000000000002, -0.16999999999999993, -0.2699999999999996, -0.20000000000000018, -0.20999999999999996, -0.09999999999999964, null],
             [null, 0.040000000000000036, 0.08000000000000007, 0.040000000000000036, 0.08000000000000007, 0.11000000000000032, 0.08000000000000007, 0.08999999999999986, 0.020000000000000462, null, null, 0.2400000000000002, 0.17999999999999972, 0.11000000000000032, 0.09999999999999964, 0.07000000000000028, null, null, null, null, null, null, null, null, null, null, null, null, null, 0.33999999999999986]],
         columndata_plotLines: [{
             value: 0.333,
             text: 0.3339
         }, {
             value: -0.29,
             text: -0.290
         }],
      }, {
          key: '2',
          name: "融资线",
          "com_addr": "上海",
          "com_born_date": "2015-07",
          "com_status": "运营中",
          invest_round_id: "A轮",
          invest_date: "2017-10-17",
          invest_detail_money: -200000,
          com_ass: "未透露",
          com_cat_name: "金融",
          "com_scale": "不明确",
          person_name: "周红春",
          linedata: [[0, null, null, null, null, null, null, null, null, -0.019999999999999574, 0, null, null, null, null, null, -0.16000000000000014, -0.019999999999999574, -0.28000000000000025, -0.29000000000000004, -0.21999999999999975, -0.2699999999999996, -0.2400000000000002, -0.2400000000000002, -0.16999999999999993, -0.2699999999999996, -0.20000000000000018, -0.20999999999999996, -0.09999999999999964, null],
              [null, 0.040000000000000036, 0.08000000000000007, 0.040000000000000036, 0.08000000000000007, 0.11000000000000032, 0.08000000000000007, 0.08999999999999986, 0.020000000000000462, null, null, 0.2400000000000002, 0.17999999999999972, 0.11000000000000032, 0.09999999999999964, 0.07000000000000028, null, null, null, null, null, null, null, null, null, null, null, null, null, 0.33999999999999986]],
      }, {
          key: '3',
          name: "车融资",
          "com_addr": "北京",
          "com_born_date": "2013-11",
          "com_status": "运营中",
          invest_round_id: "天使轮",
          invest_date: "2014-1-1",
          invest_detail_money: 622220,
          com_ass: "未透露",
          com_cat_name: "金融",
          "com_scale": "",
          person_name: "许赤瑜,刘汀",
      }, {
          key: '5',
          name: "东方融资网",
          "com_addr": "江苏",
          "com_born_date": "2010-11",
          "com_status": "运营中",
          invest_round_id: "A轮",
          invest_date: "2015-07-20",
          invest_detail_money: 888888,
          com_ass: "未透露",
          com_cat_name: "金融",
          "com_scale": "150-300人",
          person_name: "",
      }, {
          key: '6',
          name: "东方融资网",
          "com_addr": "江苏",
          "com_born_date": "2010-11",
          "com_status": "运营中",
          invest_round_id: "A轮",
          invest_date: "2015-07-20",
          invest_detail_money: 888888,
          com_ass: "未透露",
          com_cat_name: "金融",
          "com_scale": "150-300人",
          person_name: "",
      }, {
          key: '7',
          name: "东方融资网",
          "com_addr": "江苏",
          "com_born_date": "2010-11",
          "com_status": "运营中",
          invest_round_id: "A轮",
          invest_date: "2015-07-20",
          invest_detail_money: 888888,
          com_ass: "未透露",
          com_cat_name: "金融",
          "com_scale": "150-300人",
          person_name: "",
      }, {
          key: '8',
          name: "东方融资网",
          "com_addr": "江苏",
          "com_born_date": "2010-11",
          "com_status": "运营中",
          invest_round_id: "A轮",
          invest_date: "2015-07-20",
          invest_detail_money: 888888,
          com_ass: "未透露",
          com_cat_name: "金融",
          "com_scale": "150-300人",
          person_name: "",
      }, {
          key: '9',
          name: "东方融资网",
          "com_addr": "江苏",
          "com_born_date": "2010-11",
          "com_status": "运营中",
          invest_round_id: "A轮",
          invest_date: "2015-07-20",
          invest_detail_money: 888888,
          com_ass: "未透露",
          com_cat_name: "金融",
          "com_scale": "150-300人",
          person_name: "",
      }, {
          key: '10',
          name: "东方融资网",
          "com_addr": "江苏",
          "com_born_date": "2010-11",
          "com_status": "运营中",
          invest_round_id: "A轮",
          invest_date: "2015-07-20",
          invest_detail_money: 888888,
          com_ass: "未透露",
          com_cat_name: "金融",
          "com_scale": "150-300人",
          person_name: "",
      }]}
  />

  //简单表格示例
      <SimpleTable
          columns={[
              {
                  title:'公司',
                  dataIndex: 'name',
                  fixed:'left',
                  width: 200
              }, {
                  title: '地点',
                  dataIndex: 'com_addr',
              }
              , {
                  title: '状态',
                  dataIndex: 'com_status',
              }, {
                  title: '融资类型',
                  dataIndex: 'invest_round_id',
              }, {
                  title: '融资金额',
                  dataIndex: 'invest_detail_money',
              }, {
                  title: '负责人',
                  dataIndex: 'person_name',
              }, {
                  title: '融资日期',
                  dataIndex: 'com_born_date',
              }]}
          config = {{
              theme:'pale,
              rowColor: 'zebra',
              paginationMode: 'pager',
          }}
          pagination={{
              showSizeChanger: true,//每页显示条数
              showQuickJumper: true,//跳转
              hideOnSinglePage: false,
              pageSize: 10,
              pageSizeOptions: ['10', '20', '30', '40']
          }}
          bordered
          dataSource = {[
              {
                  key: '1',
                  name: "好融资",
                  "com_addr": "重庆",
                  "com_born_date": "2014-07",
                  "com_status": "运营中",
                  invest_round_id: "A轮",
                  invest_detail_money: -5000000,
                  person_name: "陈杭生",
              }, {
                  key: '2',
                  name: "融资线",
                  "com_addr": "上海",
                  "com_born_date": "2015-07",
                  "com_status": "运营中",
                  invest_round_id: "A轮",
                  invest_detail_money: -200000,
                  person_name: "周红春",
              }, {
                  key: '3',
                  name: "车融资",
                  "com_addr": "北京",
                  "com_born_date": "2013-11",
                  "com_status": "运营中",
                  invest_round_id: "天使轮",
                  invest_detail_money: 622220,
                  person_name: "许赤瑜,刘汀",
              }, {
                  key: '5',
                  name: "东方融资网",
                  "com_addr": "江苏",
                  "com_born_date": "2010-11",
                  "com_status": "运营中",
                  invest_round_id: "A轮",
                  invest_detail_money: 888888,
                  person_name: "",
              }]}
       />
```

## API
https://confluence.abcft.com/display/ABCFront/Abc-Standard-Table

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