New RowsGroup plugin: merge cells vertically (rowspan)

New RowsGroup plugin: merge cells vertically (rowspan)

ashl1ashl1 Posts: 18Questions: 5Answers: 1

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
    ],
    });
«1

Replies

  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin

    Awesome - thanks for sharing this with us!

    Allan

  • Pierce KrousePierce Krouse Posts: 40Questions: 8Answers: 1

    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.

  • imTomoimTomo Posts: 1Questions: 0Answers: 0

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

  • justStevejustSteve Posts: 49Questions: 8Answers: 1

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

  • ashl1ashl1 Posts: 18Questions: 5Answers: 1
    edited 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 KrousePierce Krouse Posts: 40Questions: 8Answers: 1

    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 KrousePierce Krouse Posts: 40Questions: 8Answers: 1

    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!

  • smassotsmassot Posts: 28Questions: 9Answers: 1

    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 KrousePierce Krouse Posts: 40Questions: 8Answers: 1

    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?

  • rpratiwiharjarpratiwiharja Posts: 2Questions: 0Answers: 0

    Hi Pierce,

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

  • ashl1ashl1 Posts: 18Questions: 5Answers: 1
    edited 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

  • rpratiwiharjarpratiwiharja Posts: 2Questions: 0Answers: 0

    Hi Ashl1.

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

  • bcrouzybcrouzy Posts: 9Questions: 3Answers: 1

    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 !

  • ashl1ashl1 Posts: 18Questions: 5Answers: 1

    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.

  • bcrouzybcrouzy Posts: 9Questions: 3Answers: 1

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

  • mightyspecmightyspec Posts: 5Questions: 1Answers: 0

    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.

  • mightyspecmightyspec Posts: 5Questions: 1Answers: 0

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

  • mightyspecmightyspec Posts: 5Questions: 1Answers: 0

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

  • dan4istdan4ist Posts: 1Questions: 0Answers: 0
    edited 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

  • ShaibaazSShaibaazS Posts: 7Questions: 3Answers: 0
    edited 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

  • moponcianomoponciano Posts: 1Questions: 0Answers: 0

    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

  • PhonegapdemoPhonegapdemo Posts: 1Questions: 0Answers: 0

    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

  • nikhilsheth2049nikhilsheth2049 Posts: 17Questions: 4Answers: 0

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

  • zibbuzibbu Posts: 2Questions: 0Answers: 0
    edited December 2018

    Hello,

    Actually, I generate my table with Sqllite's data and i use only this js code :smile: 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
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

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

    Kevin

  • zibbuzibbu Posts: 2Questions: 0Answers: 0

    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

  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin

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

    Allan

  • rathinam90rathinam90 Posts: 1Questions: 0Answers: 0

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • jonatan280792jonatan280792 Posts: 1Questions: 0Answers: 0

    Hello how do you install in angular

    Thank you

Sign In or Register to comment.