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

Background

Wijmo FlexSheet displays gridlines through cell borders. In Vue, you can access the initialized FlexSheet control instance, then dynamically add or remove a CSS class from its host element to show or hide those gridlines.

Steps to Complete

1. Install and import the required Wijmo packages.
2. Create the FlexSheet data source.
3. Add the FlexSheet markup.
4. Store the FlexSheet instance.
5. Toggle the gridline CSS class.
6. Add CSS to hide the gridlines.

Getting Started

Install and import the required Wijmo packages

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

import { ref } from 'vue';
import * as wijmo from '@mescius/wijmo';
import { WjFlexSheet, WjSheet } from '@mescius/wijmo.vue2.grid.sheet';
import '@mescius/wijmo.styles/wijmo.css';

• This imports Vue’s ref, the Wijmo helper methods, the Vue FlexSheet components, and the Wijmo stylesheet.

Create the FlexSheet data source

const data = ref(getData(20));

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 and stores it in a Vue ref so it can be bound to the FlexSheet.

Add the FlexSheet markup

<template>
  <div class="app">
    <wj-flex-sheet
      :initialized="initializeFlexSheet"
      :showFilterIcons="false">
      <wj-sheet :name="'Sheet 1'" :itemsSource="data"></wj-sheet>
    </wj-flex-sheet>

    <button type="button" @click="toggleGridLines">
      Show/Hide Grid
    </button>
  </div>
</template>

• The wj-flex-sheet component creates the FlexSheet control. The wj-sheet component binds the data source to a sheet named Sheet 1. Setting showFilterIcons to false hides the filter icons.

Store the FlexSheet instance

const flexSheet = ref(null);

function initializeFlexSheet(sheet) {
  flexSheet.value = sheet;
}

• The initialized callback provides the FlexSheet instance. Storing it lets the Vue component access the control later when the button is clicked.

Toggle the gridline CSS class

function toggleGridLines() {
  if (!flexSheet.value) {
    return;
  }

  const host = flexSheet.value.hostElement;
  wijmo.toggleClass(host, 'no-grid', !wijmo.hasClass(host, 'no-grid'));
}

• This gets the FlexSheet host element and toggles the no-grid CSS class. When the class is present, the gridlines are hidden; when it is removed, the gridlines are shown again.

Add CSS to hide the gridlines

.wj-flexsheet {
  height: 500px;
}

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

• The first rule gives the FlexSheet a visible height. The second rule removes cell borders when the no-grid class is applied.

With this Vue setup, we created a FlexSheet with a bound data source, hid the filter icons, stored the initialized FlexSheet instance, and added a button that dynamically toggles the gridlines on and off.

Happy coding!