using rowgroup is showing multiple rowgroups

hamzabinilyas_gl

var groupColumn = 2;
var provisioningTable = $('#provisioningTable').DataTable({
responsive: true,
columnDefs: [{ visible: false, targets: groupColumn }],
// order: [[groupColumn, 'desc']],
displayLength: 25,
ordering: false,
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 (group, i) {
if (last !== group) {
$(rows)
.eq(i)
.before(
'<tr class="group"><td colspan="4">' +
group +
'</td></tr>'
);
last = group;
}
});
},
dom:
'<"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
});
provisioningTable.on('responsive-display', function (e, datatable, row, showHide, update) {
// convert data-feather to svgs
feather.replace();
});:
showing multiple rowgroups:

allan

Thanks for your question. As noted in the forum rules, please post a link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Allan

kthorngren

Looks like you aren't sorting the table correctly. Try uncommenting this line:

// order: [[groupColumn, 'desc']],

You may need to add the use of orderFixed to force the table to always order by column 2 first.

Kevin

hamzabinilyas_gl

@kthorngren I tried uncommenting this line and add orderFixed but it is not working

kthorngren

Looks like you are using this example which is working. If the example doesn't help then please provide a running test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin