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 — property assignment or chainable setter
ws.column(0).width = 200;
ws.column('A').setWidth(200);          // A1-style label also accepted
const w = ws.column(0).width;          // 200

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

Low-level getters

// Read current width / height
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

Structural changes go through the worksheet.rows / worksheet.columns collections:

// Insert 2 rows starting at row 3 (existing rows shift down)
ws.rows.insertAt(2, 2);

// Delete 3 rows starting at row 5
ws.rows.deleteAt(4, 3);

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

// Delete 2 columns starting at column D
ws.columns.deleteAt(3, 2);

You can also use a single RowHandle / ColumnHandle when working relative to a specific row/column:

ws.row(2).insertAbove(2);     // 2 new rows above row 3
ws.row(10).insertBelow();     // 1 new row after row 11
ws.row(4).delete();           // delete row 5

ws.column('B').insertBefore();  // 1 new column before B
ws.column(3).insertAfter(2);    // 2 new columns after D
ws.column(3).delete();          // delete column D

Insert and delete operations automatically update cell references in formulas.

Show & hide

// Per row/column via handles
ws.row(2).hide();
ws.row(2).show();
ws.column('B').hide();
ws.column('B').show();

// Property form
ws.row(2).hidden = true;
const hidden = ws.row(2).hidden;     // boolean

// Bulk via collections
ws.rows.hide(2, 3);                  // hide rows 2,3,4
ws.rows.show(2, 3);
ws.columns.hide(1, 2);               // hide columns B,C
ws.columns.setHidden([1, 5, 7], true);  // hide arbitrary indices

// Read-only checks (still on worksheet)
const rowHidden = ws.isRowHidden(2);
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.rowCount);    // 200
console.log(ws.columnCount); // 30

// Or via the collection
console.log(ws.rows.count);    // 200
console.log(ws.columns.count); // 30

You can also change row count or column count independently via the collections:

// Change row count only (columns unchanged)
ws.rows.setCount(500);

// Change column count only (rows unchanged)
ws.columns.setCount(50);

Use ws.setGridSize(rows, cols) when you need to change both axes atomically — it fires a single structure-change event instead of two.

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();