Row grouping vertically

Row grouping vertically

svyas001svyas001 Posts: 25Questions: 2Answers: 0

https://datatables.net/examples/advanced_init/row_grouping.html

Can we do Row Group by Vertically?

Example:

This question has an accepted answers - jump to answer

«1

Answers

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961
    edited November 28

    That's a neat idea but the Datatables supplied RowGroup extension doesn't support that format. There is a RowsGroup plugin. developed by a third party that does something similar. See this example from this thread.

    It is possible the plugin doesn't work with Datatables 2 but you can try it. If you have questions or issues with the plugin you will need to contact the developer. Doesn't look like any development has happened with the plugin for 8 years. Possibly you can make the changes needed for compatibility with DT 2.

    Kevin

  • svyas001svyas001 Posts: 25Questions: 2Answers: 0

    Thank you Kevin, I have applied this code but this will not worked with responsive table.

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961
    edited November 28

    You can ask the developer about support for Responsive. Go to the github link at the first post in the thread.

    Maybe you need to move the column control like this example. Its hard to say without knowing what isn't working.

    Kevin

  • svyas001svyas001 Posts: 25Questions: 2Answers: 0
    edited November 28

    Hi Kevin,

    Thanks but my view is looks like below. My table code is like this

    var table = $('#main-table').DataTable({
        destroy: true,
        orderCellsTop: true,
        fixedHeader: true,
        pageLength: 50,
        dom: 'Bfrtip',
        buttons: {
            dom: {
                button: {
                    className: 'dt-button button-page-length btn btn-secondary'
                }
            },
            buttons: [
                {
    
                    extend: 'excelHtml5',
                    className: 'btn btn-secondary',
                    exportOptions: {
                        columns: [14, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
                    },
                    title: "",
                    filename: "All Projects List"
                },
                'pageLength'
            ]
        },
        "order": [[groupColumn, "asc"]],
        "oLanguage": {
            "sEmptyTable": "No data available."
        },
        "drawCallback": function (settings) {
            var api = this.api();
            var rows = api.rows({
                page: 'current'
            }).nodes();
    
            var columnsIndexes = api.columns(groupColumn, {
                page: 'current'
            }).indexes().toArray();
    
            var showedRowsCount = api.rows({
                page: 'current'
            })[0].length;
    
            var columnsIndexesCopy = columnsIndexes.slice();
            var currentColumn = columnsIndexesCopy.shift();
            currentColumn = api.column(currentColumn, {
                page: 'current'
            });
    
            var columnNodes = currentColumn.nodes();
            var columnValues = currentColumn.data();
            var iFinishRow = showedRowsCount - 1;
            var iStartRow = 0;
            var newSequenceRow = iStartRow, iRow;
    
          
            for (iRow = iStartRow + 1; iRow <= iFinishRow; ++iRow) {
    
                if (columnValues[iRow] === columnValues[newSequenceRow]) {
                    $(columnNodes[iRow]).hide()
                } else {
                    $(columnNodes[newSequenceRow]).show()
                    $(columnNodes[newSequenceRow]).attr('rowspan', (iRow - 1) - newSequenceRow + 1)
    
                    newSequenceRow = iRow;
                }
    
            }
            $(columnNodes[newSequenceRow]).show()
            $(columnNodes[newSequenceRow]).attr('rowspan', (iRow - 1) - newSequenceRow + 1)
    
    
            var last = null;
    
            // api.column(groupColumn, {
            //     page: 'current'
            // }).data().each(function (group, i) {
            //     if (last !== group) {
            //         $(rows).eq(i).before(
            //             '<tr class="group"><td colspan="14" id="clmBusinessUnit" style="font-weight: bold;">' + group + '</td></tr>'
            //         );
    
            //         last = group;
            //     }
            // });
        },
        initComplete: function () {
            var api = this.api();
            $("th").removeClass('sorting_asc'); //remove sorting_asc class that gets stuck on first column
            // For each column
            api
                .columns()
                .eq(0)
                .each(function (colIdx) {
                    // Set the header cell to contain the input element
                    var cell = $('.filters th').eq(
                        $(api.column(colIdx).header()).index()
                    );
                    var title = $(cell).text();
                    if ($(api.column(colIdx).header()).index() >= 0) {
                        if ($(api.column(colIdx).header()).index() == 13) {
                            $(cell).html('<input type="text" id="ReqDateRead" style="font-size:12px;" class="form-control datepicker" placeholder="MM/dd/yyyy" />');
                        }
                        else if ($(api.column(colIdx).header()).index() == 11) {
                            $(cell).html('<input type="checkbox" style="font-size:12px;" class="form-check-input filterCheckbox" name="capex" />');
                        }
                        else if ($(api.column(colIdx).header()).index() == 12) {
                            $(cell).html('<input type="text" id="lastUpdateDate" style="font-size:12px;" class="form-control datepicker" placeholder="MM/dd/yyyy" />');
                        }
                        else {
                            $(cell).html('<input type="text" class="form-control" style="font-size:12px;" placeholder="Search" />');
                        }
                    }
    
                    // On every keypress in this input
                    $(
                        'input',
                        $('.filters th').eq($(api.column(colIdx).header()).index())
                    )
                        .off('keyup change')
                        .on('change', function (e) {
                            // Get the search value
                            $(this).attr('title', $(this).val());
                            var regexr = '({search})'; //$(this).parents('th').find('select').val();
    
                            var cursorPosition = this.selectionStart;
                            // Search the column for that value
                            api
                                .column(colIdx)
                                .search(
                                    this.value != ''
                                        ? regexr.replace('{search}', '(((' + this.value + ')))')
                                        : '',
                                    this.value != '',
                                    this.value == ''
                                )
                                .draw();
                        })
                        .on('keyup', function (e) {
                            e.stopPropagation();
                            $(this).trigger('change');
                            $(this)
                                .focus()[0];
                            //.setSelectionRange(cursorPosition, cursorPosition);
                        });
                });
        },
    });
    

    Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    I don't see where you have the Responsive extension enabled. I built a simple responsive test case using the example the OP posted:
    https://live.datatables.net/bodanole/9578/edit

    I added a column for the responsive column control to allow for choosing the proper row. It also uses a modal display display as shown in this example. The reason is how RowsGroup groups the rows. Using a child row overlaps the RowsGroup rows.

    Is the code in drawCallback what you are using for the responsive table? If so then you will need to refactor the table to allow for the responsive control to land on each row. You may also need to display the hidden data in a modal like I did in my test case.

    Kevin

  • svyas001svyas001 Posts: 25Questions: 2Answers: 0

    Hi Kevin,

    I see you have updated something, is I missed anything?

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    I see you have updated something, is I missed anything?

    As my update comment states I updated your post to format the code snippet. Use triple back ticks (```) on new lines to format the code.

    Another option is for you or the author of the plugin to update it to support the responsive table in a way that works seamlessly with the plugin.

    Kevin

  • svyas001svyas001 Posts: 25Questions: 2Answers: 0

    Hi Kevin,

    Thank you for sharing the example.

    I have tried the same for my page but still the rowgroup is not working nor the responsive worked.

    https://live.datatables.net/sihicafi/1/edit

    My requirement is to display the filter into header but for this example I have remove all the part.

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    You had all the table rows in the thead so Datatables didn't find any rows. I moved them into the tbody:
    https://live.datatables.net/qiwajifu/1/edit

    Kevin

  • svyas001svyas001 Posts: 25Questions: 2Answers: 0

    Thank you Kevin.

    When I click on one of the row to open modal, I can see only the first row data, how we can see the other rows data for that group column?

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961
    edited November 28

    Responsive only shows the data of the row clicked. The RowsGroup plugin keeps the first row to use as the group and hides/removes the others in that column. As I mentioned before you will need an additional column for the responsive control. You can place the column anywhere, see this example.

    Kevin

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961
    edited November 28

    You will need to create a custom renderer if you are wanting to display all the rows in the group. Something like this example but it will need to be placed in a modal. Possibly use filter() or rows().every() with the row-selector as a function to get the rows that match the group.

    Kevin

  • svyas001svyas001 Posts: 25Questions: 2Answers: 0

    Hi Kevin,

    Thank you I am almost there.

    In this How I can do search text as Filter and display right side and below line of code is not working to set the custom text box before search text box.

    $("#dt-search").prepend(<div class="filter-date-range-picker"><input class="form-control form-control-sm" id="date_range" type="text" placeholder="Select dates" style="width: 230px; margin-right: 10px;"></div>);

    https://live.datatables.net/borijufo/1/edit

    I want to achieve this. To achieve the rawgrouping functionality vertically, I have to update the application with the latest version because rawgrouping is not working with dt-1.10.24.

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    With Datatables 2 use the layout option instead of dom to place the elements around the table. layout can be used to display custom elements. See these examples. Maybe this example will do what you want.

    Kevin

  • svyas001svyas001 Posts: 25Questions: 2Answers: 0

    Thanks Kevin,

    I have implemented the layout property but it override the search textbox.

    https://live.datatables.net/borijufo/2/edit

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    topEnd: toolbar

    It would do. If you want multiple items in the topEnd position, use an array, per the layout documentation:

    topEnd: [ toolbar, 'search' ]
    

    Allan

  • svyas001svyas001 Posts: 25Questions: 2Answers: 0

    Thanks Allan,

    But still it's not working.

    https://live.datatables.net/borijufo/2/edit

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    You've got two layout objects:

               layout: {
               topEnd: [ toolbar, 'search' ]
               },
    

    Then:

               layout: {
                  topEnd: toolbar,
                  topStart: 'buttons'
               },
    

    The second one will "win".

  • svyas001svyas001 Posts: 25Questions: 2Answers: 0

    Excellent catch Allen, thank you!

    I hope this is last question, why dtr-control arrow-right is not displaying to the last field, it is displaying into the other field. The arrow should display at the last column.

    https://live.datatables.net/borijufo/2/edit

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    It is showing in the last column. However, it is left aligned, if that is what you mean? Add:

    .dtr-control {
      text-align: right;
    }
    

    to make it right align.

  • svyas001svyas001 Posts: 25Questions: 2Answers: 0
    edited November 29

    Hi Allan,

    After applying this, it looks like this, also can we apply this arrow before Project Name column? I would like to implement this between Group column and Project Name column. Is it possible? See screenshot 2.

    https://live.datatables.net/borijufo/4/edit

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    Change the target setting of these two options to use the column you want:

            columnDefs: [
            {
                className: 'dtr-control arrow-right',
                orderable: false,
                target: 1
            }
        ],
        responsive: {
            details: {
                type: 'column',
                target: 1
            }
        },
    

    https://live.datatables.net/fagosogi/1/edit

    Kevin

  • svyas001svyas001 Posts: 25Questions: 2Answers: 0

    Thanks Kevin.

    Final one and we are good to go. Can we set the width for the columns? I have tried to do this but it doesn't worked.

    columnDefs: [
    {
    className: 'dtr-control arrow-left',
    orderable: false,
    target: 1
    },
    {

        target: 5, width: '2%'
    },
    {
    
        target: 6, width: '2%'
    },
    {
    
        target: 7, width: '5%'
    }
    

    ],
    https://live.datatables.net/fagosogi/2/edit

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961
    Answer ✓

    The search inputs are affecting the column widths. Use this CSS to reduce the input's widths:

    thead input {
            width: 100%;
        }
    

    https://live.datatables.net/mopozile/1/edit

    Kevin

  • svyas001svyas001 Posts: 25Questions: 2Answers: 0

    Thank you Kevin and Alan, you both rocks.

  • svyas001svyas001 Posts: 25Questions: 2Answers: 0

    Hi Kevin,

    When I Just rename the column name for the table header the rawgroup column is not showing. I have just rename the columns and the first column "Overall Status" is getting hide.

    https://live.datatables.net/fagosogi/3/edit

    But it is working with this columns: https://live.datatables.net/fagosogi/2/edit

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    Sorry I'm not seeing the issue. Overall Status seemd to always tsow in this test case:
    https://live.datatables.net/fagosogi/3/edit

    Please provide the exact steps to recreate the error you are seeing.

    Kevin

  • svyas001svyas001 Posts: 25Questions: 2Answers: 0

    Hi Kevin,

    Thanks, yes It was my mistake due to Javascript it doesn't worked.

    Can you please let me know why the control is not setup to the 1st column "Overall Status", I am using datatable 1 version

    https://live.datatables.net/zepuxivi/1/edit

  • svyas001svyas001 Posts: 25Questions: 2Answers: 0

    Adding point to the above question the 1st column is clickable when I click just before the column I can see the other hide columns. I cannot see the arrow or control.

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    Doesn't look like you are loading any of the Datatables CSS files. Use the DT v1 Download Builder to get the proper files for Bootstrap 5. I'm not sure why you are loading things like demo_pages/datatables_responsive.js. I suggest removing those. SEe the updated test case:
    https://live.datatables.net/qerocaxu/1/edit

    Kevin

Sign In or Register to comment.