CODEWITHSUNDEEP
tabulator
MundM
MundM

Reputation: 1

Regrouping and setGroupStartOpen when table is created

On tabulator 4.4 I try to regroup a table. I have two Buttons. Button A groups by column1 and button B groups by column1 and colum2. This is working. I also want to set the groups shown open. But this seems not to work. Clicking button A all Groups should be collapsed and clicking button B groups by column1 should be expanded and groups by column 2 should be collapsed.


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

 <div id="tabulator-controls"> 
            Group by:
             <button name="groupbya" id="groupbya" onclick="group1()">
               Column A
            </button>
            <button name="groupbyb" id="groupbyb"  onclick="group2()">
               Column A+B
            </button>
        </div>

<script  language="JavaScript">


var tabledata = [    
{id:1, column1:"GroupA", column2:"GroupA1", column3:"1", column4:"1"},
{id:2, column1:"GroupA", column2:"GroupA1", column3:"2", column4:"2"},
{id:3, column1:"GroupA", column2:"GroupA2", column3:"3", column4:"3"},
{id:4, column1:"GroupA", column2:"GroupA2", column3:"4", column4:"4"},
{id:5, column1:"GroupB", column2:"GroupB1", column3:"1", column4:"1"},
{id:6, column1:"GroupB", column2:"GroupB1", column3:"2", column4:"2"},
{id:7, column1:"GroupB", column2:"GroupB2", column3:"3", column4:"3"},
{id:8, column1:"GroupB", column2:"GroupB2", column3:"4", column4:"4"},
];

var table = new Tabulator("#example-table", {
    data:tabledata, 
    height:"500px",
   placeholder:"No Data Set",
   groupClosedShowCalcs:true,
    columns:[
        {title:"Column1", field:"column1"},
        {title:"Column2", field:"column2"},
        {title:"Column3", field:"column3", bottomCalc:"sum", bottomCalcParams:{precision:0}},
        {title:"Column4", field:"column4", bottomCalc:"sum", bottomCalcParams:{precision:0}},
    ]
});

function group1(){
        table.setGroupStartOpen(false);
        table.setGroupBy("column1"); 

}

function group2(){
        table.setGroupStartOpen([true,false]);
        table.setGroupBy(["column1","column2"]); 
}

</script>

</body>

1 . Afer loading the page when I first click button A it is ok but then clicking button B groups by column 1 are not expanded.

2 . Afer loading the page when I first click button B it is ok but then clicking button A groups by column 1 are not collapsed. They are expanded.

Upvotes: 0

Views: 448

Answers (1)

Oli Folkerd
Oli Folkerd

Reputation: 8348

The setGroupStartOpen Only counts when data is loaded into the table, not after the groupBy has been changed.

You have two options in this case:

You could either reload the data into your table which would then refresh the collapse state of the grouping

Or after changing the groupBy you could call the getGroups function on the table to get an array of Group Componnents and then iterate over it and call the show or hide function on each group in turn as needed

Upvotes: 1

Related Questions