How to Toggle Gridlines and Hide the Filter Icon in FlexSheet in React

Background

Wijmo FlexSheet renders gridlines through cell borders in the control’s DOM. In React, you can toggle those gridlines dynamically by storing a reference to the FlexSheet control and adding or removing a custom CSS class from its host element.

Steps to Complete

1. Install and import the required Wijmo packages.
2. Create the data source for the FlexSheet.
3. Store the FlexSheet instance when it initializes.
4. Toggle a CSS class on the FlexSheet host element.
5. Render button and add CSS rules to hide gridlines and the filter icon.

Getting Started

Install and import the required Wijmo packages

npm install @mescius/wijmo @mescius/wijmo.react.grid.sheet @mescius/wijmo.styles

import React, { useCallback, useRef, useState } from 'react';
import '@mescius/wijmo.styles/wijmo.css';
import * as wijmo from '@mescius/wijmo';
import { FlexSheet, Sheet } from '@mescius/wijmo.react.grid.sheet';

import './styles.css';

• The grid.sheet package provides the React FlexSheet and Sheet components. The core wijmo package provides helper methods such as toggleClass and hasClass.

Create the data source for the FlexSheet

function getData(count) {
  const countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
  const data = [];

  for (let i = 0; i < count; i++) {
    const condition = Boolean(Math.floor(Math.random() + 0.5));

    data.push({
      id: i,
      country: countries[i % countries.length],
      downloads: Math.random() * 100000,
      mixed: condition
        ? ''
        : countries[Math.floor(Math.random() * countries.length)],
      checked: condition
    });
  }

  return data;
}

• This creates sample data that can be bound directly to a FlexSheet sheet through the itemsSource property.

Store the FlexSheet instance when it initializes

export default function App() {
  const [source] = useState(() => getData(20));
  const flexSheetRef = useRef(null);

  const initSheet = useCallback(sheet => {
    flexSheetRef.current = sheet;
  }, []);

  return (
    <div className="App">
      <FlexSheet initialized={initSheet}>
        <Sheet itemsSource={source} name="Sheet 1" />
      </FlexSheet>
    </div>
  );
}

• The initialized callback gives access to the FlexSheet control instance. Storing it in a React ref allows button handlers to access the control after it has rendered.

Toggle a CSS class on the FlexSheet host element

const noGridCss = 'no-grid';

const toggleGridLines = useCallback(() => {
  const flexSheet = flexSheetRef.current;

  if (flexSheet) {
    const host = flexSheet.hostElement;
    wijmo.toggleClass(host, noGridCss, !wijmo.hasClass(host, noGridCss));
  }
}, []);

• The hostElement is the root DOM element for the FlexSheet. Adding or removing the no-grid class lets CSS control whether gridlines are visible.

Render button and add CSS rules to hide gridlines and the filter icon

export default function App() {
  const [source] = useState(() => getData(20));
  const flexSheetRef = useRef(null);

  const initSheet = useCallback(sheet => {
    flexSheetRef.current = sheet;
  }, []);

  const toggleGridLines = useCallback(() => {
    const flexSheet = flexSheetRef.current;

    if (flexSheet) {
      const host = flexSheet.hostElement;
      wijmo.toggleClass(host, 'no-grid', !wijmo.hasClass(host, 'no-grid'));
    }
  }, []);

  return (
    <div className="App">
      <FlexSheet initialized={initSheet}>
        <Sheet itemsSource={source} name="Sheet 1" />
      </FlexSheet>

      <button onClick={toggleGridLines}>Show/Hide Grid</button>
    </div>
  );
}

.wj-flexsheet {
  height: 500px;
}

.no-grid.wj-flexsheet .wj-cells .wj-cell {
  border: none;
}

.no-grid.wj-flexsheet .wj-colheaders .wj-cell .wj-elem-filter {
  display: none;
}

• The first CSS rule gives the FlexSheet a visible height. The second rule removes cell borders when the no-grid class is applied. The third rule hides the filter icon in the column headers while the same class is active.

With this React setup, you can remove the gridlines and the filter icons from your FlexSheet. If you want to hide the filter icon all the time, remove the .no-grid prefix from the last selector.

Happy coding!