The information for rowFilter and the checked state on the filter dialog of SheetTable are synchronized with the filter result of Slicers attached with TableSlicerData. All of the slicers (attached with TableSlicerData) receive the onFilter notice and get the filtered result after the SheetTable filters completely with code or the filter dialog.
You can use TableSlicerData as follows:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
<div class="options-container">
<div id="cityContainer" class="sample-group"></div>
<div id="sexContainer" class="sample-group"></div>
</div>
</div>
</template>
<script setup>
import '@mescius/spread-sheets-vue';
import '@mescius/spread-sheets-slicers';
import { ref } from "vue";
import GC from "@mescius/spread-sheets";
const initSpread = (spread) => {
let sheet = spread.getActiveSheet();
// Define data source.
let columnNames = ["Name", "Sex", "City", "Birthday"],
data = [
["Bob", "Man", "NewYork", "1968/06/08"],
["Betty", "Woman", "Washington", "1972/07/03"],
["Alice", "Woman", "Atlanta", "1964/03/02"],
["Tom", "Man", "Houston", "1986/12/03"],
["Jenny", "Woman", "Washington", "1956/10/13"],
["Nacy", "Woman", "NewYork", "1989/01/14"],
["John", "Man", "Houston", "1995/01/01"],
["Mark", "Man", "Atlanta", "1965/11/11"],
["Susan", "Woman", "Atlanta", "1983/07/08"]
];
// Create a table.
let table = sheet.tables.addFromDataSource("table1", 1, 1, data);
table.setColumnName(0, columnNames[0]);
table.setColumnName(1, columnNames[1]);
table.setColumnName(2, columnNames[2]);
table.setColumnName(3, columnNames[3]);
sheet.getRange(-1, 1, -1, 6).width(80);
// Get TableSlicerData from table.
let slicerData = table.getSlicerData();
// Create a custom slicer and add it to dom tree.
let slicer1 = new CustomSlicer(document.getElementById("cityContainer"), 'City');
slicer1.setData(slicerData, "City");
let slicer2 = new CustomSlicer(document.getElementById("sexContainer"), 'Sex');
slicer2.setData(slicerData, "Sex");
}
class CustomSlicer {
constructor(container, name) {
this.container = container;
this.name = name;
this.slicerData = null;
this.columnName = null;
}
setData(slicerData, columnName) {
this.slicerData = slicerData;
this.columnName = columnName;
this.slicerData.attachListener(this);
this.onDataLoaded();
}
onDataLoaded() {
let columnName = this.columnName,
exclusiveData = this.slicerData.getExclusiveData(columnName);
// Create slicer dom tree.
let strong = document.createElement('strong');
strong.innerText = this.name + ':';
let br = document.createElement('br');
this.container.appendChild(strong);
this.container.appendChild(br);
let domString = "",
id;
let div = document.createElement('div');
div.setAttribute('class', 'option-group')
for (let i = 0; i < exclusiveData.length; i++) {
id = columnName + (i + 1);
domString += '<input type="checkbox" name="' + columnName + '" value="' + exclusiveData[i] + '" id="' + id + '" checked>';
domString += '<label for="' + id + '">' + exclusiveData[i] + '</label></br>';
}
div.innerHTML = domString;
this.container.appendChild(div);
// Attach events to dom element.
let self = this;
document.querySelector('.options-container').addEventListener('change', function (e) {
// Invoke getExclusiveData method to get exclusive data from slicerData.
let exclusiveData = self.slicerData.getExclusiveData(self.columnName);
// parent = this.parentNode.parentNode;
let items = document.querySelectorAll('.options-container input');
let indexes = [];
for (let i = 0, length = items.length; i < length; i++) {
if (items[i].checked) {
let value = items[i].value;
if (!isNaN(parseInt(value))) {
value = parseInt(value);
}
if (exclusiveData.indexOf(value) != -1) {
indexes.push(exclusiveData.indexOf(value))
}
}
}
if (indexes.length === 0) {
// Invoke doUnfilter method when all item are not selected.
self.slicerData.doUnfilter(self.columnName);
} else {
// Invoke doFilter method when any item is selected.
self.slicerData.doFilter(self.columnName, {
exclusiveRowIndexes: indexes
});
}
});
}
}
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: auto;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
label {
display: inline-block;
margin: 6px 0;
}
strong {
display: inline-block;
margin: 12px 0;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-slicers': 'npm:@mescius/spread-sheets-slicers/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
