Link to home
Create AccountLog in
Avatar of Starr Duskk
Starr DuskkFlag for United States of America

asked on

How to customize DataTable custom button collection menu?

I am using the custom buttons for the dataTable located here: https://datatables.net/reference/button/collection

I am using two of the collection buttons, but I need the menus to be a different size. I am having trouble adding in css code that customizes the dropdown menus for the button collections. Here is the code here for the dataTable.
var selectedExcelButtonText = "Excel";
  $('#TableTeamGrid').DataTable( {
buttons: [{ extend: 'collection', text: selectedButtonText  + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>', autoClose: true, attr: { id: 'dataSortBy' }, buttons: [{ text: 'Alphabetical A to Z', action: function(e, dt, node, config) { dt.order( [2, 'asc'] ).draw(); selectedButtonText = "Alphabetical A to Z "; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>');}}, { text: 'Alphabetical Z to A', action: function(e, dt, node, config) { dt.order( [2, 'desc'] ).draw(); selectedButtonText = "Alphabetical Z to A"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } }, { text: 'Newest Hire to Oldest', action: function(e, dt, node, config) { dt.order( [9, 'desc'] ).draw(); selectedButtonText = "Newest Hire to Oldest"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } }, { text: 'Oldest Hire to Newest', action: function(e, dt, node, config) { dt.order( [9, 'asc'] ).draw(); selectedButtonText = "Oldest Hire to Newest"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } }, { text: 'Score Highest to Lowest', action: function(e, dt, node, config) { dt.order( [8, 'desc'] ).draw(); selectedButtonText = "Score Highest to Lowest"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } }, { text: 'Score Lowest to Highest', action: function(e, dt, node, config) { dt.order( [8, 'asc'] ).draw(); selectedButtonText = "Score Lowest to Highest"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } } ]
},
buttons: [{ extend: 'collection', className: 'stylExportMenu', text: selectedExcelButtonText  + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>', autoClose: true, attr: { id: 'dataExportCollection' }, buttons: [{text:'Export Excel', attr: { id: 'dataExcelBtn' }, action: function(e, dt, node, config) { document.getElementById('btnExcel').click(); } }, {text:'Export CSV', attr: { id: 'dataCSVBtn' }, action: function(e, dt, node, config) { document.getElementById('btnCSV').click(); }}],
});

Open in new window


I tried to remove the information that wasn't relevant to the question, so in my removal of code I might have accidentally taken out a bracket or parenthesis that was needed, but the buttons themselves are working.I just need to style the dt-button-collection menu.

I just need help figuring out how to customize the width of the menu for the second collection #dataExportCollection. It needs to be a smaller menu size than the #dataSortBy collection. I have tried:

.dt-button-collection:nth-child(1) {
     width: 100px !important;
}

Open in new window

and
.dt-button-collection:nth-of-type(1) {
     width: 100px !important;
}

Open in new window

The first one didn't work at all and the second one applied it to both menus. I think because only one menu is ever showing at a time.

I also can't target the button collection like this:
#dataExportCollection > .dt-button-collection {
width: 100px !important;
}

Open in new window

because the .dt-button-collection menu is not inside the same container as the button or inside any type of container that I can assign a different id to than the other collection menu. Does anyone know of a way that I can customize this second menu so it doesn't have the same long width of the first menu?
ASKER CERTIFIED SOLUTION
Avatar of lenamtl
lenamtl
Flag of Canada image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Starr Duskk

ASKER

Thanks!
I was able to use Lenamtl suggestion. Even though I needed it to be one-column. I used the CollectionLayout: 'one-column' which added in a class to the collection menu. I could then add a style to that to make it the size I needed, different from the second.