Column width broken since version 2

[trollbert]

autoWidth: false,
columnDefs: [
  {
    targets: 0,
    width: 50
  },
  {
    targets: 1,
    width: 100
  },
  {
    targets: 2
  }
]

Expected: render the column with with the specified value in the config

Actual: width has a calculated value not the one from config

Is there a way to fix this? With version 1.x this worked as expected.
With version 1.x the width was set on the table cell now it is set in the colgroup.

[AllanJard]

Can you create a test case showing the issue please? You can use https://live.datatables.net or JSFiddle if you can't host it yourself.

[trollbert]

I narrowed down the issue to this:

if (settings.aiDisplay.length) {
		// Get the column sizes from the first row in the table
		var colSizes = table.find('tbody tr').eq(0).find('th, td').map(function (vis) {
			return {
				idx: _fnVisibleToColumnIndex(settings, vis),
				width: $(this).outerWidth()
			}
		});

		// Check against what the colgroup > col is set to and correct if needed
		for (var i=0 ; i<colSizes.length ; i++) {
			var colEl = settings.aoColumns[ colSizes[i].idx ].colEl[0];
			var colWidth = colEl.style.width.replace('px', '');

			if (colWidth !== colSizes[i].width) {
				colEl.style.width = colSizes[i].width + 'px';
                                // `more specifically the above line`
			}
		}
	}

If I comment this, it renders as it did with 1.x

[trollbert]

Can you create a test case showing the issue please? You can use https://live.datatables.net or JSFiddle if you can't host it yourself.

https://live.datatables.net/jaxeferu/16/edit

[trollbert]

If the width is smaller than the content, allow the content split into multiple lines.
autoWidth setting is ignored

[AllanJard]

It isn't ignored, it is just overwritten. Take the first column - you've assigned a width of 50px it, but the content is around 140px (including padding) and it can't be displayed any smaller than that. Therefore the width gets overridden. There is no overflow of a table cell.

You could use:

table {
  table-layout: fixed;
}

if you want to allow overflow of table cells, but it obviously looks awful:

I think DataTables is operating as I would expect here.

[trollbert]

If I comment out the line from the previous comment:

Works as it did work in 1.x

If I leave the source as is:

Depending on the columns count and content the width changes.

[trollbert]

First render on page load: - looks fine

Remove one column, add back the same column: - looks different

[AllanJard]

Can you create a test case with showing those latest images (with fake data if needed) please? If you remove a column the content should have more space to spread over, and I would expect the table to do that.

[trollbert]

https://live.datatables.net/jaxeferu/20/edit

Check this example, I added a button for toggle.
If in the settings a column has a width defined, it should respect that width.
In the above example, depending on the column added/removed all the columns get their width re-calculated. Given that autoWidth is set to false, this should not happen.
Also there are columns that have no defined width, those can take up the available space, but the ones with a defined width should stay the same.

More specificaly, Name has no width Age has a fixed width, Name changes width, and it is expected, Age changes width and it should not because of fixed width.

[trollbert]

From my point of view this causes the issue:

// Check against what the colgroup > col is set to and correct if needed
		for (var i=0 ; i<colSizes.length ; i++) {
			var colEl = settings.aoColumns[ colSizes[i].idx ].colEl[0];
			var colWidth = colEl.style.width.replace('px', '');

			if (colWidth !== colSizes[i].width) {
				colEl.style.width = colSizes[i].width + 'px';
			}
		}

[AllanJard]

That's what sets the sizes, so yes, any issue with the column widths would eventually setup there. It can't simply be removed unfortunately.

Auto width being disabled is actually part of the problem - removing it (i.e. allowing the default enabled state) means that the age column will be 100 width: https://live.datatables.net/dogazawe/1/edit .

I need to dig into what DataTables is doing when auto width is disabled - I can't recall off the top of my head! I remember trying to simplify it for v2, and I came close to removing the auto width option entirely (I've long regretted putting it in :)).

For the moment, unless I'm missing something, it seems that your issue is resolved with auto width enabled?

[VeloAddict]

I will try it out and get back to you.

[trollbert]

@AllanJard I tried with auto width true, it is worse.
Would it be possible to revert to the way it was in 1.x?

[trollbert]

From my point of view this causes the issue:

// Check against what the colgroup > col is set to and correct if needed
		for (var i=0 ; i<colSizes.length ; i++) {
			var colEl = settings.aoColumns[ colSizes[i].idx ].colEl[0];
			var colWidth = colEl.style.width.replace('px', '');

			if (colWidth !== colSizes[i].width) {
				colEl.style.width = colSizes[i].width + 'px';
			}
		}

This part should run only if autowidth is set to true.

[AllanJard]

It seems to be running as expected without autoWidth being disabled in the link I gave above.

I won't be reverting it to how v1 worked, but it certainly sounds like I need to look more into what is happening when autoWidth is disabled. I will do that, but I fear it might be a little while before I can do so due to a backlog of other things.