What is the best way to adjust column widths?

[mcaay]

What is the best way to adjust column widths?

[mkoryak]

Are you trying to set the column width after the plugin runs? If so, is there a reason for that or can you do it before it runs?

If you did it before it runs, the best way to do it is to comment out the plugin code, make your table look correct and then add the plugin code back in.

If you need to set column widths after the plugin has been enabled, you can do it like this:

function setFloatTheadColumnWidth($table, columnIndex, widthPx) {
   $table // $table should be a jQuery object reference to your original table. 
    .floatThead("getRowGroups") // ask floatThead for children elements of the original table.
    .find("tr>:nth-child("+columnIndex+")") // Find all elements in table that are nth-child of any tr element.
    .width(widthPx) // Set width of all selected elements.
    .end() // Returns the last selected element, which is $table. I saw you have python repos, so you should understand why everything should be done in one line :)
    .trigger('reflow'); // Trigger a reflow event, which is a custom event floatThead listens to to make it recompute its layout.
}

// Then call it AFTER you init the plugin, call this method somewhere
setFloatTheadColumnWidth($('table.kpi-table'), /* columnIndex= */ 3, /* widthPx= */ 200);

Hope that helps. Good luck with your KPIs :P

[mcaay]

Haha, thanks :D I will need luck as this frontend stuff challenges my sanity a little bit too much... :D

I'm really grateful for your plugin though, it's like a sane island among the sea of insane tools. I don't know who the hell manages CSS but I'm of the impression they must be artists, not engineers :D

I'm actually trying to set the column width before the plugin runs, or more precisely, I would prefer the solution with the best performance and I assume doing it in html/css would be the faster way. For now all data is given from the django backend and is not changed dynamically after. To my astonishment I just noticed that what I'm doing also doesn't work when I disable your plugin, so I'm very sorry, there must be something wrong with my code. It was just so unbelievable that all those width: 200px !important; didn't work that I thought it must have been some interaction with your plugin :o

I found the solution. min-width: 150px; and max-width: 200px; used on <td> cells work. width: 200px; doesn't...
It's things like this that will make me bald one day... :D

P.S. Thanks also for the JS solution, maybe I will need it in the future :)

[osworx]

While this is thread is already closed, I want to add a comment.
Having troubles with a table where is hide (and show) some columns on users demand (hitting a button).
The (new) table (with hidden columns) is not recalculating the new with (before 12 columns, after hiding only 4).
The recalculation does work if all columns are displayed.

I tried a slightly changed function you provide above.
The code parts:

$('.filter-display').on('click', function() {
		$('.extended').toggle(400);
		setFloatTheadColumnWidth($table, 1, '25%');
	})

and the function itself:

function setFloatTheadColumnWidth($table, columnIndex, widthPx) {
		$table
		.floatThead('getRowGroups')
		.find('tr').children()
		.width(widthPx)
		.end()
		.trigger('reflow');
	}

The width (here 25%) is based on the number of columns [mine has 4 after hiding the others] (adjust as you need), the table cells are calculated correctly.

Maybe that helps someone having same situation like me.
@mkoryak maybe you have once the time to fix the code doing such automatically.
If you need more, just let me know.

thx.