Keep column width constant with pagination
Keep column width constant with pagination
Jezza
Posts: 4Questions: 1Answers: 0
I would like to know if there is a way to force DataTables to fix the size of column width to accommodate the max length of the column data across the whole table instead of the current page?
I'm having an issue with using FixedHeader extension in combination with pagination: when new pages are loaded, the column widths are re-evaluated and updated based on column content length. However the floating header column widths do not resize, and therefore a gap/shift exists between the headers and the columns.
Here's an example:
When I first load the table:
|-- HEADER 1 --|-- HEADER 2 --|
|-- DATA____1--|-- DATA____2--|
When I change to a page that contains longer data:
|-- HEADER 1 --|-- HEADER 2 --|
|-- LONGER_DATA____1--|-- LONGER_DATA____2--|
My table is hundreds of rows and about 30 columns of varying length so I do not want to fix the width of the columns to a static value, but ideally I would like to fix the column width to the max value that it can take based on data on the whole table (so that column width does not change when changing pages).
Answers
Note: that only seems to happen when the table width goes beyond the browser width..
Can you link to the page showing the issue, as required in the forum rules, please.
DataTables' auto width feature should already be doing this, although there are cases where content sometimes simply has to trigger a resize.
Allan
Thanks for the quick answer. Sorry about not posting a link before.... I did see the rule but I'm currently developing this as a local filesystem solution (and the test data uses confidential info from my client..
Anyway, I've moved the page to a public URL. Here it is.
http://www.automated-trading-system.com/wp-content/uploads/datatables-test/Accounts.html
The easiest way to reproduce it is by:
1) loading the page making sure that the browser window is not wide enough to show all columns
2) Sort descending on "Security Value column" (column #7) to show the 15,400,000 at the top.
That column will grow but not the header (fixed) resulting in a misalignment of header and data columns (if you scroll all the way to the right, you'll see that the Worst DD header is actually shown twice (once as part of the fixed header and another one when it is redrawn where it should be after the column resizing.
Thanks,
Jez
PS: there seems to be an (unrelated?) issue on this public page version (it does not happen on my local version) but just now I seem to have to sort the second column (account number) and then re-load the page so that it shows correctly (on Chrome).
Super - thanks for the test case. A few points:
-1- I've committed a change that I think will help the misalignment of columns. The nightly version includes this fix now.
-2-
displayLength: "10",displayLengthcannot be a string - it should be an integer.-3- The problem with the misalignment on first draw is caused by the web font. When the table is first drawn the font used is Times New Roman. Then the font loads and it is a different size, so the table reflows - but FixedHeader can't know that is the case, so it looks a bit wrong. Calling the fnUpdate once the font has loaded will sort that out.
-4- The column sizes change between pages because the table width is set to be 100% - but the content of the table forces it to be bigger than that, so the browser is always trying to make the table as small as possible. Hence it chops off space. Possibly you could use
scrollXrather than FixedHeader to address this.Allan
Thanks for the quick and useful answer Allan..
Re: point 4: I thought scrollX was great when testing the table with it as it seemed to keep the column width constant... But then I tried and added Fixed Header (because my main issue is that I want the column headers to always be visible - "à la" Excel Freeze Panes" - so that if the user scrolls down to see the records at the bottom of the page the columns still show their headers).
Alas, I get the error message "FixedHeader 2 is not supported with DataTables' scrolling mode at this time" when loading the page with both scrollX and Fixed Header activated...
I also tried removing the width:100% condition on the table but it seems that the browser still tries to make the table as small as possible if it exceeds its own width...
That's correct - to some extent scrolling and FixedHeader are trying to solve the same issue, which is why I haven't put the work into making them work together yet. One day...!
Yes - I think they all will since it is going to be bigger than the width of the typical page unfortunately.
Allan