Adding an Excel-Like Table Slicer to Your JavaScript Application with No Code

The latest release of SpreadJS added a very powerful feature: Table Slicers. In their basic form they are column filters represented as button collections. Click a button, filter the data by that value. Pictured below is the view that I will create in this article. Table Slicer Table slicers in the SpreadJS Designer filtering data by Category and Sub-Category. These are very common in Excel, but they only work with PivotTables. SpreadJS takes the slicer concept to the next level by giving you a way to add a slicer to your data sets without using PivotTables. You can even create custom slicers with controls, such as range sliders and range check boxes, but this article will just cover the basics. This article will show you how to add a slicer to a data set in the SpreadJS designer and without using code. To keep it simple, I will start with a data table in the designer. In the real world, you would likely want to bind a data source. If you would like to follow along, I have included the data in an Excel spreadsheet. Download it here. Open it (File > Open) in the designer to load it. In order to include slicers in your data view, you need to define a table. The file linked above has a table, but it is also very easy to define your own using the Format Table toolbar button. Format Table Button The Format Table feature in the SpreadJS Designer works much like Excel’s Format as Table feature. When you click your table, the Design Tab will automatically open on the Ribbon toolbar. Click the Insert Slicer button and select the columns you would like to filter (Category and Sub-Category in my case). Using the insert slicer feature. Using the insert slicer feature. When you click OK, your slicers will appear on the page. You can drag them anywhere you would like as well as configure preferences, group styles, and button styles using the buttons found on the Ribbon toolbar. When you have a view you like, use File > Export > Export JavaScript file that you can then use to load into an instance of the SpreadJS widget on a web page. Export SpreadJS JavaScript Exporting a data view. That is all you need to do for a basic table slicer, but you can go much deeper by using the API. See the “SpreadJS Table Slicer” post by Gina Daniels for an introduction on implementing and configuring slicers in code. You are also not limited to the controls you see in the default slicer. You can create your own with sliders, checkboxes, drop-downs and more as you see in the screen shot below. You can even filter data with charts! Custom Slicer A customer slicer applied to a data set. For deep-dive tutorials and more samples, find the Slicers section in the SpreadJS tutorial site.


GrapeCity Developer Tools
comments powered by Disqus