Programmatically Adjusting Column Positions

Demonstrate how to programmatically change the order of columns in React TanStack Table using the 'setColumnOrder' method provided by 'useColumnOrder' hook.
import { useTable, useColumnOrder } from '@tanstack/react-table';
First, import the necessary hooks from '@tanstack/react-table'.
const columns = React.useMemo(() => [...], []);
Define your columns array using the useMemo hook to avoid recalculations on re-renders.
const data = React.useMemo(() => [...], []);
Similarly, define your table data with the useMemo hook.
const tableInstance = useTable({ columns, data }, useColumnOrder);
Create the table instance and apply the useColumnOrder hook to enable column ordering functionalities.
const { setColumnOrder } = tableInstance;
Destructure the setColumnOrder function from the table instance. This function allows us to programmatically adjust the column order.
const reorderColumns = () => {
  const newOrder = [...]; // Your new column order here
Define a function that reorders columns. You should provide it with the new desired column order.