How do I align pageLength, export buttons, and search bar in semanticui DataTable?

Question

I'm really not that fluent with JS and CSS, so I am having a hard time finding out how I could achieve the look in the image below for my data table:

I basically want to divide the row into three columns with widths 4-8-4 to fit the page length, export buttons, and search bar.

I patterned my DataTable from this example. The only difference is that I removed the lengthChange: false in the javascript. I tried playing around with the dom options but I've got no luck on that.

I also found a solution for the same problem from stackoverflow, but it uses bootstrap. I have no idea how I could modify it for semanticui.

Thanks!

Answer 1

Try using the following dom option:

dom:
  "<'ui grid'"+
     "<'row'"+
        "<'four wide column'l>"+
        "<'center aligned eight wide column'B>"+
        "<'right aligned four wide column'f>"+
     ">"+
     "<'row dt-table'"+
        "<'sixteen wide column'tr>"+
     ">"+
     "<'row'"+
        "<'seven wide column'i>"+
        "<'right aligned nine wide column'p>"+
     ">"+
  ">",

In your case DO NOT use this code from the example you have mentioned:

table.buttons().container()
    .appendTo( $('div.eight.column:eq(0)', table.table().container()) );