Width of column

[djdony]

Summary of problem or feature request

Hi. i can not set width for column Age. I tried to change in head

     <table class=" table-bordered table-hover" id="employeesTable">
            <thead>
            <th></th>
                <th>{{trans('messages.first_name')}}</th>
                <th>{{trans('messages.last_name')}}</th>
            <th width="10%">{{trans('messages.age')}}</th>

But still does not apply width.

Code snippet of problem

$(document).ready(function(){

    var table = $('#employeesTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("pim.employees.datatable")}}',
        bAutoWidth:false,
        columns: [
            {data: 'first_name'},
            {data: 'last_name'},
            {data: 'birthdate',sWidth:'5%'},
            {data: 'actions', sortable: false, searchable: false},

        ],

System details

• Operating System Ubuntu
• PHP Version 7
• Laravel Version 5.8
• Laravel-Datatables Version 9.0

[rahul-chavda]

hello , this documentation might help.

[djdony]

I read the documentations, tried parameters width in column, but still can not set width.

I used inline style but table autowided itself.
autoWidth: false, not working at all.

[rahul-chavda]

what datatable version you are using ?

[djdony]

9.0 last version. bootstrap 4

[rahul-chavda]

hey, @djdony I guess the problem is you have written columns instead of aoColumns.
I have tested this and it is working.
code pen
stack overflow reference

[mariopro]

The ->width() method applies a width attribute to the th which is no longer supported in modern HTML, meaning that setting the ->width(200) or ->with('200') when used in the Column::make() has no effect when rendering the column. I've tried adding the width using the ->addClass() method and using the framework width styling, and nothing changes, even when setting ->autoWidth(false).
Humble suggestion: create a method for inline styling ->addStyle() that would solve most related issues and even add more customization ability.
Using V10.4.0

[yajra]

@mariopro thanks for the info about width, not aware of it.

You can already add a style using the magic method since Column is a Fluent class. But it would be nice to add a method for better IDE support.

Column::make('name')->style('width: 150px; color: red'),

[mariopro]

@mariopro thanks for the info about width, not aware of it.

You can already add a style using the magic method since Column is a Fluent class. But it would be nice to add a method for better IDE support.

Column::make('name')->style('width: 150px; color: red'),

Thanks @yajra for your prompt reply. That's great news and in fact works, yet as you say, IDE does not recognize the method. Nevetheless, it works :) Thank you!

[github-actions]

This issue is stale because it has been open for 30 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[kingzamzon]

I solved it this way by using editColumn and creating a blade file with a static width

DataTable file (e.g GDPBeneficiariesTrainedDataTable):

class GDPBeneficiariesTrainedDataTable extends DataTable
{
    public function dataTable($query)
    {
        return datatables()
            ->eloquent($query)
            ->addIndexColumn()
            ....
            ->editColumn('shg_id', function ($data) {
                $data['value'] = $data->shg_id;
                $data['width'] = "200px";
                return view('datatables.width-column', $data);
            })
            ....
    }
    ....

Blade file (e.g datatables.width-column)

<div cstyle="width:{{$width}}">
    {{ $value}}
</div>