1.1.11 • Published 5 years ago

abc-standard-table v1.1.11

Weekly downloads
6
License
-
Repository
-
Last release
5 years ago

表格组件

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

适用范围

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

代码演示

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

antdautoprefixeraxiosbabel-corebabel-eslintbabel-jestbabel-loaderbabel-plugin-syntax-dynamic-importbabel-preset-react-appbabel-preset-react-native-stage-0babel-runtimebetter-xlsxcase-sensitive-paths-webpack-pluginchalkcompression-webpack-plugincss-loaderdotenveslinteslint-config-react-appeslint-loadereslint-plugin-flowtypeeslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-reactexcel-xlsxextract-text-webpack-pluginfile-loaderfs-extrahighchartshighlight.jshtml-webpack-pluginjestjs-cookielodashmobxmobx-reactmomentobject-assignpostcss-flexbugs-fixespostcss-loaderpromiseprop-typesrafreactreact-clipboard.jsreact-colorreact-copy-to-clipboardreact-dev-utilsreact-domreact-loadablereact-reduxreact-router-domreduxremarkablesass-loaderstyle-loadersw-precache-webpack-pluginurl-loaderwebpackwebpack-bundle-analyzerwebpack-dev-serverwebpack-manifest-pluginwebpack-mergewhatwg-fetch
@infinitebrahmanuniverse/nolb-abc@everything-registry/sub-chunk-1088
1.1.11

5 years ago

1.1.7

5 years ago