[英]React-virtualized table sorting issues
I'm using react-virtualized table and I have some issues regarding sorting. 我正在使用react-virtualized表,但是我在排序方面遇到了一些问题。
First of all, some columns that contain numbers need numeric sorting, for example I want this [1, 200, 10500, 29000] and not this [1, 10500, 200, 29000]. 首先,一些包含数字的列需要数字排序,例如,我想要这个[1,200,10500,29000]而不是这个[1,10500,200,29000]。 How can I pass numeric sorting to certain columns?
如何将数字排序传递给某些列?
Another issue about sorting is this: 有关排序的另一个问题是:
Bucharest
Bucharest
Bucuresti
IASI
Oradea
ARAD
BRASOV
BUCHAREST
BUCHAREST
Bucharest
Bucharest
Bucharest
What's going on here? 这里发生了什么? First and last 'Bucharest' strings are identical.
首个和最后一个“布加勒斯特”字符串相同。
Here is my code: 这是我的代码:
import { items } from 'model/component-props';
import _ from 'lodash';
class Items extends React.Component {
constructor(props) {
super(props);
this.state = {
sortBy: 'No',
sortDirection: 'ASC',
}
}
sort = ({sortBy, sortDirection}) => {
console.log({sortBy, sortDirection})
this.setState({
sortBy,
sortDirection,
})
}
render(){
const { items } = this.props;
const simplifiedData = items && _.get(items, ['Soap:Envelope', 'Soap:Body', 'ReadMultiple_Result', 'ReadMultiple_Result', 'ItemList']);
const beautifiedData = _.map(simplifiedData, simple => _.reduce(simple, (r, value, key) => ({
...r,
[key]: value['_text']
}), {}));
const searchKeysList = ['No', 'Description', 'TranslateDescr', 'Inventory', 'Special_Weight', 'Composition', 'Width', 'Unit_Price'];
const filteredData = beautifiedData && beautifiedData.filter(obj =>
_.has(obj, itemSearchKey) && _.includes(obj[itemSearchKey].toLowerCase(), itemSearchTerm.toLowerCase()));
const tempList = _.sortBy([...filteredData], d => d[this.state.sortBy]);
const list = this.state.sortDirection === 'DESC' ? tempList.reverse() : tempList;
return (
<div>
<Table
style={{paddingTop: '20px'}}
rowStyle={{border: '0.5px dashed grey'}}
width={1400}
height={400}
headerHeight={35}
rowHeight={30}
rowCount={list.length}
rowGetter={({ index }) => list[index]}
sortBy={this.state.sortBy}
sortDirection={this.state.sortDirection}
sort={this.sort}
onRowClick={({ rowData }) => this.onItemCardClick(rowData.No)}
>
<Column
label={content[langProp].ID}
dataKey= 'No'
width={150}
/>
<Column
style={{textAlign: 'right'}}
label={content[langProp].Inventory}
headerStyle={{textAlign: 'right'}}
cellDataGetter={({ rowData }) => parseFloat(rowData.Inventory).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
dataKey='Inventory'
disableSort='true'
width={200}
/>
<Column
label={content[langProp].City}
dataKey='City'
width={200}
/>
</Table>
</div>
);
Any help would be much appreciated. 任何帮助将非常感激。
If you run 如果你跑
var users = [
{ 'age': 315 },
{ 'age': 34 }
];
var result = _.sortBy(users, u => u.age);
You'll find that it returns {age: 34}, {age: 315}]
, so your numeric issue should not exist...I would guess that the value is actually being stored as a string in which case you can run a regex to check if the string is supposed to be a number in your iteratee like this 您会发现它返回
{age: 34}, {age: 315}]
,因此您的数字问题不应该存在...我猜该值实际上存储为字符串,在这种情况下,您可以运行正则表达式检查字符串是否应该是您的iteratee中的数字,像这样
var result = _.sortBy(data, d => {
const str = d[this.state.sortBy];
var patt = new RegExp("^\d+$");
if(patt.test(str)) {
return Number.parseInt(str)
}
return str;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.