Integrating Sortable Columns in a Virtual Table

Show how to add sortable columns to a virtualized table created with TanStack Virtual, including the setup of event handlers for column headers to trigger sorting operations and re-rendering of the table data based on the selected sort order.

const [data, setData] = useState(originalData);

Initialize state for your table data.

const [sortBy, setSortBy] = useState(null);

Keep track of the current sort column and direction.

const sortData = (field) => {
  const sortedData = [...data].sort((a, b) => {
    if (a[field] < b[field]) return sortBy === 'ASC' ? -1 : 1;
    if (a[field] > b[field]) return sortBy === 'ASC' ? 1 : -1;
    return 0;
  });
  setData(sortedData);
  // Toggle sort direction
  setSortBy(sortBy === 'ASC' ? 'DESC' : 'ASC');
};

Function to sort the data based on the selected column field and toggle sort direction.

const handleSort = (field) => () => {
  sortData(field);
};

Wrapper function for sortData to be used as click handler with closure to remember the field.

<div>{headers.map(header => (
  <div onClick={handleSort(header.field)}>{header.name}</div>
))}</div>

Render column headers with click event listeners for sorting. Replace this JSX code into your component's return statement where you render the table headers.