@supertab/supertab-beta

Supertab

This repository contains Vue component which provides additional features for tabulator regarding filtering, sorting, UI etc.

Description:

Component provides additional step in column filtering, filter operation can be selected (eg. contains, greater or equal etc.). It provides columns layout and selected filters saving to local storage (last selected filters and columns layout are saved automatically). Multi-column sort and columns toggling are also supported.

Column customization

Supertab reads column configuration from headerFilterParams column property.

Column option	Short description	Value type	Available values
columnType	Column value type	int	1 (TEXT), 2 (NUMERIC), 3 (SELECT), 4 (DATETIME), 5 (BOOLEAN)
defaultFilter	Default filter type which will be pre-selected	string	startsWith, greaterOrEqual, lowerOrEqual, eq, neq, contains, notContains, endsWith, included, notIn
isRange	Enable filter by range	boolean	false is default
values	Option is used to show available options in case column is filtered by SELECT option	array[]	[{text: 'Option 1', value: 1}]

Package installation:

npm install @supertab/supertab-beta

Configuration

Plugin initialization

Initialize supertab plugin in main.js

import SupertabPlugin from '@supertab/supertab-beta'

Vue.use(SupertabPlugin, {
  locale: 'sr'
 })

NOTE: Currently supported english (en) and serbian (sr) plugin localization.

One-time auth configuration

If getting data for table requeires authorization, configure methods for retrieving refresh and access token, setting access token and refresh token API endpoint.

Vue.use(SupertabPlugin,
  {
    locale: 'sr',
    refreshTokenUrl: 'http://localhost:8080/api/example/token/refresh',
    getRefreshToken: getRefreshToken,
    getAccessToken: getAccessToken,
    setAccessToken: setAccessToken,
    isValidUser: isUserActive
  }
)

Supertab component configuration

Configuration which can be passed to Supertab component as props is listed bellow:

Prop	Short description	Type	Requeired
ref	Access component through refs	string	Yes
refName	Represents name of component ref. Same value like ref attribute	string	Yes
supertabKey	Unique table key	string	Yes
data	Data for table	Array	Yes
options	Table configuration	Object	Yes
layouts	Array of predefined layouts and filters	Array	No

<Supertab ref='tabulator' refName='tabulator' supertabKey='localTabulator' v-bind:data="data" v-bind:options="tabulatorOptions" class="tabulator-root" ></Supertab>

Basic example:

Tabulator options example:

tabulatorOptions: {
    layout: 'fitColumns',
    responsiveLayout: true,
    pagination: 'local',
    resizableColumns: 'header',
    layoutColumnsOnNewData: true,
    ajaxFiltering: false,
    ajaxSorting: false,
    paginationSizeSelector: [10, 25, 50],
    paginationSize: 10,
    columns: [
        {
            title: 'Name',
            field: 'name',
            headerSort: true,
            headerFilterParams: {
                columnType: ColumnFilterType.TEXT,
                defaultFilter: 'contains'
            },
            hozAlign: 'left',
            cssClass: 'multi-line-cell'
        },
        {
            title: 'Change in % (last 24h)',
            field: 'percent_change_24h',
            headerSort: true,
            hozAlign: 'left',
            headerFilterParams: {
                columnType: ColumnFilterType.NUMERIC,
                defaultFilter: 'greaterOrEqual'
            },
            visible: false
        },
        {
            title: 'Category',
            field: 'category',
            headerSort: true,
            hozAlign: 'left',
            formatter: (cell, formatterPatern, renderer) => {
                if (cell.getValue() === 1) {
                    return 'Category One'
                }
                if (cell.getValue() === 2) {
                    return 'Category Two'
                }
                if (cell.getValue() === 3) {
                    return 'Category Three'
                }
                return 'Category Unknown'
            },
            headerFilterParams: {
                columnType: ColumnFilterType.SELECT,
                values:
                [
                    {
                        text: 'Category 1',
                        value: 1
                    },
                    {
                        text: 'Category 2',
                        value: 2
                    },
                    {
                        text: 'Category 3',
                        value: 3
                    }
                ]
            },
            visible: false
        }
    ]
}

NOTE: Attribute supertabKey must be unique per application due it is used to store tabulator filters, layouts and sorts by this key.

Predefined filters and layouts: Multiple predefined filters and layouts can be defined through the configuration. Predefined filters and layouts should be passed as attribute value to Supertab component (:layouts attribute). JSON contains 2 arrays under filter and layout name with keys columns and filters. Under columns, put array which represents tabulator columns configuration with main properties (field, title, headerSort, hozAlign, visible). Under filters, put array of objects with following properties: field, title, inputFilterType, inputFilterValue. inputFilterType uses value from one of available filter codes startsWith, greaterOrEqual, lowerOrEqual, eq, neq, contains, notContains, endsWith, included, notIn.

Example of predefined filters and layout:

{
'Layout/filter name': {
    columns: [
        {
            field: 'id',
            title: 'Id',
            headerSort: true,
            hozAlign: 'left',
            visible: true
        },
        {
            field: 'name',
            title: 'Name',
            headerSort: true,
            hozAlign: 'left',
            visible: true
        },
        {
            field: 'category',
            title: 'Category',
            headerSort: true,
            hozAlign: 'left',
            visible: false
        }
    ],
    filters: [
        {
            title: 'Name',
            field: 'name',
            inputFilterType: 'notContains',
            inputFilterValue: 'coin'
        },
        {
            title: 'Category',
            field: 'category',
            inputFilterType: 'included',
            inputFilterValue: [
                1,
                2
            ]
        }
    ]
},
'Another filter': {
    columns: [],
    filters: [
        {
            title: 'Name',
            field: 'name',
            inputFilterType: 'contains',
            inputFilterValue: 'coin'
        },
        {
            title: 'Category',
            field: 'category',
            inputFilterType: 'included',
            inputFilterValue: [
                2
            ]
        }
    ]
}

Initial filters: To setup initial filters for each column set initialFilters property inside headerFilterParams property. initialFilters value should be type of Object, where property names are names of filter operations and values of those properties are filter values.

Example columns options with initial filters:

tabulatorOptions: {
    layout: 'fitColumns',
    responsiveLayout: true,
    pagination: 'local',
    resizableColumns: 'header',
    layoutColumnsOnNewData: true,
    ajaxFiltering: false,
    ajaxSorting: false,
    paginationSizeSelector: [10, 25, 50],
    paginationSize: 10,
    columns: [
        {
            title: 'Id',
            field: 'id',
            headerSort: true,
            headerFilterParams: {
              columnType: ColumnFilterType.NUMERIC,
              defaultFilter: 'contains',
              initialFilters: {
                included: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
              }
            },
            hozAlign: 'left'
        },
        {
            title: 'Name',
            field: 'name',
            headerSort: true,
            headerFilterParams: {
              columnType: ColumnFilterType.TEXT,
              defaultFilter: 'contains',
              initialFilters: {
                contains: 'coin'
              }
            },
            hozAlign: 'left',
            cssClass: 'multi-line-cell'
        }
    ]
}

Filters format sent to backend:

Operation	Query string format
Greater or equal	columnName=gte.filterValue
Lower or equal	columnName=lte.filterValue
Equal	columnName=eq.filterValue
Not equal	columnName=neq.filterValue
Contains	columnName=cs.filterValue
Not contains	columnName=ncs.filterValue
Ends with	columnName=enw.filterValue
Starts with	columnName=stw.filterValue
Included	columnName=in.(filterValue1, filterValue2, ...)
Not Included	columnName=nin.(filterValue1, filterValue2, ...)

More resources:

NPM package page

Scripts

Examples (screenshots)