如何在React表中添加不区分大小写的排序？

Question

默认情况下，react表排序区分大小写。

为了使其不敏感，我们必须编写一个自定义排序函数。

我喜欢来自https://github.com/react-tools/react-table/issues/335的答案。

这会有所帮助。

Answer 1

对于不区分大小写和数字排序，传入sortTypestable props 如下：

useTable({
    sortTypes: {
                alphanumeric: (row1, row2, columnName) => {
                    const rowOneColumn = row1.values[columnName];
                    const rowTwoColumn = row2.values[columnName];
                    if (isNaN(rowOneColumn)) {
                        return rowOneColumn.toUpperCase() >
                            rowTwoColumn.toUpperCase()
                            ? 1
                            : -1;
                    }
                    return Number(rowOneColumn) > Number(rowTwoColumn) ? 1 : -1;
                }
            }
})

Answer 2

//function to sort the results
    function filterCaseInsensitive(filter, row) {
        const id = filter.pivotId || filter.id;
        return (
            row[id] !== undefined ?
                String(row[id].toLowerCase()).startsWith(filter.value.toLowerCase())
            :
                true
        );
    }

    // react table code goes here
    <ReactTable
        data={data}
        columns={columns}
        filterable
        defaultFilterMethod={(filter, row) => filterCaseInsensitive(filter, row) }
    />