DataTables grouping with ordering

Abdelrahman_Alnashar

I have a DataTable for grouping users who are active and inactive, I want to be able to order the inactive users first, then the active ones. The code below results in grouping the active users first, I want the opposite.

columnDefs: [
            { visible: true, targets: groupColumn }
          ],
          order: [[groupColumn, 'asc']],
        displayLength: 10,
        lengthMenu: [10, 15, 20, 25, 30],
        drawCallback: function(settings) {
            var api = this.api();
            var rows = api.rows({ page: 'current' }).nodes();
            var last = null;
            api.column(groupColumn, { page: 'current' })
                .data()
                .each(function(user_status, i) {
                  var group = user_status === "Inactive" ? "Inactive Users" : "Active Users";
                  
                  if (last !== group) {
                        $(rows)
                            .eq(i)
                            .before(
                              '<tr class="group" ' + groupStyle + '><td colspan="4">' +
                                group +
                                '</td></tr>'
                            );

                        last = group;
                    }
                    
                });
          }

colin

I'm not clear how that grouping would be expected to work with searching and ordering. It would be worth looking at RowGroup, or possibly just using option order to set an initial order to the table. If you want the Active users to always be at the top of the table, it would be worth looking at the Absolute ordering plugin.

Colin

Abdelrahman_Alnashar

I added the Absolute ordering plugin, and I am still getting the active users to be ordered first in the dataTable.

<script src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/absoluteOrder.js"></script>


var absoluteOrder = $.fn.dataTable.absoluteOrder([
    { value: 'Inactive', position: 'top' }
  ]); 

columnDefs: [
            { visible: true, targets: groupColumn },
            { targets: groupColumn, type: absoluteOrder} 
          ],
          order: [[groupColumn, 'asc']],
        displayLength: 10,
        lengthMenu: [10, 15, 20, 25, 30],
        drawCallback: function(settings) {
            var api = this.api();
            var rows = api.rows({ page: 'current' }).nodes();
            var last = null;
            api.column(groupColumn, { page: 'current' })
                .data()
                .each(function(user_status, i) {
                  var group = user_status === "Inactive" ? "Inactive Users" : "Active Users";
                   
                  if (last !== group) {
                        $(rows)
                            .eq(i)
                            .before(
                              '<tr class="group" ' + groupStyle + '><td colspan="4">' +
                                group +
                                '</td></tr>'
                            );
 
                        last = group;
                    }
                     
                });
          }

Abdelrahman_Alnashar

@colin

allan

I want to be able to order the inactive users first, then the active ones

Use orderFixed to apply an initial order to the table that the end user cannot change (unless you provide a way to do so via the API).

Allan

Abdelrahman_Alnashar

I hope this helps. As you can see, if the user_name is "Inactive" then the user will be displayed in the Inactive User's group; otherwise, it will be displayed in the Active User's group. What I want exactly is for the Inactive User's group to be displayed first in the data table.

{
"data": {
        "current_page": 1,
        "data": [
            {
                "id": 1,
                "user_id": 3,
                "project_id": 15,
                "created_at": "2024-05-17T08:46:25.000000Z",
                "updated_at": "2024-05-17T08:46:25.000000Z",
                "user_name": "John",
                "email": "johndoe@gmail.com",
                "user": {
                    "id": 3,
                    "name": "john",
                    "email": "johndoe@gmail.com"
                }
            },
            {
                "id": 2,
                "user_id": 4,
                "project_id": 15,
                "created_at": "2024-05-20T07:26:25.000000Z",
                "updated_at": "2024-05-20T07:26:25.000000Z",
                "user_name": "Inactive",
                "email": "doejohn@gmail.com",
                "user": {
                    "id": 4,
                    "name": "Inactive",
                    "email": "doejohn@gmail.com"
                }
            }
        ]
 }
}

allan

Thanks for the clarification - it sounds like the absolute sorting described here will be what you want. Set it up so a column displayed the user_name data point and us the absolute sorting plugin to show "Inactive" first. The row grouping is based off the sorting order.

Allan