Cascading dropdown columns in Tabulator JS

Question

I am new to the Tabulator JS library and I stumbled upon an issue. I have 2 columns and I am trying to find a way to implement cascading dropdowns in each row. The second column value options are dependent on the first column value selection. What would be an easy way of doing it?

Expected results:

User selects Color in the first column and then he should see Blue & Yellow in the second column dropdown list of that row.
User selects Style in the first column and then he should see S1 & S2 in the second column dropdown list of that row.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <script>
        $(function () {
            var tabledata = [{ Need: "1",Surface:"" }];
            var NeedOptionSet = {};
            NeedOptionSet["1"] = "Color";
            NeedOptionSet["2"] = "Style";
            var SurfaceOptionSet_Color = {};
            SurfaceOptionSet_Color["1"] = "Blue";
            SurfaceOptionSet_Color["2"] = "Yellow";
            var SurfaceOptionSet_Style = {};
            SurfaceOptionSet_Style["1"] = "Bold";
            SurfaceOptionSet_Style["2"] = "Underline";
            var table = new Tabulator("#example-table", {
                height: 400, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
                data: tabledata, //assign data to table
                layout: "fitColumns", //fit columns to width of table (optional)
                pagination: "local",
                paginationSize: 15,
                paginationSizeSelector: [15, 25, 35],
                addRowPos: "top",
                columns: [ //Define Table Columns
                    {
                        title: "Need", field: "Need", editor: "autocomplete", editorParams: {
                            showListOnEmpty: true,
                            freetext: true,
                            values: NeedOptionSet
                        }, formatter: 'lookup', formatterParams: NeedOptionSet

                    },
                    {
                        title: "Surface", field: "Surface", editor: "autocomplete", editorParams: {
                            showListOnEmpty: true,
                            freetext: true,
                            values: SurfaceOptionSet_Color
                        }, formatter: 'lookup', formatterParams: SurfaceOptionSet_Color
                    }
                ]
            });

        });


    </script>

</head>
<body>
    
    <div id="example-table"></div>

</body>
</html>

Answer 1

Tabulator has a built in Context Menu system for bringing up cascading menus.

If you want them on each row then you should use the rowContextMenu option.

var table = new Tabulator("#example-table", {
    rowContextMenu:[
        {
            label:"Delete Row",
            action:function(e, row){
                row.delete();
            }
        },
        {
            label:"Sub Menu" //sub menu
            menu:[
                {
                    label:"Do Something"
                    action:function(e, column){
                        //do something
                    }
                },
            ]
        },
});

If you want the values of each menu to change then you can pass a callback to the rowContextMenu property that is called each time the menu is loaded, it should return the menu array as outline above:

var table = new Tabulator("#example-table", {
    rowContextMenu: function(component, e){
        //component - column/cell/row component that triggered the menu
        //e - click event object

        var menu = [];

        if(!component.getData().approved){
            menu.push({
                label:"Approve User",
                action:function(e, column){
                    component.update({"approved":true});
                }
            })
        }else{
            menu.push({
                label:"Unapprove User",
                action:function(e, column){
                    component.update({"approved":false});
                }
            })
        }

        return menu;
    }
});

Full details can be found in the Context Menu Documentation

Cascading dropdown columns in Tabulator JS

Question

1 answers

solution1
0 2020-12-19 10:52:39

Cascading dropdown columns in Tabulator JS

Question

1 answers

solution1 0 2020-12-19 10:52:39

solution1
0 2020-12-19 10:52:39