ItemSlicer is a slicer component and is independent from the sheet. You can add the ItemSlicer anywhere.
ItemSlicer should be used with slicer data (such as GeneralSlicerData, TableSlicerData, or slicer data that extends from GeneralSlicerData). If you use ItemSlicer with TableSlicerData, the table can also be synchronized when filtered by ItemSlicer.
You can create your own ItemSlicer as follows:
Create data source and a new GeneralSlicerData.
Get column data and build UI.
Get the filtered result and update UI.
Create an ItemSlicer, and attach it to GeneralSlicerData then append it to the DOM tree. You can also adjust the size of ItemSlicer. Now you can easily filter data with the ItemSlicer, enjoy it :-)
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
// ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-slicers";
export function AppFunc() {
React.useEffect(() => {
let columnNames = ["Name", "Class", "Gender", "Math", "English", "Total Score"];
let data = [["Student1", 1, "female", "69", "66", "135"],
["Student2", 1, "female", "99", "85", "184"],
["Student3", 1, "male", "78", "77", "155"],
["Student4", 1, "male", "54", "80", "134"],
["Student7", 2, "male", "87", "98", "185"],
["Student8", 2, "male", "78", "85", "163"],
["Student9", 2, "female", "100", "90", "190"],
["Student10", 2, "female", "68", "54", "122"],
["Student11", 2, "female", "97", "100", "197"],
["Student12", 2, "female", "81", "90", "171"],
["Student15", 2, "female", "90", "68", "158"],
["Student16", 3, "male", "86", "70", "156"],
["Student17", 3, "male", "88", "89", "177"],
["Student18", 3, "male", "54", "80", "134"],
["Student19", 3, "male", "81", "75", "156"],
["Student23", 3, "female", "78", "98", "176"],
["Student24", 3, "female", "90", "98", "188"],
["Student25", 3, "male", "60", "30", "90"],
["Student26", 3, "female", "0", "0", "0"],
["Student27", 3, "female", "100", "100", "200"],
["Student28", 3, "male", "89", "78", "167"]
];
let slicerData = new GC.Spread.Slicers.GeneralSlicerData(data, columnNames);
let onFiltered = slicerData.onFiltered;
slicerData.onFiltered = function () {
onFiltered.call(slicerData);
refreshList(slicerData);
}
let nameSlicer = new GC.Spread.Sheets.Slicers.ItemSlicer("Name", slicerData, "Name");
nameSlicer.height(200);
nameSlicer.width(180)
nameSlicer.columnCount(2);
document.getElementById('nameSlicerHost').appendChild(nameSlicer.getDOMElement());
let classSlicer = new GC.Spread.Sheets.Slicers.ItemSlicer("Class", slicerData, "Class");
classSlicer.height(200);
classSlicer.width(180)
document.getElementById('classSlicerHost').appendChild(classSlicer.getDOMElement());
initList(data, columnNames);
}, []);
return (<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<p class="desc">Click on the items in this slicer to filter by that class. You can Ctrl+Left Click to select multiple items.</p>
<div id="nameSlicerHost" class="slicer"></div>
<div id="classSlicerHost" class="slicer"></div>
</div>
</div>);
}
const initList = (data, columnNames) => {
let tableStr = '<tr>';
for (let i = 0; i < columnNames.length; i++) {
tableStr += "<th>" + columnNames[i] + "</th>";
}
tableStr += '</tr>';
for (let i = 0; i < data.length; i++) {
tableStr += "<tr>";
for (let j = 0; j < data[i].length; j++) {
tableStr += "<td>" + data[i][j] + "</td>";
}
tableStr += "</tr>";
}
let table = document.createElement('table');
table.innerHTML = tableStr;
table.border = 1;
table.cellPadding = 0;
table.cellSpacing = 0;
document.getElementById('ss').appendChild(table);
}
const refreshList = (slicerData) => {
let filteredRowIndexs = slicerData.getFilteredRowIndexes();
let trs = document.getElementsByTagName('tr');
for (let i = 0; i < slicerData.data.length; i++) {
if (filteredRowIndexs.indexOf(i) !== -1) {
trs[i + 1].style.display = '';
} else {
trs[i + 1].style.display = 'none';
}
}
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-slicers";
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
}
render() {
return (<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<p class="desc">Click on the items in this slicer to filter by that class. You can Ctrl+Left Click to select multiple items.</p>
<div id="nameSlicerHost" class="slicer"></div>
<div id="classSlicerHost" class="slicer"></div>
</div>
</div>);
}
componentDidMount() {
let columnNames = ["Name", "Class", "Gender", "Math", "English", "Total Score"];
let data = [["Student1", 1, "female", "69", "66", "135"],
["Student2", 1, "female", "99", "85", "184"],
["Student3", 1, "male", "78", "77", "155"],
["Student4", 1, "male", "54", "80", "134"],
["Student7", 2, "male", "87", "98", "185"],
["Student8", 2, "male", "78", "85", "163"],
["Student9", 2, "female", "100", "90", "190"],
["Student10", 2, "female", "68", "54", "122"],
["Student11", 2, "female", "97", "100", "197"],
["Student12", 2, "female", "81", "90", "171"],
["Student15", 2, "female", "90", "68", "158"],
["Student16", 3, "male", "86", "70", "156"],
["Student17", 3, "male", "88", "89", "177"],
["Student18", 3, "male", "54", "80", "134"],
["Student19", 3, "male", "81", "75", "156"],
["Student23", 3, "female", "78", "98", "176"],
["Student24", 3, "female", "90", "98", "188"],
["Student25", 3, "male", "60", "30", "90"],
["Student26", 3, "female", "0", "0", "0"],
["Student27", 3, "female", "100", "100", "200"],
["Student28", 3, "male", "89", "78", "167"]
];
let slicerData = new GC.Spread.Slicers.GeneralSlicerData(data, columnNames);
let onFiltered = slicerData.onFiltered;
slicerData.onFiltered = function () {
onFiltered.call(slicerData);
refreshList(slicerData);
}
let nameSlicer = new GC.Spread.Sheets.Slicers.ItemSlicer("Name", slicerData, "Name");
nameSlicer.height(200);
nameSlicer.width(180)
nameSlicer.columnCount(2);
document.getElementById('nameSlicerHost').appendChild(nameSlicer.getDOMElement());
let classSlicer = new GC.Spread.Sheets.Slicers.ItemSlicer("Class", slicerData, "Class");
classSlicer.height(200);
classSlicer.width(180)
document.getElementById('classSlicerHost').appendChild(classSlicer.getDOMElement());
initList(data, columnNames);
}
}
const initList = (data, columnNames) => {
let tableStr = '<tr>';
for (let i = 0; i < columnNames.length; i++) {
tableStr += "<th>" + columnNames[i] + "</th>";
}
tableStr += '</tr>';
for (let i = 0; i < data.length; i++) {
tableStr += "<tr>";
for (let j = 0; j < data[i].length; j++) {
tableStr += "<td>" + data[i][j] + "</td>";
}
tableStr += "</tr>";
}
let table = document.createElement('table');
table.innerHTML = tableStr;
table.border = 1;
table.cellPadding = 0;
table.cellSpacing = 0;
document.getElementById('ss').appendChild(table);
}
const refreshList = (slicerData) => {
let filteredRowIndexs = slicerData.getFilteredRowIndexes();
let trs = document.getElementsByTagName('tr');
for (let i = 0; i < slicerData.data.length; i++) {
if (filteredRowIndexs.indexOf(i) !== -1) {
trs[i + 1].style.display = '';
} else {
trs[i + 1].style.display = 'none';
}
}
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app" style="height: 100%;"></div>
</body>
</html>
.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;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
.slicer {
height: 220px;
position: relative;
}
table th,
table td {
padding: 4px 8px;
}
.desc{
padding:2px 10px;
background-color:#F4F8EB;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@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-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
