How to remove or hide a column and whole width of Table Column is reduced and not resized

edwinloh

Hi!

I'm using ColVis "bRestore" to show and hide the columns.
But how can I prevent it from auto resizing the remaining columns width to the previous columns width?

Example:
My table have 26 Columns with sScrollX, and each column width is 100px. Hence, total column width is 2600px.
When I hide 1 column, I will want the total column width to be 2500px now and not auto resize the column width to 2600px again.
I'm using server side processing for the table data too.

Is this possible?

Thanks!

allan

> But how can I prevent it from auto resizing the remaining columns width to the previous columns width?

I suspect that you have either `width="100%"` as an HTML attribute on your table, or `width: 100%` in your CSS. Can you link to a test case showing the issue please?

Allan

edwinloh

Hi Allan,

I've tried in my own code and can't seem to fix this.
And I've created a test case in http://live.datatables.net/ofim/5/edit?html,css,js,output.

I've commented out the width="100%" in element, but when I hide any number of columns, the table will still auto resize.

After I hide any number of columns, how can I prevent the table from auto resizing the remaining columns width. That is, I'll like to reduce the table's width instead?

Thanks!
Edwin Loh

allan

Hi Edwin,

Thank you for picking up the DataTables support option!

So there are two things needed here:

1. The CSS as `table.dataTable { width: 100% }` which was causing the table to go full width. This needs an override of `width: auto`

2. DataTables width calculations need to be disabled using the bAutoWidth option (also called simply `autoWidth` in 1.10).

I've made those two changes in your example and you can see the result here: http://live.datatables.net/oMAS/2/

You may wish to add a min-width to the container, or otherwise layout the control elements such as the search input a bit nicer, but that shows the principle!

Regards,
Allan

edwinloh

Hi Allan,

Thanks! I tried it in my code and it works.

But, I have tables that uses JQuery UI theme, and I can't seem to get the desired behaviour.

I have a table in my web application that has 26 columns, and I've applied JQuery UI Theme with scrollx enabled.

I've updated from your example for the test case. Please see http://live.datatables.net/uguM/1`.

When the "Salary" field is hidden, the column widths are not reduced. How can I do it so that column widths are not auto resized when bJQueryUI option is true?

Thanks!

Regards,
Edwin Loh

allan

Hi Edwin,

Your jQuery and jQuery UI tags didn't have closing `` statements - which is why you were getting an error before: http://live.datatables.net/ewip/2/edit

Here is an example using jQuery UI: http://live.datatables.net/ewip/4/edit . The container element might need to be adjusted - but that might or might not be what you want!

Allan

edwinloh

Hi Allan,

Sorry, http://live.datatables.net/ewip/4 is not exactly what I want. :(

I'll try to explain better. :)

I have a table with many columns (26 fields) that I've set sScrollX to 100% and bJQueryUI to true.
But when I hide any of the columns, the total columns width will auto resize and not reduce eventhough I set the table to `width: auto`.
But if bJQueryUI is set to false, the total columns width will reduce as expected.

Updating from your test case, as an simplified example similar to what I'm trying to achieve, I have something like http://live.datatables.net/ewip/5/edit in my web application now.
The total column length is lesser than the width of the container, hence, it requires users to scroll right to see the rest of the table.

But when I hide any of the columns, the total columns width will auto resize to width of the container.
How can I set so that the total columns width is reduced instead?

From troubleshooting, it seems to be from the "sScrollX" : "100%" setting?

What I'll like is even with "sScrollX" : "100%", when column is hidden, the total columns width to be reduced. Is it possible? If so, can you help to show in the test case?

Thanks!

Best Regards,
Edwin Loh

allan

Hi Edwin,

> I've set sScrollX to 100%

Ah - that's the key bit of information! Currently DataTables, with x-scrolling enabled, must consume 100% of the available area (or more if scrolling is required). This means that it is the container that controls the width - DataTables will always match that width.

You have that set up in your latest demo already! So in this case all we need to do is reactivate the auto width calculations (which are important here since scrolling is enabled):

http://live.datatables.net/ewip/6/edit

All a bit confusing I know! I'm endeavouring to improve the documentation on this sort of thing!

Allan

edwinloh

Hi Allan,

Aahh.. Okay!

[quote]
Ah - that's the key bit of information! Currently DataTables, with x-scrolling enabled, must consume 100% of the available area (or more if scrolling is required). This means that it is the container that controls the width - DataTables will always match that width.
[/quote]

There is no way to workaround this?

So I may have to don't use ColVis "hide/show" if I want to use x-scrolling? Any recommendations?

:)

Thanks,
Edwin Loh

allan

I don't think there is. I'll experiment a bit with it this afternoon, but I suspect not.

Basically what you are looking for is a table that will contract when columns are hidden, but when all columns are shown, it will use x-scrolling. Is that correct?

Allan

edwinloh

Yes. That is correct.

But, to elaborate more:

With x-scrolling.

For example, I have 10 columns with each width set to 100px.
So total column width is 1000px.
But the container width is 600px.

If no columns are hidden, It means the 7th, 8th, 9th and 10th Column have to be x-scrolled to view them.

But if I hide any 4 columns, I will not need to x-scroll, as the total viewable column width will be 600px which is same as the container width.
However, if I hide any 5 or more columns, the table width will contract (horizontally).

I hope that is a way for this eventhough you suspect not possible.

Thanks!
Edwin Loh

allan

> However, if I hide any 5 or more columns, the table width will contract (horizontally).

This is the one part that might cause a problem. I'm still looking into how to do it!

Allan

edwinloh

ok and Thanks!