Column & Row Resize

Spreadsheet supports resizing columns and rows by dragging borders. Drag the right border of a column header to resize the column, or drag the bottom border of a row number cell to resize the row. Both operations are undoable via ResizeColumnCommand and ResizeRowCommand.

Live Demo

Drag column header borders to resize. ID column is locked. Row borders in the row-number gutter can also be dragged.

View source code

ResizeDemo.tsx

import { Spreadsheet } from '@witqq/spreadsheet-react';
import type { ColumnDef } from '@witqq/spreadsheet';
import { DemoWrapper } from './DemoWrapper';
import { generateEmployees } from './generate-data';
import { useSiteTheme } from './useSiteTheme';

const data = generateEmployees(50);

const resizableColumns: ColumnDef[] = [
  { key: 'id', title: 'ID', width: 60, type: 'number', resizable: false },
  {
    key: 'name',
    title: 'Name (resizable)',
    width: 160,
    minWidth: 80,
    maxWidth: 400,
    resizable: true,
  },
  { key: 'department', title: 'Department', width: 130, minWidth: 60, resizable: true },
  { key: 'salary', title: 'Salary', width: 100, type: 'number', minWidth: 60, resizable: true },
  { key: 'city', title: 'City', width: 120, minWidth: 60, maxWidth: 300, resizable: true },
  { key: 'startDate', title: 'Start Date', width: 110, type: 'date', resizable: true },
  { key: 'active', title: 'Active', width: 70, type: 'boolean', resizable: true },
];

export function ResizeDemo() {
  const { witTheme } = useSiteTheme();
  return (
    <DemoWrapper
      title="Live Demo"
      description="Drag column header borders to resize. ID column is locked. Row borders in the row-number gutter can also be dragged."
      height={440}
    >
      <Spreadsheet
        theme={witTheme}
        columns={resizableColumns}
        data={data}
        showRowNumbers
        style={{ width: '100%', height: '100%' }}
      />
    </DemoWrapper>
  );
}

Column resize respects ColumnDef.minWidth and ColumnDef.maxWidth constraints. Row resize is bounded between 12px minimum and 400px maximum.

Resizable Columns

Enable resize per-column through ColumnDef.resizable:

import { Spreadsheet } from '@witqq/spreadsheet-react';

const columns: ColumnDef[] = [
  { key: 'id', title: 'ID', width: 60, resizable: false },
  { key: 'name', title: 'Name', width: 200, minWidth: 100, maxWidth: 400, resizable: true },
  { key: 'email', title: 'Email', width: 250, minWidth: 150, resizable: true },
];

function App() {
  return (
    <Spreadsheet
      columns={columns}
      data={data}
    />
  );
}

Resize Events

Listen to resize lifecycle events via the engine’s EventBus:

import { useRef, useEffect } from 'react';
import { Spreadsheet } from '@witqq/spreadsheet-react';
import type { SpreadsheetRef } from '@witqq/spreadsheet-react';

function App() {
  const ref = useRef<SpreadsheetRef>(null);

  useEffect(() => {
    const engine = ref.current?.getInstance();
    if (!engine) return;

    engine.on('columnResizeEnd', (event) => {
      // Persist new width to backend
      saveColumnWidth(event.colIndex, event.newWidth);
    });
    engine.on('rowResizeEnd', (event) => {
      saveRowHeight(event.rowIndex, event.newHeight);
    });
  }, []);

  return <Spreadsheet ref={ref} columns={columns} data={data} />;
}

API Reference

ColumnResizeManager

Handles column width changes with constraints from ColumnDef:

• minWidth — Minimum column width in pixels (default: 30)
• maxWidth — Maximum column width in pixels (default: unlimited)
• resizable — Whether the column can be resized (default: true)

RowResizeManager

Handles row height changes:

• Minimum height: 12px
• Maximum height: 400px

Both managers create undoable commands, so Ctrl+Z reverts a resize operation.