Virtual Column Reordering: How We Move Millions of Cells in O(1) Time

When a user drags a column across a spreadsheet, the UI creates a smooth visual illusion: entire vertical blocks of data sliding across the screen to settle into a new location.

If you build this naive way, moving column B to position F in a 100,000-row spreadsheet means physically updating 100,000 separate data entries in memory.

In Reclit, we do not touch a single cell when a column moves. Instead, we use virtual column reordering.

The Naive Approach: Cell-Level Mutation

In a basic implementation, reordering a column requires looping through every single row in the data grid and shifting array elements or updating object keys:

// Naive approach: Modifying every row (O(N) operations)
function moveColumnNaive(grid, oldIndex, newIndex) {
  for (let row = 0; row < grid.length; row++) {
    const cell = grid[row].splice(oldIndex, 1)[0];
    grid[row].splice(newIndex, 0, cell);
  }
}