abc-standard-table
v1.1.11
Published
展示各种列表型的排行；提供四种模式，支持标题可配置、最大显示条数设置、子项模板渲染自定义；
Downloads
4
Readme
表格组件
核心是表格展示、筛选和排序能力，业务场景是智能搜索数据搜索进行表格展示及一系列操作
适用范围
- 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