Update the sortBy in initialState of the table when the prop changes

[Waqqars987]

Hi,

I am passing a "sort" prop from the outisde component to the react table instance as,

useTable(
		{
			columns,
			data,
			initialState: {
				pageIndex: TABLE_DEFAULTS.pageIndex,
				pageSize: TABLE_DEFAULTS.pageSize,
				sortBy: **sort**
			},
			manualSortBy: true,
			disableSortRemove: true,
			manualPagination: true,
			pageCount: controlledPageCount
		},
		useSortBy,
		usePagination
	);

When this sort prop changes (somewhere from outside), I want the sortBy in the iniitalState to change and call the my API which is set up using useEffect. It works as it should when click on the table header and sort the columns manually by clicking on it. However, I also want it to change programmatically. At the moment, the prop changes but its not reflected in the table.
Basically, I want to manipulate the initialState of the table when a prop changes. From inside the table, I need automatical sort control provided by the table but I also want to be able to change it from outside.

Can anyone tell me how to achieve this?
Any help is appreciated.

[owlas]

I'm also looking for a way to fully control the sortBy state

• Here shows that overriding getToggleSortByProps isn't a solution custom Column.toggleSortBy not called #2211
• Here @tannerlinsley mentions that currently this kind of full control is not well supported: Fully controlled table #2831

Would love to know if there is a solution I've missed!

[jestrickler]

I think I got this working!! I pass sort, onSort as props and tie those to the internal sortBy, setSortBy with a couple useEffects

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state: { sortBy },
    setSortBy
  } = useTable(
    {
      columns,
      data,
      initialState: { sortBy: sort },
      manualSortBy: true
    },
    useSortBy
  )

  useEffect(() => setSortBy(sort), [sort])
  useEffect(() => onSort(sortBy), [sortBy])

[mgoldenbe]

@jestrickler What is onSort?

[jestrickler]

onSort is the callback method passed into my table. I just update the sort param passed to react-query which triggers an API call:

const handleSort = (data) => {
    if (data !== sort) {
      setPage(1)
      setSort(data)
    }
  }