Row grouping vertically

svyas001

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

Can we do Row Group by Vertically?

Example:

kthorngren

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

svyas001

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

kthorngren

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

svyas001

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

kthorngren

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

svyas001

Hi Kevin,

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

kthorngren

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

svyas001

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.

kthorngren

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

svyas001

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?

kthorngren

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

kthorngren

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

svyas001

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.

kthorngren

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

svyas001

Thanks Kevin,

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

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

allan

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

svyas001

Thanks Allan,

But still it's not working.

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

allan

You've got two layout objects:

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

Then:

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

The second one will "win".

svyas001

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

allan

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.

svyas001

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

kthorngren

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

svyas001

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

kthorngren

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

svyas001

Thank you Kevin and Alan, you both rocks.

svyas001

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

kthorngren

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

svyas001

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

svyas001

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.

kthorngren

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