How do you get the value from onSortingChange, or even onStateChange?

[kpervin]

I am attempting to pass functions to a component so I can add them to useTableInstance, but I seem to be missing something here:

// Table.tsx
export interface TableProps {
  data: OrderRow[];
  onSortChange?: OnChangeFn<SortingState>;
  sorting?: SortingState;
}

function Table({
  data,
  onSortChange,
  sorting = [],
}: TableProps) {
  ...
  const tableInstance = useTableInstance(table, {
      data,
      columns,
      state: {
        sorting,
      },
      onSortingChange: (val) => {
        onSortChange?.(val);
      },
      getCoreRowModel: getCoreRowModel(),
      getSortedRowModel: getSortedRowModel(),
    });
   ...
}

// Parent.tsx

function Parent() {
    ...
    const [ sorting, setSorting ] = useState<SortingState>([]);

    const onSortChange = (value) => setSorting(value);
    
    return <Table sorting={sorting} onSortChange={onSortChange} ... />
} 

When done this way, I cannot seem to get the value. I am aware that the documented way is to use the direct useState setter function, but that's not always going to be the use case. For example, I'm trying to set the value in a Storybook story:

// Table.stories.tsx

const Template: ComponentStory<typeof OrderHistoryTable> = (args) => {
  const [{ sorting }, updateArgs] = useArgs();

  // const [sorting, setSorting] = useState<SortingState>([]);

  const onSortChange: OnChangeFn<SortingState> = (val) => {
    updateArgs({ sorting: val() });
  };

  return (
    <Table
      {...args}
      sorting={sorting}
      onSortChange={onSortChange}
    />
  );
};

While I do get a value, it always seems to be the old value, and Typescript screams at me that val is not a function.

So what would be the proper way to get the standalone value here? Would it potentially make more sense to simply pass the value to these functions rather than an updater so that the user can have more control?

[Gusis93]

I think what it receives is a function, so:

 onSortingChange: (sortingUpdater) => {
   const newSortVal = sortingUpdater(oldSortingVal);
   onSortChange(newSortVal);
},

I got confused by this as well for a while but this is how I made it work with a reducer instead of a state, no idea why it works directly with a state setter but not with other states like a reducer

[kpervin]

Right. What I'm proposing is that we also have the ability to receive the value AS WELL AS an updater function so that devs can choose how to store their state. At present, it limits state to only useState setter functions, unless I'm missing something (docs are a little incomplete atm).

Speaking of, how are you getting the old value? Just passing the reducer state value, or are you grabbing it from the table instance?

[Gusis93]

Reducer state value, in the end its the same, the reducer state value goes directly into the table state

[0xMALVEE]

how to get the oldSortingVal

[tannerlinsley]

You should be sending the updater to something that can apply it correctly, but if you really want to get the new value yourself, you can use table's exported functionalUpdater function like this:

const newValue = functionalUpdate(updater, oldValue)

[tannerlinsley]

The easiest support is a useState's setState function, which supports sending in an updater function (prevValue => newValue) or simply the new value for a full replacement (newValue). So essentially anything that applies the logic of functionalUpdate:

https://github.com/TanStack/table/blob/beta/packages/table-core/src/utils.ts#L14-L18

[tannerlinsley]

Here's an example of using a reducer:

export function myReducer<T>(state, action) {
  if (action.type === 'updater') {
    return typeof action.updater === 'function'
      ? action.updater(state)
      : action.updater
  }
}

onSortingChange: updater => {
  dispatch({ type: 'updater', updater })
}

[Gusis93]

Yeah I just thought a reducer would be easier to handle as you can have all the state under the same roof and organize it with the dispatchers

[tannerlinsley]

Yep. It's built to be flexible enough to apply anywhere. Especially with the functional update utility:

export function myReducer<T>(state, action) {
  if (action.type === 'updater') {
    return functionalUpdate(action.updater, state)
  }
}

onSortingChange: updater => {
  dispatch({ type: 'updater', updater })
}

[marcebdev]

Why, this is blown to bits once you use something like say RHF to control the input for selected rows, which play into a larger form (say your form is formatted as a table)

If I get an onChange fn from RHF, all I need is the key of the new selection to be bubbled up. All that is really needed is to add a parameter

