How to sort strings in React JS - reactjs

Question

I have a table from Ant Design where i want to sort a column. This column is name.
const data = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park"
},
{
key: "2",
name: "Carl Green",
age: 42,
address: "London No. 1 Lake Park"
},
{
key: "3",
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park"
},
{
key: "4",
name: "Jim Red",
age: 32,
address: "London No. 2 Lake Park"
}
];
class App extends React.Component {
state = {
filteredInfo: null,
sortedInfo: null
};
handleChange = (pagination, filters, sorter) => {
console.log("Various parameters", pagination, filters, sorter);
this.setState({
filteredInfo: filters,
sortedInfo: sorter
});
};
clearFilters = () => {
this.setState({ filteredInfo: null });
};
clearAll = () => {
this.setState({
filteredInfo: null,
sortedInfo: null
});
};
setAgeSort = () => {
this.setState({
sortedInfo: {
order: "descend",
columnKey: "age"
}
});
};
render() {
let { sortedInfo } = this.state;
sortedInfo = sortedInfo || {};
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
sorter: (a, b) => a.name.length - b.name.length,
sortOrder: sortedInfo.columnKey === "name" && sortedInfo.order,
ellipsis: true
},
{
title: "Age",
dataIndex: "age",
key: "age",
sorter: (a, b) => a.age - b.age,
sortOrder: sortedInfo.columnKey === "age" && sortedInfo.order,
ellipsis: true
},
{
title: "Address",
dataIndex: "address",
key: "address",
sorter: (a, b) => a.address.length - b.address.length,
sortOrder: sortedInfo.columnKey === "address" && sortedInfo.order,
ellipsis: true
}
];
return (
<>
<Table
columns={columns}
dataSource={data}
onChange={this.handleChange}
/>
</>
);
}
}
Now, when i sort in ascending order the data does not order in the right way. Why? And how to solve?
demo: https://codesandbox.io/s/reset-filters-and-sorters-antd494-forked-m3ljo?file=/index.js:143-2169

Answer 1

Your sort compare function is comparing the length of name which will sort the array by the length of the name.
Change your sorter for name to below.
sorter: (a, b) => {
if(a.name < b.name) { return -1; }
if(a.name > b.name) { return 1; }
return 0;
},
You also need to change sorter for address.
sorter: (a, b) => {
if(a.address < b.address) { return -1; }
if(a.address > b.address) { return 1; }
return 0;
},

Answer 2

Try this sorter function for name:
sorter: (a, b) => a.name.toUpperCase().localeCompare(b.name.toUpperCase())

Answer 3

I've Tried this code on your snippet and it is working good -
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";
const data = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park"
},
{
key: "2",
name: "Carl Green",
age: 42,
address: "London No. 1 Lake Park"
},
{
key: "3",
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park"
},
{
key: "4",
name: "Jim Red",
age: 32,
address: "London No. 2 Lake Park"
}
];
class App extends React.Component {
state = {
filteredInfo: null,
sortedInfo: null
};
handleChange = (pagination, filters, sorter) => {
console.log("Various parameters", pagination, filters, sorter);
this.setState({
filteredInfo: filters,
sortedInfo: sorter
});
};
clearFilters = () => {
this.setState({ filteredInfo: null });
};
clearAll = () => {
this.setState({
filteredInfo: null,
sortedInfo: null
});
};
setAgeSort = () => {
this.setState({
sortedInfo: {
order: "descend",
columnKey: "age"
}
});
};
render() {
let { sortedInfo } = this.state;
sortedInfo = sortedInfo || {};
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
sorter: (a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0),
sortOrder: sortedInfo.columnKey === "name" && sortedInfo.order,
ellipsis: true
},
{
title: "Age",
dataIndex: "age",
key: "age",
sorter: (a, b) => a.age - b.age,
sortOrder: sortedInfo.columnKey === "age" && sortedInfo.order,
ellipsis: true
},
{
title: "Address",
dataIndex: "address",
key: "address",
sorter: (a,b) => (a.address > b.address) ? 1 : ((b.address > a.address) ? -1 : 0),
sortOrder: sortedInfo.columnKey === "address" && sortedInfo.order,
ellipsis: true
}
];
return (
<>
<Table
columns={columns}
dataSource={data}
onChange={this.handleChange}
/>
</>
);
}
}
ReactDOM.render(<App />, document.getElementById("container"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>