Skip to main content Skip to footer

How to Add Borders in FlexSheet

To set a cell border in FlexSheet you can use the applyCellsStyle method. This method takes a cell style and cell range as parameters.

The cell style is an object you need to define, this is done like this:

// apply right border
cellStyle = {
  borderRightColor: 'red',
  borderRightStyle: 'Solid',
};

The cell range are the cells you would like to add the border style to. This is done by using the CellRange method and inputting the 4 parameters, the first row, the index of the first column, the index of the last row, the index of the last column. In this example, I use FlexSheet's selection object:

let excelIOSheet = new wjFlexSheet.FlexSheet('#excelIOSheet');

let sel = excelIOSheet.selection;

let borderRange = new wjGrid.CellRange(
  sel.topRow,
  sel.leftCol,
  sel.bottomRow,
  sel.leftCol
);

If done correctly, your border should now be visible. Additionally, you can adjust cell styles with more than just borders and style however you like to meet your app requirements.

Borders Added on Cells Screenshot

Hope this helped!

Happy coding!

Andrew Peterson

Technical Engagement Engineer