CODEWITHSUNDEEP
jquerydatatables
Jaigus
Jaigus

Reputation: 1502

How can I stop datatables columns from being responsive?

I'm using this template from Creative-Tim.com.

Here is a link to the file: drive.google.com/open?id=1EPLpOmM9bNj2-HH-v9rF6HvSoNtTqJtQ

The file is: BS3/examples/new_table.html.

I'm using datatables table and when the browswer window width is descrease, the column headers become responsive where longest table header names appear on top of the sorting arrow, which causes them to look staggered and crooked as not all of them do this because the header names are of different length. How can I keep them all static? I currently have the table set to responsive = false, and have a scrollX bar. 

 var table = $('#datatables').DataTable({
     "scrollX": true,
     orderCellsTop: true,
     fixedHeader: true,
     "pageLength": 10,
     responsive: false,
     sDom: 'lrtip'
 });

I just want there to be a decent space between columns and for them to stay that way and use scroll for when the page narrows.

Upvotes: 4

Views: 3151

Answers (4)

curiousBoy
curiousBoy

Reputation: 6834

I would not suggest fixed columns unless you have very certain criteria but what you are trying to is something like below:

Note that I added fixedColumns propertyand columnDefs property at the end of your dt settings.. Something like below should work:

 var table = $('#datatables').DataTable({
     "scrollX": true,
     orderCellsTop: true,
     fixedHeader: true,
     "pageLength": 10,
     responsive: false,
     sDom: 'lrtip',
     columnDefs: [
            { width: 200, targets: 0 }, // add your column indexes for each specification
            { width: 150, targets: 1 },
            { width: 250, targets: 2 } // etc... 
        ],
     fixedColumns: true,
     scrollY:        "300px" // some certain scroll size if you need..
 });

And if that does not work, also try updating your css like below:

table{
  margin: 0 auto;
  width: 100%;
  clear: both;
  border-collapse: collapse;
  table-layout: fixed; // ***********add this
  word-wrap:break-word; // ***********and this
}

Upvotes: 0

Alexandre Elshobokshy
Alexandre Elshobokshy

Reputation: 10922

Using position: absolute; is generally a bad idea in Datatables and any other plugin that resizes content automatically as it'll prevent them from being fully responsive, it might fix one issue but generates another.

The cleanest way would be to have a white-space: nowrap;. If it makes your headers too close to each other, just add a clean margin after each cell :

table.dataTable thead th, table.dataTable thead td {
    white-space: nowrap;
}

table.dataTable thead th::after, 
table.dataTable thead td::after,
table.dataTable tfoot th::after,  /* Don't also forget to give your footer the margin, to keep the header/footer properly aligned */
table.dataTable tfoot td::after {
    margin-right: 7px!important;
}

Note that this way you wouldn't disrupt the table's original layout by fixing values, this keeping Datatables free to resize the headers as it pleases afterwards. What's more important than just making it work, is making it work the cleaner way possible.

Otherwise, another extreme solution, that I once used in one of my projects, is to remove the sort icon definitively while still keeping the header sort, as when you have large header names it seems more convenient and most clients feel that it's already natural to click on the header to sort

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    content: '';
}

Upvotes: 0

Eugene Kubovsky
Eugene Kubovsky

Reputation: 391

After looking at the template I can give you two hints:

  • a header cell's width is calculated on the go by the plugin, is not rounded and set to something like "74.56px", so for some cells you get the calculated width smaller than it should actually be - the text and the :after don't fit.
  • changing the font solves the issue

For a quick and dirty fix, and if you would like to keep everything else unchanged - consider change the font to something standard I guess.

Upvotes: 0

DK Dhilip
DK Dhilip

Reputation: 2644

If I understood your question correctly, then adding the following CSS will do the trick for you:

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    position: absolute;
    display: block;
    bottom: 8px;
    right: 8px;
    font-family: 'FontAwesome';
    opacity: 0.8;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled  {
    padding-right: 30px !important;
}

table.dataTable thead .sorting.text-right,
table.dataTable thead .sorting_asc.text-right,
table.dataTable thead .sorting_desc.text-right,
table.dataTable thead .sorting_asc_disabled.text-right,
table.dataTable thead .sorting_desc_disabled.text-right  {
    padding-right: 0 !important;
}

Result:

enter image description here

Upvotes: 3

Related Questions