How to set column sort without toggling

[langfordG]

Hello,

I'm trying to create a custom widget for column sorting similar to the below image.

The challenge I'm having is when calling column.toggleSortBy(), the state repeatedly changes from descending -> ascending -> none. There doesn't seem to be a way to set the sortBy to either ascending or descending, such as column.setSortAsc(true). Is there a known workaround to setting the sortBy for a column directly, without having to toggle in order to get there?

I also tried setSortBy([{columnId: column.id, desc: false}]) which works as expected, but setSortBy([{columnId: column.id, desc: true}]) has no effect.

Thanks,
Grayson

[akkisagiraju]

Hi Grayson,

I had the same issue when I was implementing a custom widget for sorting and filtering rows. The way I solved this was by setting disableSortRemove: true inside the options object passed to the useTable hook.

useTable(
    {
      columns,
      data,
      disableSortRemove: true,
      filterTypes,
    },
    useFilters,
    useSortBy,
    useColumnOrder,
    useFlexLayout,
    useResizeColumns,
    useRowSelect)

If you set disableSortRemove to be true, calling column.toggleSortBy() only changes sort order from descending -> ascending and back. Your rows do not go back to being unsorted.

https://react-table.tanstack.com/docs/api/useSortBy

Inside the custom widget you may use this to sort ascending and descending:

  const sortAscHandler = (column, event) => {
    const toggleProps = column.getSortByToggleProps();
   // the first condition checks if your column is unsorted and this happens only the first time because your column is always sorted once one of these handlers is fired
    if (column.sortedIndex === -1 || column.isSortedDesc) {
      toggleProps.onClick(event);
    }
  };

  const sortDescHandler = (column, event) => {
    const toggleProps = column.getSortByToggleProps();
    if (column.sortedIndex === -1 || !column.isSortedDesc) {
      toggleProps.onClick(event);
    }
  };

[KoichaDev]

  const sortAscHandler = (column, event) => {
    const toggleProps = column.getSortByToggleProps();
   // the first condition checks if your column is unsorted and this happens only the first time because your column is always sorted once one of these handlers is fired
    if (column.sortedIndex === -1 || column.isSortedDesc) {
      toggleProps.onClick(event);
    }
  };

  const sortDescHandler = (column, event) => {
    const toggleProps = column.getSortByToggleProps();
    if (column.sortedIndex === -1 || !column.isSortedDesc) {
      toggleProps.onClick(event);
    }
  };

@akkisagiraju

I have two followed up questions.

1. How would you apply these functions above in order to toggle an ascending and descending button instead of using getSortByToggleProps()?

2. I can't get ascending and descending icons to display the site right away and act it as it has its own functionality to descend/ascend like the question 1 I have above.

A short code snippet of mine looks like this:

<thead>
	{headerGroups.map(headerGroup => {
		return <tr {...headerGroup.getHeaderGroupProps()}>
			{headerGroup.headers.map(column => {
				return <th {...column.getHeaderProps(column.getSortByToggleProps())}>
					{column.render('Header')}
						<span>
							{column.isSorted ? (column.isSortedDesc ? '🔽' : '🔼') : ''}
						</span>
					</th>
				})}
			</tr>
		})}
</thead>

Any ideas how to solve my problem?