New RowsGroup plugin: merge cells vertically (rowspan)

ashl1 · August 2015

Hi, all!
I've created the new Plugin as a replacement for old fnFakeRowspan (http://datatables.net/plug-ins/api/fnFakeRowspan) plugin. It works both for standalone and server-side processing. Now it has several drawbacks but will be implemented in future.

Now it:

Supports nested multi grouping rows
Works with standalone
Works with server side processing
Initial order initialization for not groupped columns
Support change order while running (also multi-columns with 'Shift' button)

Please try it Live at http://live.datatables.net/bodanole/1/

and Fork or make Feature request at Github https://github.com/ashl1/datatables-rowsgroup

Example usage:

var data = [
    ['subgroupN', 'Group1', 'sub-subgroupN', 'ElementN', '2Element N'],
    ['subgroup1', 'Group2', 'sub-subgroup1', 'Element1', '2Element 1'],
    ['subgroup2', 'Group2', 'sub-subgroup1', 'Element1', '2Element 1'],
    ['subgroup2', 'Group2', 'sub-subgroup1', 'Element2', '2Element 2'],
    ['subgroup2', 'Group2', 'sub-subgroup2', 'Element3', '2Element 2'],
    ['subgroup2', 'Group2', 'sub-subgroup2', 'Element4', '2Element 4'],
    ['subgroup2', 'Group2', 'sub-subgroup2', 'Element2', '2Element 2'],
    ['subgroup3', 'Group1', 'sub-subgroup1', 'Element1', '2Element 1'],
    ['subgroup3', 'Group1', 'sub-subgroup1', 'Element1', '2Element 1'],
    ['subgroup2', 'Group2', 'sub-subgroup2', 'Element1', '2Element 1'],
    ['subgroup4', 'Group2', 'sub-subgroup2', 'Element1', '2Element 1'],
    ['subgroup4', 'Group2', 'sub-subgroup3', 'Element10', '2Element 17'],
    ['subgroup4', 'Group2', 'sub-subgroup3', 'Element231', '2Element 211'],
  ];
var table = $('#example').DataTable({
    columns: [
        {
            title: 'First group',
        },
        {
            name: 'second',
            title: 'Second group [order first]',
        },
        {
            title: 'Third group',
        },
        {
            title: 'Forth ungrouped',
        },
        {
            title: 'Fifth ungrouped',
        },
    ],
    data: data,
    rowsGroup: [// Always the array (!) of the column-selectors in specified order to which rows groupping is applied
                // (column-selector could be any of specified in https://datatables.net/reference/type/column-selector)
        'second:name',
        0,
        2
    ],
    });

allan · August 2015

Awesome - thanks for sharing this with us!

Allan

Pierce Krouse · September 2015

Wow, this is excellent! It even works with the FixedColumns plugin, giving me exactly the functionality I need.

I did notice one unexpected side effect though. With this plugin, if I turn off sorting with "bSort": false, my grouped columns on the left get slightly messed up with a double line under them. This only appears when FixedColumns is being used. If I set bSort to false, merge my left column and do not fix that column in place, it all looks perfect.

I am in this position because something about the sorting routine cannot handle the data I have in my tables. I am not too surprised by this because my table cells have tables in them in many cases. Not a big deal since my users are only using this as a static viewer, and have never been given sorting functionality, anyway.

Just thought you might want to know about the anomaly though. I can set up a live example if it helps.

imTomo · October 2015

I got Uncaught RangeError: Maximum call stack size exceeded,when using this plugin. And I have no idea what is wrong.

justSteve · October 2015

The pastebin is expired. Would love to see this in action.

ashl1 · October 2015

Pierce Krouse

Could you please provide Live example through http://live.datatables.net ?

imTomo

What configuration do you use? Could you please provide Live example through http://live.datatables.net when the error appears?

justSteve

Try to fix it. Please check again (refresh page if needed)

Pierce Krouse · October 2015

Sorry Ashl1, I didn't see this request until just now. Since my application doesn't use sorting yet, I left it on and renamed the sorting functions in the javascript library. I know, hack city. I'll get a live example up in the next few days.

Pierce Krouse · October 2015

You know what? I can't replicate the problem now. There were other problems in my html that caused misalignment issues, with and without using fixedColumns. Once I got those fixed I thought I would get back into this problem. Maybe the changes that fixed my alignment also fixed this? Who knows. It's working now though!

smassot · October 2015

Wonderful, exactly what I need to do simply. Juste got a JQuery error when activate it :

TypeError: a is undefined

but not really a problem, I have to watch what is the problem but thanks a lot for this awesome plugin :)

Pierce Krouse · November 2015

Hey Ashl1, I am having problems using this plug-in combined with search functionality.
When rows are removed, things can sometimes go out of whack.

Jsfiddle is here: http://jsfiddle.net/mjpt3c9h/

If you search on the value min, you'll see what I mean. The first column (mode_norm.OC_WC.RC_MAX_1) disappears.

Note that I have special row filtering functionality to add soon, so I will be implementing my own search functionality soon using the datatables rows API. In that case, is there some call I should make to make sure things are straight once I hide the rows using my own code?

