我开始使用 React.js 进行开发，并且正在使用 React-Bootstrap-Table。
我需要获取特定列的总和（搜索字段中每次更改的更新）。
我还想为基于值的条件格式添加自定义 CSS（例如，如果金额小于平均值，如果金额接近平均黄色，则需要为绿色文本，如果金额高于平均值但小于最大橙色，否则为红色）。
数字字段也需要右对齐
代码可以在这里查看
var DataTable = ReactDataComponents.DataTable;
// Generate random data
var names = ['201801003', '201801002', '201801004', '201801005', '201801006'];
var cities = ['2018', '2017', '2017', '2017', '2017', '2017'];
var addresses = ['Travancore', 'Sivagangai', 'Pudhukottai', 'Madurai'];
var states = ['1200', '350', '6400', '1700', '750'];
var data = [];
for (var i = 0; i < 1000; i++) {
data.push({
id: i,
name: names[~~(Math.random() * names.length)],
city: cities[~~(Math.random() * cities.length)],
address: addresses[~~(Math.random() * addresses.length)],
state: states[~~(Math.random() * states.length)]
});
}
var columns = [{
title: 'CID',
prop: 'name'
}, {
title: 'Area',
prop: 'city'
}, {
title: 'Authority',
prop: 'address'
}, {
title: 'Amount',
prop: 'state'
}];
ReactDOM.render(React.createElement(DataTable, {
className: 'container',
keys: 'id',
columns: columns,
initialData: data,
initialPageLength: 5,
initialSortBy: {
prop: 'city',
order: 'descending'
},
pageLengthOptions: [5, 20, 50]
}), document.getElementById("root"));<title>React Table</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/carlosrocha/react-data-components/v1.0.0/css/table-twbs.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'>
<body>
<br>
<h3> Area</H3>
<br>
<div id="root"></div><br>
<h3> Sum</H3>
<br>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://npmcdn.com/react-data-components@1.0.1/dist/react-data-components.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css'></script>
</body>谢谢