如何使用导出按钮对数据表中的按钮进行分组？

Question

I have a dropdown button with all export buttons coming inside its dropdown and outside I have two more buttons which are not grouping up with Export dropdown button.

buttons: [{
  extend: 'collection',
  text: 'Export',
  className: 'btn btn-sm btn-outline-dark',
  buttons: [{
    extend: 'excel',
    title: 'Re-assigned-Queries'
  }, {
    extend: 'pdf',
    title: 'Re-assigned-Queries'
  }, {
    extend: 'csv',
    title: 'Re-assigned-Queries'
  }]
}, {
  text: 'Select all',
  className: 'btn btn-sm btn-outline-blue',
  action: function() {
    reassignQueryTable.rows().select();
  }
}, {
  text: 'Select none',
  className: 'btn btn-sm btn-outline-red',
  action: function() {
    reassignQueryTable.rows().deselect();
  }
}],

Export button is coming separated from other two buttons and the other two buttons are coming as grouped. I want all the 3 buttons to be grouped in one.

Answer 1

Add a class unique to the button

 extend: 'collection',
  text: 'Export',
  className: 'btn btn-sm btn-outline-dark no-round-right',
  buttons: [{
    extend: 'excel',
    title: 'Re-assigned-Queries'
  },

after that create a css for her

.no-round-right{
    border-radius: 50px 0px 0px 50px;
}