setting width of a column

jstuardo

Hello,

I have defined these columns in my grid:

columns: [
                    {
                        data: null,
                        defaultContent: '',
                        orderable: false,
                        className: 'select-checkbox',
                        width: 35
                    },
                    {data: "id", width: 50},
                    {data: "nombres", width: 120},
                    {data: "apellidos", width: 120},
                    {data: 'runFormateado', width: 100},
                    {data: 'empresa', width: 120},
                    {data: 'licencias', width: 120},
                    {data: 'faenas', width: 120},
                    {data: 'requisitosWebcontrol', width: 100},
                    {data: 'infracciones', width: 100},
                    {data: "createdAt", width: 130},
                    {data: "updatedAt", width: 130},
                    {
                        data: null,
                        className: "text-center",
                        orderable: false,
                        width: 70,
                        defaultContent: '<a href="" class="row-btn editor_edit" title="Editar"><i class="fas fa-pencil-alt"></i></a> <a href="" class="row-btn editor_remove" title="Eliminar"><i class="fas fa-trash-alt"></i></a>'
                    }
                ],
                order:

After that, the grid insists in calculating the width automatically in order to fit the width of the grid and that is not what I want. I want the scroll X to appear.

The scroll does appear, but I only need to get the width I set to be kept.

Scroll is set this way:

                scrollX: true,
                scrollCollapse: true,

Regards
Jaime

colin

Hi @jstuardo ,

I think the problem is because you're not specifying units on columns.width - see the expected syntax here.

Cheers,

Colin

jstuardo

I modified the code to add 'px' to each column width definition... but the column widths are still being calculated automatically. I have added "autoWidth: false", but it did not help.

The demo at https://datatables.net/examples/basic_init/scroll_x.html does not do something special, so I don't know what may be happening.

Any other idea?

colin

The best bet to progress this would be to link to your page or reproduce the problem in a test case. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

jstuardo

I have used "autoWidth" property for other grid I have, together with defining widths for other columns and it worked (without using px unit). For explicitly defined columns, the width set is used, and for columns that don't define width, it is calculated automatically.

Maybe in this unsuccessful case, there are a lot of columns, so grid tries to fit all of them inside the visible area, not taking scrollX setting into account.

jstuardo

Hi Colin,

I could create a JS Fiddle in order to reproduce the problem. URL is https://jsfiddle.net/Ld7bm0pw/. Note that even when column widths are specified..... grid calculates widths automatically when rendered.

if I add "display nowrap" classes to TABLE tag, table goes beyond the right of the page. This effect could not be reproduced in JS Fiddle, but I think it doesn't matter since the widths set in the grid definition are not kept.

Regards
Jaime

allan

The key here is to remove the autoWidth option (which isn't actually useful in many cases - thinking of removing it!) and the width:100% on the table (which is causing the table to collapse.

Then you get something like this: https://jsfiddle.net/Ld7bm0pw/12/ .

Allan

jstuardo

Hello Allan, thanks for your reply.

Besides removing the width of the table, I needed to add

<

div class="container m-0 p-0">

surrounding the table, but I have other issue.

For few columns grid, it appears very narrow... even narrower the whole table, causing grid right border not to be aligned with search box.

Is there a way to set a column width to auto, so that it is calculated automatically to fit the width of the container?

allan

Perhaps try adding min-width: 100% to the table.

Allan