React-table: Custom Sorting Function

[NickCain]

I am trying to implement my own sorting function, as this will be done Server Side based so I will just dispatch an action to talk to the API but I am having problems getting the name of the column and sort order in this func.

I'm using react table V7, and i've added the prop of manualSorting: true to disable the default behaviour, but when adding the custom orderByFn to the useTable hook it calls it but returns an undefined param, I was expecting something with the column name and the sort order in this? Any ideas would be great.

I've created a code sandbox here based on one of the React Table examples showing my issue.

https://codesandbox.io/embed/tannerlinsleyreact-table-sorting-f1bmd

[MatyCZ]

@NickCain This is my server side sorting solution:

import React, { useEffect } from "react";
import { useSortBy, useTable } from "react-table";

const ReactTableTest = (props) => {
  const { columns, data, initialSortBy, onChangeSort } = props;

  const {
    headerGroups,
    getTableProps,
    getTableBodyProps,
    prepareRow,
    rows,
    state: { sortBy }
  } = useTable(
    {
      columns,
      data,
      initialState: { sortBy: initialSortBy },
      manualSorting: true
    },
    useSortBy
  );

  // Store new sort state in reducer and call API to fetch new data from server
  useEffect(() => {
    onChangeSort(sortBy);
  }, [onChangeSort, sortBy]);

  return (
    <span>render table here</span>
  );
};

export default ReactTableTest;

[NickCain]

@MatyCZ - Thanks for your example it helped lead me to the issue, and I've now resolved this problem.

[abezhinaru]

Thanks @MatyCZ Doc still doesn't contains any mentions about manual sorting feature usage

[IamDhana]

Need an example for custom server side sorting?

[ravsaxena]

Need an example for custom server side sorting?

yes

[Luccasoli]

@MatyCZ and @NickCain can you show an example in the codesandbox?

[chaoszcat]

I noticed there is no manualSorting flag anymore in the useSortBy hook. The one I have in my build is manualSortBy. Here is my example of remote sorting:

https://codesandbox.io/s/stupefied-nobel-tx4gq

import React, { useState, useEffect, useCallback } from "react";
import { useTable, useSortBy } from "react-table";

function Table({ columns, data, onSort }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state: {sortBy}
  } = useTable(
    {
      columns,
      data,
      manualSortBy: true
    },
    useSortBy
  );

  useEffect(() => {
    onSort(sortBy);
  }, [onSort, sortBy]);

  return <table ... />;
}

function App() {
  const columns = React.useMemo(
    // ... columns ...
    []
  );

  const [data, setData] = useState([]);

  const handleSort = useCallback(sortBy => {
    //remote sort
    //... fetch("your-api", sortBy) ...
  }, [])

  return <Table columns={columns} data={data} onSort={handleSort} />;
}

export default App;

[chaoszcat]

@gotpist1 maybe add your code here? Not sure what's wrong since the example is working:

https://codesandbox.io/s/stupefied-nobel-tx4gq

[tar-aldev]

Is it possible to use sorting function for definite columns and leave default sorting for other ones?

[nicuvlad7]

I'm kinda asking the same question as @tar-aldev. I need to use the default sorting but to save what the user has sorted (preference) on the UI, and then reapply it when it comes back which means i somehow need to access each column and tell it how to sort on page load.
if anyone has any suggestions i could really use one