Javascript based excel slicer

Slicer-JS

Provide the Excel slicer capability to websites. Simple implementation to help filter table or datasets using visual feedback.

Dependencies

• jQuery (3.4.1) - so I don't need to worry about cross browser issues LOL
• jQuery-UI (1.12.1) - for resize and draggable (cause HTML5 drag-n-drop scares me)
• Bootstrap (4.0.0) - mainly used for theoption
• FontAwesome (5.10.0) - button icons on slicer title bar

Install

<link type="text/css" rel="stylesheet" href="../dist/css/slicer-js.min.css" />
<script type="text/javascript" src="../dist/js/slicer-js.min.js"></script>

Usage

<script type="application/javascript">
    document.addEventListener('DOMContentLoaded', function(){
        //BASIC CREATE
        (new Slicer())
                .attach({
                            container: $('#example'),
                            field: 'Position'})
                .make_editable();

        //ALL OPTIONS CREATE
        (new Slicer())
                .attach({
                            container: $('#example'),
                            dataset: null,
                            style: 'secondary',
                            title: 'Age of Staff', 
                            field: 'Age',
                            top: '100px',
                            left: '300px',
                            width: '180px',
                            height: '300px',
                            on_change: function(){
                                console.log('START save change to age')
                            },
                            on_before_change: function(){
                                console.log('STOP save change to age')
                            }
                        })
                .make_editable();
    });

</script>

Options

container

Optional

Only ommit this value (or set it to null ) if you are providing thevalue.

Container into which the slicer should be created. If no dataset is provided, it will assume the container is an HTML table and then convert it to a dataset.

field

dataset

{
   name    : "unique-name",   //string value
   header  : [...],           //array representing the header row
   rows    : [[...]],         //array of arrays representing the data rows in the table
}

title

Optional

Default : When omited it will use thevalue

Title to display for the slicer. When the title is omited it will use the field value.

width

Optional

Default : 400px

Width of slicer

height

Optional

Default : 200px

Height of slicer

top

Optional

Default : 200px

Absolute "top" position relative to the page

left

Optional

Default : 200px

Absolute "left" position relative to the page

style

on_change

function(){
   console.log('call after user selected items on slicer');
}

on_before_change

function(){
   console.log('call made before selection is applied');
}

Related

This is one of the components used in the biznous.net platform

Licence

The javascript component slicer-js is released under the MIT license