Adding FlexSheet Cell Borders in React

Background:

To set a cell border in Wijmo FlexSheet, you can use the applyCellsStyle method. This method takes a cell style object and a cell range as parameters. In React, you can wire this up from a button click handler or based on the current selection in the FlexSheet.

Steps to Complete:

1. Define a cell style object with border properties.
2. Create a CellRange to specify the cells where the border will be applied.
3. Call applyCellsStyle on the FlexSheet instance with the style and range.

Getting Started:

Define a cell style object with border properties

This creates an object that defines specific border attributes (color, style, width) for the sides of a cell.

const borderStyle = {
  borderRightColor: 'red',
  borderRightStyle: 'Solid',
  borderRightWidth: '1px'
};

• You can also use borderTopColor, borderBottomStyle, borderLeftWidth, etc., to control borders on different sides of the cell.

Create a CellRange to specify the cells where the border will be applied

This specifies the area of the sheet to which the style will be applied. The range is typically derived from the FlexSheet’s current selection.

import * as wjcGrid from '@mescius/wijmo.grid';

// Get the current selection
const sel = flexSheet.selection;

// Build a range covering the selection
const borderRange = new wjcGrid.CellRange(
  sel.topRow,
  sel.leftCol,
  sel.bottomRow,
  sel.rightCol
);

• A CellRange defines the rectangular area (top/left to bottom/right) where the style will be applied.

Call applyCellsStyle on the FlexSheet instance with the style and range

Call the FlexSheet’s applyCellsStyle method using the style object and range, which visually renders the borders in the UI.

flexSheet.applyCellsStyle(borderStyle, [borderRange]);

File for Context

import { useRef } from 'react';
import { FlexSheet } from '@mescius/wijmo.react.grid.sheet';
import * as wjcSheet from '@mescius/wijmo.grid.sheet';
import * as wjcGrid from '@mescius/wijmo.grid';

export default function BorderExample() {
  const flexSheetRef = useRef<wjcSheet.FlexSheet | null>(null);
  const data = getDemoData();

  const addBorders = () => {
    const flexSheet = flexSheetRef.current;
    if (!flexSheet) return;

    // 1) Define border style
    const borderStyle = {
      borderRightColor: 'red',
      borderRightStyle: 'Solid',
      borderRightWidth: '1px'
    };

    // 2) Create a range from selection
    const sel = flexSheet.selection;
    const borderRange = new wjcGrid.CellRange(
      sel.topRow,
      sel.leftCol,
      sel.bottomRow,
      sel.rightCol
    );

    // 3) Apply the style
    flexSheet.applyCellsStyle(borderStyle, [borderRange]);
  };

  return (
    <>
      <button onClick={addBorders}>Add Borders</button>
      <FlexSheet
        initialized={sheet => (flexSheetRef.current = sheet)}
        itemsSource={data}
      />
    </>
  );
}

function getDemoData() {
  return [
    { A: 'Apple', B: 'Banana', C: 'Cherry' },
    { A: 'Apricot', B: 'Blueberry', C: 'Cranberry' }
  ];
}

With this React setup, you can apply custom borders to any selected range within a FlexSheet, allowing you to visually highlight or separate data just like in a spreadsheet application.

Happy coding!