Borders

ReoGrid Web lets you apply borders to any range of cells. You can control the line style, color, width, and which sides receive the border.

RangeHandle API

Use range().border() to set borders on a range.

const ws = grid.worksheet;

// Border on all sides of a range
ws.range('A1:D5').border({ style: 'solid', color: '#000000' });

// Specific sides only
ws.range('A1:D1').border(
  { style: 'solid', color: '#1e40af', width: 2 },
  ['bottom']
);

// Multiple sides
ws.range('A1:D5').border(
  { style: 'solid', color: '#d1d5db' },
  ['top', 'bottom', 'left', 'right']
);

BorderLineOptions

Border sides

When sides is omitted, borders are applied to all outer edges of the range.

Low-level API

setRangeBorder

Sets borders on a range using row/column indices.

ws.setRangeBorder(
  0, 0, 4, 3,  // topRow, leftColumn, bottomRow, rightColumn
  { style: 'solid', color: '#000000' },
  ['top', 'bottom']  // omit for all sides
);

applyCellBorders

Sets borders on individual cells in bulk using a Map.

const borders = new Map();
borders.set('0,0', {
  top: { style: 'solid', color: '#000000' },
  bottom: { style: 'solid', color: '#000000' },
});
ws.applyCellBorders(borders);

getCellBorder

const border = ws.getCellBorder(0, 0);
// { top?: BorderLine, bottom?: BorderLine, left?: BorderLine, right?: BorderLine }

Typical pattern — table with header

const ws = grid.worksheet;

// Header underline (thick)
ws.range('A1:E1').border(
  { style: 'solid', color: '#1e3a5f', width: 2 },
  ['bottom']
);

// Separator lines for data rows
for (let r = 2; r <= 10; r++) {
  ws.range(`A${r}:E${r}`).border(
    { style: 'solid', color: '#e5e7eb' },
    ['bottom']
  );
}

// Outer frame
ws.range('A1:E10').border(
  { style: 'solid', color: '#1e3a5f', width: 2 }
);