onRowSelectionChange: (updater, [key, selected]) => {
  field.onChange({ ...ICanTakeCareOfThisCurrentValMyselfFromTheForm, key: selected })
}

Why make the functions so strict to state updaters instead of making them more like ordinary events and then allowing updaters to be used for simplicity? Am I missing something here, saying this is not good practice is tone deaf imo

Either way, this is still very unclear in the docs years later had to find this thread in an issue to figure out the solution

onRowSelectionChange={(val) => {
  const newValue = functionalUpdate(
    val,
    getValues('selectedMappings'),
  )
  field.onChange({ target: { value: newValue } })
}}

[ak274]

It's very confusing how sorting change event works took me good 30 mins to understand this.

[ZeldOcarina]

I read this whole thread and I am even more confused now..

[ZeldOcarina]

Ok this works for me even if it's on the client:

React.useEffect(() => {
    table.setSorting((sortingState) => {
      return [
        ...sortingState,
        {
          id: "createdAt",
          desc: true,
        },
      ];
    });
  }, [table]);

[skarnl]

I would really hope this would get better documentation. Costed me a while until I found this thread and the solutions within.

What would've helped me was just a short snippet with how to get the onPagination value without having to use the useState function.

I eventually came up with the following:

import { functionalUpdate } from '@tanstack/react-table';

and when implementing:

const customOnPaginationChangeHandlerFunction = (value) => {
   console.log(value.pageIndex);
   console.log(value.pageSize);

   //call a callbackFunction to notify "outside" about the change
}

const tableInstance = useReactTable({
   //... all your configuration
   onPaginationChange: (updaterFunction) => {
     const newValue = functionalUpdate(updaterFunction, currentPaginationValue);
     customOnPaginationChangeHandlerFunction(newValue)
   }
});

☝️ the trick was calling the functionalUpdate function with the given updaterFunction and the current value (which you have to keep track of yourself, apparently)

We have this wrapped in our own React-component, so wanted to manage our own state outside of the table - instead of having a useState inside it

[0xMALVEE]

how can I get the currentSortingValue to pass in functionalUpdate

[jessewriter]

@0xMALVEE the current value would be saved as a useState in the same component that you created the react table. and it is shared with the tables state. you create it, like
const [pagination, setPagination] = useState(defaultPagination)
and then in the initialization of useReactTable({ state: {pagination, ...} ) // simplified options there are many more, just to show pagination

[jessewriter]

this is my very easy solution to just getting the updated value in order for me to save it to the cloud for a saved preference

  const myCustomSortHandler = (x) => {
    const updateValue = x(sorting))
    setSorting(x)
  }

all you have to do is supply the existing state from your useState in this case [ sorting, setSorting ] = useState()

and then add to your tanstack table options
onSortingChange: myCustomSortHandler ,

i was really confused when i console logged x for a while, but it works if you give it the correct previous state value

[KevinVandy]

This is not entirely correct, and can lead to errors if you assume that x/updater is always a function. Follow the docs advice here: https://tanstack.com/table/latest/docs/framework/react/guide/table-state#2-updaters-can-either-be-raw-values-or-callback-functions

[jessewriter]

Kevin thanks for the warning. On all my testing so far it has been an updater function, with or without initial values.

1. can you explain under what circumstances the updater does not return a function?
2. from a DX developer experience when I ask for a handler it would be nice to just get the updated value. the examples i've seen adding a new hook and importing functionalUpdater seem overly complex and a lot of added code. This comes off as confusing when we get a handleChange event.

so it seems I just need to add a check if( typeof function) or use functionalUpdate as skarnl pointed out.
so to my 'easy' solution I will just add 'functionalUpdate'

import  {functionalUpdate} from '@tanstack/react-table'

  const [sorting, setSorting] = useState(defaultSorting) // set default sort col and direction
  // add pagination to useReactTable state, onSortingChage: myCustomSortHandler ... options
  const myCustomSortHandler = (updateFunction) => {
    const updateValue = functionalUpdate(updateFunction(sorting))
// use updateValue in my code, can still pas updateFuction to useState or use updateValue think its same either way.
    setSorting(updateFunction)
  }