How do you properly use the "sortType" function for a column?

[eyaklinlyft]

Hi! I'm having issues with the sortType function on the column options.

The definition says sortType: String | Function(rowA: <Row>, rowB: <Row>, columnId: String, desc: Bool), and the docs mention If a function is passed, it must be memoized. The sortType function should return -1 if rowA is larger, and 1 if rowB is larger. react-table will take care of the rest..

Does this mean we need to handle the desc argument in our custom sort function, or does react-table handle that?
Also, whether I am handling desc or not in the sortType function, the ordering doesn't change and I can't figure out why.

Here is my sortType function for reference, using the provided desc arg

export const caseInsensitiveStringSortTypeFn = (rowA: Row, rowB: Row, id: string, desc: boolean): number => {
    const a = rowA.original[id].toLowerCase();
    const b = rowB.original[id].toLowerCase();
    if (a > b) {
        return desc ? 1 : -1;
    }
    if (b > a) {
        return desc ? -1 : 1;
    }
    return 0;
};

[timothydowd]

I found the following piece of useful advide from stack overflow: 'desc identifies the direction of the sort. Even though desc is supplied, the sort function should NOT reverse the return values. react table automatically does this.'

https://stackoverflow.com/questions/63927644/how-does-one-supply-a-custom-sort-function-for-react-table-7

Try this in your column:

`
sortType: useMemo(() => (rowA, rowB, columnId) => {

const a = rowA.original[columnId].toLowerCase()

const b = rowB.original[columnId].toLowerCase()

if (a > b) 
    return 1

if (b > a) 
    return -1

return 0

})
`

just as a side note to anyone who is reading this - -if you can explain to me how to properly insert code comments on here i would be very grateful

[jemorriso]

Just ran into this now but it's using Markdown syntax so you enclose the code comment with 3 backticks followed by the language name

//```js
// const foo = 'bar';
//```
const foo = 'bar';

[samselfridge-cnc]

You don't need to handle desc for basic sorting, I imagine its there in case there's some custom behavior your want when thing are being sorted the other direction.

Are you memoizing the sortType function?

const weekdaySortFactory = () => {
  const DAYS = { sun: 0, mon: 1, tue: 2, wed: 3, thu: 4, fri: 5, sat: 6 };
  const sortFunc = (a, b) => {
    const aDay = a.values.weekDay.toLowerCase();
    const bDay = b.values.weekDay.toLowerCase();
    const aVal = DAYS[aDay];
    const bVal = DAYS[bDay];
    return aVal < bVal ? -1 : 1;
  };
  return sortFunc;
};

const weekDaySort = useMemo(weekdaySortFactory);

Then in my table:

          {headerGroup.headers.map(column => {
                    if (column.id === 'weekDay') column.sortType = weekDaySort;

[kenklin]

@eyaklinlyft Your code, perhaps lifted from SO, uses rowA.original[id] rather than rowA.values[id]. I don't know if your values have changed.

FWIW, I use a function like this:

function compareLowerCase(rowA, rowB, id) {
    const a = rowA.values[id].toLowerCase();
    const b = rowB.values[id].toLowerCase();
    if (a > b) return 1; 
    if (a < b) return -1;
    return 0;
}

Also note that the current semantics of the return value say:

The sortType function should return 1 if rowA is larger, and -1 if rowB is larger.

[seans84]

@timothydowd's suggestion only works if the columnId matches the Header. To key off the actual ID you need to call the columnId against the values like this:

const numberSort = useMemo(
  () => (rowA, rowB, columnId) => {
    const a = parseFloat(rowA.values[columnId]);
    const b = parseFloat(rowB.values[columnId]);
    return a > b ? 1 : -1;
  },
  []
);

[StianIsmar]

I have a list of column definitions, where I want to update one of them to allow for sorting in a particular way.

I can not get it to work. The propert plans in the data is a boolean. The column definition for "plans" looks like this after my code underneath has been run:
accessor: "plans" canSort: true header: "plans" sequence: 0 sortType: ƒ boolSort(rowA, rowB, columnId) type: "string"

Here is my go at it

let newCols = columns;

    if (columns.length > 0) {
      const filteredCols = columns.filter(c => c.accessor !== "plans");

      const boolSort = (rowA, rowB, columnId) => {
        const a = rowA.values[columnId].toString();
        const b = rowB.values[columnId].toString();
        return a > b ? 1 : -1;
      };

      const change = columns.find(c => c.accessor === "plans");
      if (change) {
        change.canSort = true;
        change.sortType = boolSort;
        newCols = [...filteredCols, change];
      }

Why does the sorting not work for this column now?

[samselfridge-cnc]

@StianIsmar - at a quick glance maybe because you're not memoizing your boolSort ?

from the docs on sortType: "If a function is passed, it must be memoized."