Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Manual resizing of columns #15

Open
wants to merge 2 commits into from

2 participants

@thegrandpoobah

Basically, this patch adds a third method for sizing columns in the DataTables.net code base. The first method is the bAutoWidth path which sizes the columns based on the dimensions of their largest visible text. The second is to set the widths during initialization, turn off bAutoWidth and never adjust them again. This third method basically gives full control of column sizing to the user.

The user would modify th eaoColumns[n].width field in the fnSettings property bag to specify new fixed column widths and then calling fnAdjustColumnSizing to apply the new widths exactly. Without this patch, fnAdjustColumnSizing would call the fnCalculateColumnWidth function (if bAutoWidth is true) thereby modifying the values the user gave, or if bAutoWidth is false, the fnAdjustColumnSizing function is no-op. This lets the user set bAutoWidth to false and applies their specified column dimensions.

If you have any questions please do let me know.

@thegrandpoobah

Allen, any thoughts on this one? We find it useful anyways :)

(Sorry for constantly bugging you, I am trying to upgrade to 1.9.x and want to see what patches I have to reapply, so I'm cleaning out my pull queue)

@DataTables
Owner

Hi - sorry for the massive delay on this one. I missed it coming in originally and haven't been keeping quite on top of my Github account as I should!

Without this patch, fnAdjustColumnSizing would call the fnCalculateColumnWidth function (if bAutoWidth is true) thereby modifying the values the user gave

The reason I've done it that way is that, in theory at least, if the user has specified the "correct" column widths (i.e. they can be applied without modification) then they should be used unmodified (the auto width calculation does take the dev given changes into account). However, if they don't give the correct size, then it will be adjusted accordingly.

I can certainly see that finer control of column widths would be very welcome, and this is very much something that needs to be looked at in future, so I'm certainly open to this idea. If you could perhaps show a case where the current two options aren't sufficient, that would be really helpful!

@thegrandpoobah

I'll try to put up an example somewhere, but basically it boils down to the idea that there are situations where neither of datatables.net's built in column sizing algorithms are sufficient. Again, there are two built in:

  1. Calculate based on the maximum content width of the columns
  2. User specifies and that width is locked in forever and ever

In our situation we wanted a third way where the width of columns was dependent on the width of the parent container and the amount of space was distributed to columns based on the idea of priority. A somewhat complicated and domain specific algorithm that arguably has no place in the DataTables.net code base. Hence why it would be nice if manual resizing was integrated in.

As a further argument for my cause, the change is small and AFAIK, does not affect speed, size or the other two sizing algorithms adversely, so why not :)

Again, I will try to put up an example of our use case online somewhere when I get the chance (hopefully tonight).

@DataTables
Owner

An example would be fantastic! Thanks.

One comment:

In our situation we wanted a third way where the width of columns was dependent on the width of the parent container and the amount of space was distributed to columns based on the idea of priority.

Why not just specify sWidth or the width attribute on the TH elements in the header as percentage values? DataTables would apply those values and then calculate the pixel equivalent.

@thegrandpoobah

Check out an example of the semi-complicated logic here: http://www.saliences.com/dt_example/index.html

The example uses DataTables.net 1.8.2, but the same applies to 1.9.x (I only have an upgraded DataTables.net at work).

What is important to note about the example is that the columns each have the following properties:

  • minimum width
  • maximum width
  • distribution priority
  • visibility threshold (if visibilitythreshold > minwidth && col.width < visibilitythreshold => column is hidden)

the following four properties are mixed together to dynamically compute the dimensions of each column in a way that CSS or DataTables.net's built in sizing algorithms could not. We use this sizing algorithm at work for literally all of our tabular presentations.

Hopefully this illustrates the need for manual sizing and answers you question about why we can't use the built in DataTables.net stuff. Let me know if you need any more information.

@DataTables
Owner

Hi - thanks for the link, although I might be doing something a bit stupid? There is a link which says "Download source bundle here" to source.zip, but if I click on that, I get what appears to be a 404 error.

@thegrandpoobah

sigh. its not you. When I moved it to the server I forgot to update the url to the source. Should be good now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 7, 2012
  1. @thegrandpoobah
Commits on Sep 27, 2012
  1. @thegrandpoobah

    Rebase with 1.9.4

    thegrandpoobah authored
This page is out of date. Refresh to see the latest.
Showing with 4 additions and 5 deletions.
  1. +4 −5 media/src/core/core.columns.js
View
9 media/src/core/core.columns.js
@@ -144,13 +144,12 @@ function _fnColumnOptions( oSettings, iCol, oOptions )
*/
function _fnAdjustColumnSizing ( oSettings )
{
- /* Not interested in doing column width calculation if auto-width is disabled */
- if ( oSettings.oFeatures.bAutoWidth === false )
+ /* Only perform column width calculations if auto-width is enabled */
+ if ( oSettings.oFeatures.bAutoWidth === true )
{
- return false;
+ _fnCalculateColumnWidths( oSettings );
}
-
- _fnCalculateColumnWidths( oSettings );
+
for ( var i=0 , iLen=oSettings.aoColumns.length ; i<iLen ; i++ )
{
oSettings.aoColumns[i].nTh.style.width = oSettings.aoColumns[i].sWidth;
Something went wrong with that request. Please try again.