This topic contains 6 replies, has 2 voices, and was last updated by Sean Sean 2 years, 11 months ago.

Datatables column width.


  • brian15co
    Participant

    Posts: 19
    Member Reply #2257

    Hello, I am unable to control the widths of my datatables columns. I have tried

    “columns”:

    { “data”: “DT_RowId”,

    “width”: “5px”},

    Where “5px” has been replaced with “5%” or “5em”

    I have also tried setting width in the html

    <th width=”5%”>

    WorkOrder #

    </th>

    Not a single thing that I try seems to make any difference on the table. Any suggestions?

     

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #2276

    Hi,

    Thanks for contacting our support.

    To set a custom width for columns you will need to turn off auto width and set set width for each columns as shown below:

    “autoWidth”: false,

    “columns”: [{
    “orderable”: false
    }, {
    “orderable”: true,
    ‘width’: ‘120’,
    }, {
    “orderable”: false,
    ‘width’: ‘120’,
    }, {
    “orderable”: false
    }, {
    “orderable”: true
    }, {
    “orderable”: false
    }],

    For more info please check the official doc:

    https://datatables.net/reference/option/columns.width
    https://datatables.net/reference/option/autoWidth

    Thanks.


    brian15co
    Participant

    Posts: 19
    Member Reply #3706

    I know this topic is old, bit this is still a problem. The column width is ignored whether it is entered in the html, defined using “columnDefs option on table initialization, or defined using column option on datatable init. Any suggestions?

     

     

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #3714

    Hi,

    May i know what Metronic version are you using ? By right even with HTML TD attribute you should be able to set the width. E.g:  width=”10%” or width=”100″.

    Thanks.


    brian15co
    Participant

    Posts: 19
    Member Reply #3721

    .

    • This reply was modified 2 years, 11 months ago by  brian15co.

    brian15co
    Participant

    Posts: 19
    Member Reply #3722

    I am using Metronic 3.6.2

    With the following html, where would I put the width so that it works. It seems to be overwritten by the javascript no matter what I try.

    <div class=”table-container”>

    <table class=”table table-striped table-bordered table-hover” id=”users_table”>

    <thead>

    <tr role=”row” class=”heading”>

    <th>

    First Name

    </th>

    </tr>

    <tr role=”row” class=”filter”>

    <td>

    </td>

    </tr>

    </thead>

    <tbody>

    </tbody>

    I have also tried modifying theme/assets/global/datatable.js as well as the individual constructors for each table to add the “columnDefs” option, nothing is sticking.

    Thanks!

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #3729

    Hi,

    Please try to set fixed with for table column’s as shown below:

    <th style=”width: 150px !important”>First Name</th>

    If you need any further assistance please let us know.

    Thanks.

You must be logged in to reply to this topic.