🔹 Description
Sidebar filter is usually used on consolidated pages as it is used to filter statuses, date, and the ascending and descending orders.
🔹System Dependencies
🔹 Installation
The package can be installed via npm:
npm install empower-sidebar-filter --save
Configuration
import SidebarFilter from 'empower-sidebar-filter'; .............. const sampleProps = { statusOptions: [ { value:'all-templates', label:'All templates', }, { value:'active', label:'Active', }, { value:'deactivated', label:'Deactivated', }, ], preSelectedStatus: 'active', dateFiltering: true, preSelectedDate: "2022-04-03", categoryOptions:[ { label: "Category 1", value: "categ-1", // string optional }, { label: "Category 2", value: "categ-2", // string optional }, { label: "Category 3", value: "categ-3", // string optional }, { label: "Category 4", value: "categ-4", // string optional }, ], preSelectedCategory: 'categ-2', preSelectedSort:'asc', }; const getValue = (val) => { // insert any logical functions here } .............. <div className="v2-side"> <SidebarFilter {...sampleProps} getValue={val => getValue(val)} /> </div>
🔹 Properties
Parameter | Data Type | Constraint | Description |
---|---|---|---|
statusOptions | Array | Required | This is the value label for options consist of
|
preSelectedStatus | String | Optional | This is the preselected status, can be empty or unset, value string should be based on the statusOptions provided. |
dateFiltering | Boolean | Optional | This just a toggle if the date filtering shows or not. |
preSelectedDate | String | Optional | Date string if you wish to have pre selected date, format should be "2022-04-21" |
categoryOptions | Array | Required | This is the category select, value label array same with the statusOptions, can be unset. |
preSelectedCategory | String | Optional | If you wish to have a preselected category, you can add this property, take note that it should match the value from categoryOptions props. |
preSelectedSort | String | Optional | This is a preselected sort, value can be "asc" or "desc". |
🔹 References
Repository Link: https://bitbucket.org/empowerteams/empower-sidebar-filter/src/master/
NPM Package: https://www.npmjs.com/package/empower-sidebar-filter
Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git