Sort manipulation with v9 configs

[phb-ig]

There are many tables in our app which default to small view windows, but for which users want to have the ability to pin rows. Using the sticky-top rows from the built-in pinning feature means that the view for the unpinned rows shrinks too much, so we currently implement pinning as a sort on a hiden column isPinned. It seems that we can't do this using the sorting atom, but have to rely on the v8 state change methods:

const onSortingChange = useCallback((update) => {
    setSorting((old) => {
      const next = typeof update === 'function' ? update(old) : update;
      if (enablePins && next[0]?.id !== 'isPinned') {
        return [{ id: 'isPinned', desc: true }, ...next];
      }

      return next;
    });
  }, [enablePins]);

It would be nice if there were a way to do this using the preferred v9 state management, or maybe if there were a way to specify that a sort column should not be removed by the built-in updater.

[IlyaKhalafi]

You can keep v9's atom ownership and still use onSortingChange to enforce the extra sort. atoms.sorting supplies the current value, so you don't need state.sorting or a React state setter.

For the pins-enabled case, keeping your existing features, columns and data setup,

import { useCreateAtom } from '@tanstack/react-store'
import { functionalUpdate, type SortingState } from '@tanstack/react-table'

const sortingAtom = useCreateAtom<SortingState>([
  { id: 'isPinned', desc: true },
])

const table = useTable({
  features,
  columns,
  data,
  atoms: { sorting: sortingAtom },
  onSortingChange: (updater) => {
    sortingAtom.set((old) => [
      { id: 'isPinned', desc: true },
      ...functionalUpdate(updater, old).filter((s) => s.id !== 'isPinned'),
    ])
  },
})

Filtering first also handles attempts to reverse or duplicate isPinned. enableSortingRemoval: false alone doesn't preserve it when a single-column sort replaces the sorting array.

I checked this with React Table 9.3.1, including column toggles, clearing, resets and atom subscriptions. The sorting update path still calls the change handler when an external atom owns the state. If enablePins can change at runtime, respect it inside onSortingChange and normalize the atom when the flag changes too.