different column width for each column in datatable.

iRiyada commented on Feb 28, 2019

Is there a provision to change individual column width in datatable. css style for td?

KoolReport commented on Mar 1, 2019

May be this will helps Table Column cssStyle

Andrew Borell commented on Mar 1, 2019

I tested it and it works with datatables.

// Some.view.php 
DataTables::create(array(
	"dataSource"=>$this->dataStore('service_data')
		,"name"=>"tbl_service_data"
		,'cssClass'=>array(
			'th' => function($colName) {
				return $colName;
				},
			)
		,"columns"=>array(
			, "svc_dt"=>array(
				"label"=>"Service Date",
				"type"=>"datetime",
				"displayFormat"=>"Y-m-d"
				)
			,"svc_tm"=>array(
				"label"=>"Time",
				)
			,"svc_type"=>array(
				"label"=>"Service Type",
				"formatValue"=>function($value,$row){
					return ucwords(strToLower($row['svc_type']));
					}
				)
			,"svc_priority"=>array(
				"label"=>"Priority",
				)
			,""=>array(
				"label"=>"Contact Name",
				"formatValue"=>function($value,$row){
						return ucwords(strToLower($row['contact_last'])) . ', ' . ucwords(strToLower($row['contact_first']));
					}
				)
			)
		,"options"=>array(
			"paging"=>true,
			"searching"=>true,
			"fixedHeader"=>true,
			)
	));

And some css:

// custom.css
.svc_type{
	width:20em;
	}

iRiyada commented on Mar 3, 2019

thank you:) It is possible this way as well using .

       var table= $('#example').DataTable( {

 columnDefs: [
            { width: 20, targets: 0 },
            { width: 200, targets: 3 },
            { width: 20, targets: 10 },
            { width: 20, targets: 11 },
            { width: 20, targets:12 },
            { width: 20, targets: 13 },

        ],
       }

KoolReport commented on Mar 3, 2019

Hi iRiyada,

Sorry for my misread, I thought you are using Table. You can do like above, but like this:

DataTables::create(array(
    "options"=>array(
        "columnDefs"=>array(
            array("width"=> 20, "targets"=> 0 ),
            ...
        )
    )
));

iRiyada commented on Mar 4, 2019

thank you:)

KoolReport's Forum

Different column width for each column in datatable. #715

Build Your Excellent Data Report