rpratiwiharja · January 2016

Hi Pierce,

I'm having the same problem as you. Have you found the solution yet?

ashl1 · March 2016

Hello to all.

smassot
It seems that problem might be in your code. Could you provide an example on http://jsfiddle.net or http://live.datatables.net ?

Pierce Krouse
rpratiwiharja
The fix will be available in version 2.0.0. Check the new version on https://github.com/ashl1/datatables-rowsgroup/ I'm also implemented manual DataTable.rowsgroup.update() method to be executed if showed rows are changed. Look in README

rpratiwiharja · March 2016

Hi Ashl1.

It works great now!! Thanks a lot for the update..

bcrouzy · May 2016

Great plugin thanks !

But how can we make a subtotal by group ? I have only one column with rowgroup and I want to display a subtotal under each group, but I didn't find an example with your plugin.
Thanks a lot !

ashl1 · May 2016

bcrouzy

Short answer: you couldn't do that with plugin.

This plugin is only about DISPLAYING, not calculating anything like aggregate functions for the GROUP BY SQL operator.
You should manually calculate required information.

bcrouzy · May 2016

Ok it's done !
Thanks for your reply ! And thanks again for this plugin !! :)

mightyspec · August 2016

Hi ashl1,

Thank you for this plugin!

I have one small issue integrating this plugin with a dropdown in my page. I'm using the datatable along with this rowsGroup plugin. I also have a dropdown in my page which filters the rows based on one column. So, when the selected value in dropdown is ALL it works fins, but when the selected value is one cells value then the result says "No matching records found". Please suggest.

mightyspec · August 2016

I found the solution for above mentioned problem. I needed to trim the space before the data in the cell in order to filter.

mightyspec · August 2016

Where do I get the minified js file of this plugin?

dan4ist · March 2017

The old plugin link does not work when trying to use it for multiple tables on a single page. Use the updated 2.0.0 code on his gihub page

https://github.com/ashl1/datatables-rowsgroup/blob/master/dataTables.rowsGroup.js

ShaibaazS · June 2017

Hi Ash1,
Thanks for the Plugin. It works perfectly.
I wanted to add color to the groups created after merging rows.
I want to be able to distinguish between the groups and its sub-groups, which I have been able to achieve using "rowsgroup plugin" but want wanted to add style to it for a more better view.
I have tried but could only achieve applying css on 'rows'.
If you can tell me, if modfying in your ".js" can help me out.

Thanks,
Shaibaaz

moponciano · July 2017

Hi Ash1,

This Plugin just saved my day!

Now I'm having trouble integrating it with dataTables.bootstrap.js .
The pagination its ok, but only stay at the first page. When i click in any other page number, nothing changes.
Could you help me?

Thanks,
Mônica

Phonegapdemo · September 2017

I m using Rowspan functionality as define here but i have to load 1M records in the grid so can u please suggest how i can implement same functionality on server side so that i can decrease grid load

nikhilsheth2049 · May 2018

I used "rowsGroup" plugin. When I try to reinit table the merged rows height will be changes to highest value of row height.

zibbu · December 2018

Hello,

Actually, I generate my table with Sqllite's data and i use only this js code to print it

$(document).ready(function(){
    var supervision = $('#example').DataTable(
        {
        "pageLength": 50,
        "stateSave":true,
        "order":[[2,"asc"],[4,"asc"]],
        "pagingType":"full_numbers",
        "info":true
        }
    );
});

How can I use this plugin to rowspan my first column only if i have same data in this column ?
I lookin' about a solution

Line1 / Data 1 / Data 2
Line1 (rowspan with other 'Line1') / Data 3 / Data 4
Line2 / Data 5 / Data 6
Line3 / Data 7 / Data 8
Line3 (rowspan with other "Line 3") / Data 9 / Data 10

kthorngren · December 2018

Datatables doesn't support rowspan or colspan in the tbody. The Rowgroup extension may do what you want.

Kevin

zibbu · December 2018

Yeah that's work fine but that add a rowgroup line for all results.
I need to see this RowGroupline only if i have more than 1 duplicate data.
And also, i need to hide this data if i have more than 2 duplicate data

allan · December 2018

Those are not features of the RowGroup extension at the moment I'm afraid.

Allan

rathinam90 · June 2019

Rowsgroup is working and pagination also is working. But the rowsgroup working in first page only. If am clicking any other page, no changes.
Can you help me?

Thanks,
Rajarathinam

colin · June 2019

Hoi @rathinam90 ,

Rowsgroup is a third-party extension - we only release RowGroup. It would be worth asking the developer if it's still being supported.

Cheers,

Colin

jonatan280792 · July 2019

Hello how do you install in angular

Thank you

New RowsGroup plugin: merge cells vertically (rowspan)

New RowsGroup plugin: merge cells vertically (rowspan)

Replies

Howdy, Stranger!

Categories

DataTables

New RowsGroup plugin: merge cells vertically (rowspan)

New RowsGroup plugin: merge cells vertically (rowspan)

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables