What is the best way to adjust column widths?

[mcaay]

More a question than an issue - I hope you can forgive me the lack of jsfiddle.
I didn't find anything in the docs nor in the issues about how to properly adjust column widths.
I also failed to adjust it by myself.
What is the right way to do it?

I tried style="width: 200px;" with and without !important on both <th> and <td> cells.
I also tried it inside <colgroup> - it is completely ignored.
Applying table-layout: fixed; in CSS doesn't help either.

The only result achieved is while applying it on <td> => data columns respond to it but not headers. I tried the $table.trigger('reflow'); but it doesn't make a difference, so I guess it only would if I changed something in javascript.

This is the option I use if it matters.

var $table = $('table.kpi-table');
$table.floatThead({
    responsiveContainer: function($table){
        return $table.closest('.table-responsive');
    }
});

My javascript knowledge is near 0, so I assume I must be unaware of something very basic, especially since nobody else asked for it :(

[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.