Row & Column Operations

ReoGrid Web provides a full set of operations for managing rows and columns — resizing, inserting, deleting, hiding, and auto-fitting.

Resizing

ColumnHandle / RowHandle

const ws = grid.worksheet;

// Column width
ws.column(0).width = 200;
const w = ws.column(0).width; // 200

// Row height
ws.row(0).height = 40;
const h = ws.row(0).height; // 40

Low-level API

// Set individually
ws.setColumnWidth(0, 200);
ws.setRowHeight(0, 40);

// Get
const width = ws.getColumnWidth(0);
const height = ws.getRowHeight(0);

Batch setting

// Set multiple column widths at once
ws.applyColumnWidths(new Map([
  [0, 150],  // Column A
  [1, 100],  // Column B
  [2, 200],  // Column C
]));

// Set multiple row heights at once
ws.applyRowHeights(new Map([
  [0, 40],   // Row 1
  [5, 30],   // Row 6
]));

Auto-fit

Automatically adjusts column widths and row heights to fit cell contents.

// Auto-fit all columns
ws.autoFitColumns();

// Specific columns only
ws.autoFitColumns({ columns: [0, 1, 2] });

// Respect manually set widths
ws.autoFitColumns({ respectCustomWidth: true });

// Auto-fit rows
ws.autoFitRows();
ws.autoFitRows({ rows: [0, 1, 2] });

Insert & delete

// Insert rows (insert 2 rows before row 3)
ws.insertRows(2, 2);

// Delete rows (delete 3 rows starting from row 5)
ws.deleteRows(4, 3);

// Insert columns (insert 1 column before column B)
ws.insertColumns(1, 1);

// Delete columns (delete 2 columns starting from column D)
ws.deleteColumns(3, 2);

Insert and delete operations automatically update cell references in formulas.

Show & hide

// Hide a row
ws.setRowHidden(2, true);

// Hide multiple rows at once
ws.setRowsHidden([2, 3, 4], true);

// Show a row
ws.setRowHidden(2, false);

// Check hidden status
const hidden = ws.isRowHidden(2); // boolean

// Hide/show columns
ws.setColumnHidden(1, true);
ws.setColumnsHidden([1, 2], true);
ws.setColumnHidden(1, false);
const colHidden = ws.isColumnHidden(1);

Changing grid size

Change the number of rows and columns.

ws.setGridSize(200, 30); // 200 rows x 30 columns

// Current size
console.log(ws.rows);    // 200
console.log(ws.columns); // 30

Getting the visible range

Get the currently visible range based on the scroll position.

// Visible row range
const rowRange = ws.getVisibleRowRange();
console.log(rowRange.start, rowRange.end);

// Visible column range
const colRange = ws.getVisibleColumnRange();
console.log(colRange.start, colRange.end);

// Actual visible row indices (excluding hidden rows)
const visibleRows = ws.getVisibleRowIndices();

Property reference

// Array of all column widths (read-only)
const widths: readonly number[] = ws.columnWidths;

// Array of all row heights (read-only)
const heights: readonly number[] = ws.rowHeights;

// Header sizes
const headerWidth = ws.headerColumnWidth;   // Width of the left header
const headerHeight = ws.headerRowHeight;    // Height of the top header

Example: invoice layout

const ws = grid.worksheet;

ws.suspendRender();

// Set column widths
ws.column(0).width = 40;   // No.
ws.column(1).width = 200;  // Item name
ws.column(2).width = 80;   // Quantity
ws.column(3).width = 100;  // Unit price
ws.column(4).width = 120;  // Amount

// Header row height
ws.row(0).height = 50;

// Data row heights
for (let r = 1; r <= 10; r++) {
  ws.row(r).height = 28;
}

ws.resumeRender();