How to collapse and expand the table based on multiple columns grouping.
For example I have table like this
---------------------------------------------------------------
location | size | cont_no | price | depot | cond |
---------------------------------------------------------------
USA | XX | 123 | 230 | SED | LK |
USA | YY | 343 | 330 | ASD | HK |
UAE | XX | 233 | 230 | SED | LK |
IND | ZZ | 123 | 230 | SAD | FK |
IND | XX | 213 | 430 | ASD | KK |
IND | YY | 433 | 870 | GFD | FK |
USA | YY | 865 | 230 | SED | LK |
UAE | XX | 976 | 430 | SED | HK |
USA | ZZ | 342 | 230 | CCD | HK |
UAE | XX | 132 | 445 | SED | KK |
UAE | ZZ | 064 | 323 | YYD | LK |
IND | YY | 452 | 130 | ITG | HK |
---------------------------------------------------------------
This is how I need to group the above table
-------------------------------
location | XX | YY | ZZ |
-------------------------------
UAE | 3 | 0 | 1 |
USA | 1 | 2 | 1 |
IND | 1 | 2 | 1 |
-------------------------------
I want to group based on location and size column, Eg: USA has 3 XX and 0 YY and 1 ZZ,
And then when i click the row i want to expand and show those 3 XX and 0 YY and 1 ZZ other four column cont_no, price, depot, cond
please someone help me or give me some suggestion or link for reference.
Thank you
How to collapse and expand the table based on multiple columns grouping.
For example I have table like this
---------------------------------------------------------------
location | size | cont_no | price | depot | cond |
---------------------------------------------------------------
USA | XX | 123 | 230 | SED | LK |
USA | YY | 343 | 330 | ASD | HK |
UAE | XX | 233 | 230 | SED | LK |
IND | ZZ | 123 | 230 | SAD | FK |
IND | XX | 213 | 430 | ASD | KK |
IND | YY | 433 | 870 | GFD | FK |
USA | YY | 865 | 230 | SED | LK |
UAE | XX | 976 | 430 | SED | HK |
USA | ZZ | 342 | 230 | CCD | HK |
UAE | XX | 132 | 445 | SED | KK |
UAE | ZZ | 064 | 323 | YYD | LK |
IND | YY | 452 | 130 | ITG | HK |
---------------------------------------------------------------
This is how I need to group the above table
-------------------------------
location | XX | YY | ZZ |
-------------------------------
UAE | 3 | 0 | 1 |
USA | 1 | 2 | 1 |
IND | 1 | 2 | 1 |
-------------------------------
I want to group based on location and size column, Eg: USA has 3 XX and 0 YY and 1 ZZ,
And then when i click the row i want to expand and show those 3 XX and 0 YY and 1 ZZ other four column cont_no, price, depot, cond
please someone help me or give me some suggestion or link for reference.
Thank you
Share Improve this question edited Aug 26, 2015 at 20:49 marc_s 756k184 gold badges1.4k silver badges1.5k bronze badges asked Jul 1, 2015 at 10:25 Jonathan JohnJonathan John 1952 gold badges4 silver badges12 bronze badges 1- This sounds like something that would be easier using two different tables, and hiding/showing tables and columns depending on the user interaction – Alvaro Montoro Commented Jul 1, 2015 at 11:12
3 Answers
Reset to default 1I think this is what your trying to make !
check the following question and answer
DataTables hidden row details example - the table header is misplaced (test case attached)
JSFIDDLE Sample 1
JSFIDDLE Sample 2
It could be done as shown in Row details example.
The trick would be to pre-process the data and perform the calculations and grouping with JavaScript before giving data to DataTables. This would depend on where your data es from, static table or Ajax request. If you're producing the data on the server, this could be done server-side as well.
Basically the result data in JSON format could be as shown below. This will simplify working with child rows in DataTables.
[
{
"location": "UAE",
"XX": 2,
"YY": 0,
"ZZ": 1,
"details": [
["UAE","XX","123","230","SED","LK"],
// more records for the same location
]
},
// more locations
]
you can hack your way through other libs. will it worth the effort??.
or you can use Tabulator. which has multi column grouping.
example :
//load data as json
var tableData = [
{id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
{id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
{id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
{id:6, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
]
var table = new Tabulator("#example-table", {
height:"311px",
layout:"fitColumns",
groupBy:function(data){
return data.gender + " - " + data.age; //groups by data and age
},
autoColumns:true,
});
table.setData(tableData);<script src="https://unpkg./[email protected]/dist/js/tabulator.min.js"></script>
<link href="https://unpkg./[email protected]/dist/css/tabulator.min.css" rel="stylesheet"/>
<div id="example-table"></div>
the only table lib that can group by multi col is Tabulator, AFAIK.
here are the other table libs.
-------- group by -------
single column | multi column
tabulator : yes | yes
bootstrap-table : yes | no
datatables : yes | no
dynatable.js : no | no
tabulator has bootstrap , simple white theme:
- theme overview : http://tabulator.info/docs/4.1/theme
- live view themes : http://tabulator.info/examples/4.1?#theming
read more:
- http://tabulator.info/docs/4.2/group
- https://datatables/examples/advanced_init/row_grouping.html
- https://examples.bootstrap-table./index.html#extensions/group-by-v2.html