Brisk Table

is universal and easy to use JavaScript library that displays any data in a table format

Getting started quickly

To get started quickly

just copy code from next slide below to see result immidiately

<body>
    <script type="text/javascript">
        function dataProviderFunction() {
            var data = [{
                    "firstName": "John",
                    "lastName": "Smith",
                    "age": 30,
                    "cellPhone": "+000123456789"
                },
                {
                    "firstName": "Medie",
                    "lastName": "Lorn",
                    "age": 50,
                    "cellPhone": "+000987654321"
                },
                {
                    "firstName": "Olsom",
                    "lastName": "Clarke",
                    "age": 42,
                    "cellPhone": "+005678901234"
                }];
                
            return data;
        }
    </script>
    <div class="brisk-table" 
        data-provider-function="dataProviderFunction"
        data-json-path="$"
    ></div>
    <script src="https://rawgit.com/deepidea/brisk-table/master/brisk-table.js"></script>
</body>

Basic UI features

Brisk Table will automatically display all columns from received json table data

Brisk Table will automatically support:

paging
sorting
filtering in all fields

(see examples below)

Paging

Picture example

you can change number of rows per page or set default values for pagin in CSS

<style type="text/css">
    .tableConfig {
        --header-toolbar-height: 35;
        --header-column-height: 30;
        --row-height: 26;
        --rows-per-page: 5;
        --rows-size-list: 5, 10;
    }
</style>

Sorting

Picture example

Filtering

Picture example

Try it yourself

Customising table columns

What if you want to display only some of the fields with custom column names?

Not a problem!

(next next slide below for examples)

<div class="brisk-table tableConfig"
     data-json-path="$..teachers"

     data-custom-fields='[
         {"fieldName":"firstName","columnName":"First Name","columnWidth":10},
         {"fieldName":"lastName","columnName":"Last Name","columnWidth":60},
         {"fieldName":"age","columnName":"Age","columnWidth":10},
         {"fieldName":"cellPhone","columnName":"Cell Phone","columnWidth":330}
     ]'

     data-provider-function="dataProviderFunction"
></div>

If you have too long colums, Brisk Table can concatenate it for you

<div class="brisk-table tableConfig"
     data-json-path="$..teachers"
     data-custom-fields='[
         {"fieldName":"firstName","columnName":"First Name","columnWidth":10},
         {"fieldName":"lastName","columnName":"Last Name","columnWidth":60},
         {"fieldName":"age","columnName":"Age","columnWidth":10},
         {"fieldName":"cellPhone","columnName":"Cell Phone","columnWidth":330}
     ]'

     data-column-text-length="30"

     data-provider-function="dataProviderFunction"
></div>

Note: filter will be applied only to concatenated part in UI

Custom hook funciton on row click/selection

You can programmically handle event when user clicks or selects a row

You can specify next attribute to define your custom function which will receive json object of selected row

<script type="text/javascript">
    function hookFunction(rowData){
        alert('\'on row selected\' hook result:' + JSON.stringify(rowData, null, 4));
    }
</script>

<div class="brisk-table tableConfig"
     data-json-path="$..teachers"
     data-custom-fields='[
         {"fieldName":"firstName","columnName":"First Name","columnWidth":10},
         {"fieldName":"lastName","columnName":"Last Name","columnWidth":60},
         {"fieldName":"age","columnName":"Age","columnWidth":10},
         {"fieldName":"cellPhone","columnName":"Cell Phone","columnWidth":330}
     ]'
     data-column-text-length="30"

     data-hook-on-row-selected="hookFunction"

     data-provider-function="dataProviderFunction"
></div>

Fetching data from remote server

Fetching data from remote server can be done in two ways:

with simple GET method endpoint
with custom dataProvider function

Let’s look at examples

<div class="brisk-table tableConfig"
     data-json-path="$..teachers"
     data-custom-fields='[
         {"fieldName":"firstName","columnName":"First Name","columnWidth":10},
         {"fieldName":"lastName","columnName":"Last Name","columnWidth":60},
         {"fieldName":"age","columnName":"Age","columnWidth":10},
         {"fieldName":"cellPhone","columnName":"Cell Phone","columnWidth":330}
     ]'
     data-column-text-length="30"

     data-url="https://raw.githubusercontent.com/deepidea/brisk-table/master/json-server-db/db.json"

     data-hook-on-row-selected="hookFunction"
></div>

Example of custom function.

You can use any library or any HTTP method to ferch data from remote server

<script type="text/javascript">
    function ajaxDataProviderFunction(){
        return $.ajax({
            dataType: 'json',
            url: 'https://raw.githubusercontent.com/deepidea/brisk-table/master/json-server-db/db.json',
            success: function(jsonData){
                return jsonData;
            }
        });
    }
</script>

<div class="brisk-table tableConfig"
     data-json-path="$..teachers"
     data-custom-fields='[
         {"fieldName":"firstName","columnName":"First Name","columnWidth":10},
         {"fieldName":"lastName","columnName":"Last Name","columnWidth":60},
         {"fieldName":"age","columnName":"Age","columnWidth":10},
         {"fieldName":"cellPhone","columnName":"Cell Phone","columnWidth":330}
     ]'
     data-column-text-length="30"

     data-provider-function="ajaxDataProviderFunction"

     data-hook-on-row-selected="hookFunction"
