Column Resizing

Drag column borders to resize columns interactively.

Name

Department

Salary

100 rows · Drag column borders to resize

Enable resizing and add a drag handle to each header:

const { columnSizing } = useVirtualTable({
  data,
  columns,
  enableColumnResizing: true,
  columnResizeMode: 'onChange',
});

// Add resize handle to header:
<div
  onMouseDown={header.getResizeHandler()}
  style={{ cursor: 'col-resize' }}
/>

Option	Type	Default
`enableColumnResizing`	`boolean`	false
`columnResizeMode`	`’onChange’ \| ‘onEnd'`	'onChange’
`columnSizing`	`ColumnSizingState`	—