></div>

*Please pay attention that we’re returning asynchronous method which returns data when making async call

Use of custom json path in json data

You can return array in json object or fetch data from any field of json object

<div class="brisk-table tableConfig"
     data-custom-fields='[
         {"fieldName":"firstName","columnName":"First Name","columnWidth":10},
         {"fieldName":"lastName","columnName":"Last Name","columnWidth":60},
         {"fieldName":"age","columnName":"Age","columnWidth":10},
         {"fieldName":"cellPhone","columnName":"Cell Phone","columnWidth":330}
     ]'
     data-column-text-length="30"

     data-json-path="$"

     data-hook-on-row-selected="hookFunction"
     data-url="https://raw.githubusercontent.com/deepidea/brisk-table/master/json-server-db/db.json"
></div>

<div class="brisk-table tableConfig"
     data-custom-fields='[
         {"fieldName":"firstName","columnName":"First Name","columnWidth":10},
         {"fieldName":"lastName","columnName":"Last Name","columnWidth":60},
         {"fieldName":"age","columnName":"Age","columnWidth":10},
         {"fieldName":"cellPhone","columnName":"Cell Phone","columnWidth":330}
     ]'
     data-column-text-length="30"

     data-json-path="$..students"

     data-hook-on-row-selected="hookFunction"
     data-url="https://raw.githubusercontent.com/deepidea/brisk-table/master/json-server-db/db.json"
></div>

json:
{
    "teachers": [
        {
            "firstName": "John",
            "lastName": "Smith",
            "age": 30,
            "cellPhone": "+000123456789"
        },
        {
            "firstName": "Medie",
            "lastName": "Lorn",
            "age": 50,
            "cellPhone": "+000987654321"
        },
        {
            "firstName": "Olsom",
            "lastName": "Clarke",
            "age": 42,
            "cellPhone": "+005678901234"
        },
        {
            "firstName": "Simon",
            "lastName": "Peres",
            "age": 39,
            "cellPhone": "+006789012345"
        }
    ],
    "students": [
        {
            "firstName": "Jukone",
            "lastName": "Mildret",
            "age": 18,
            "cellPhone": "+008754223678"
        },
        {
            "firstName": "Andre",
            "lastName": "Jokuw",
            "age": 21,
            "cellPhone": "+009945612345"
        },
        {
            "firstName": "Guta",
            "lastName": "Amira",
            "age": 20,
            "cellPhone": "+005484327853"
        },
        {
            "firstName": "Park",
            "lastName": "Suzzie",
            "age": 19,
            "cellPhone": "+003874562984"
        }
    ]
}

refresh data function on demand

You have an option to refresh data and dispay refreshed data on demand

<button onclick="jsonTableFunctions.refresh('1')">Click to refresh table</button>

<div class="brisk-table tableConfig"
     id="1"
     data-json-path="$..teachers"
     data-custom-fields='[
         {"fieldName":"firstName","columnName":"First Name","columnWidth":10},
         {"fieldName":"lastName","columnName":"Last Name","columnWidth":60},
         {"fieldName":"age","columnName":"Age","columnWidth":10},
         {"fieldName":"cellPhone","columnName":"Cell Phone","columnWidth":330}
     ]'
     data-column-text-length="30"
     data-hook-on-row-selected="hookFunction"
     data-provider-function="dataProviderFunction"
></div>

Checkboxes

It is also easy to enable checkboxes to get selected rows

<div class="brisk-table tableConfig"
     id="1"
     data-json-path="$..teachers"
     data-custom-fields='[
         {"fieldName":"firstName","columnName":"First Name","columnWidth":10},
         {"fieldName":"lastName","columnName":"Last Name","columnWidth":60},
         {"fieldName":"age","columnName":"Age","columnWidth":10},
         {"fieldName":"cellPhone","columnName":"Cell Phone","columnWidth":330}
     ]'
     data-column-text-length="30"

     data-show-checkboxes="true"

     data-hook-on-row-selected="hookFunction"
     data-provider-function="dataProviderFunction"
></div>

To fetch selected rows use next function

<script type="text/javascript">
    function fetchSelectedRows(id){
        let selectedRows = briskTableFunctions.fetchSelectedRows(id);

        alert('\'fetch selected rows\' hook result:' + JSON.stringify(selectedRows, null, 4));
    }
</script>

<button onclick="fetchSelectedRows('1')">Click to fetch selected rows</button>

You can click on “select all” on filtered data which will select all filtered rows

The same appliesto for unselect logic

Troubleshooting

Having issues?

First place to check is the console in developer mode of browser

If you’re fetching json data and html with Brisk Table library from different servers

you will need to add HTTP headers to support cross origin (“Access-Control-Allow-Origin” header on server side)

See more details here Wikipedia

Coming improvements

add checkbox state icon for partially selected/unslected rows
custom sort logic for numbers and data (at the moment data sorted as strings)
requested improvements by you

Created by:

Alex Gandzha
Pavel Kulakovsky

Brisk Table

Getting started quickly

Basic UI features

Customising table columns

Custom hook funciton on row click/selection

Fetching data from remote server

Use of custom json path in json data

refresh data function on demand

Checkboxes

Troubleshooting

Coming improvements

DeepIDEA