search

maca88 / datatables.plugins

MIT License
21 stars 5 forks source link

How to use matchContent? #13

Open marianopeck opened 10 years ago

marianopeck commented 10 years ago

I am trying with this example:

http://live.datatables.net/IroN/93/edit

but it doesn't work :( I am trying:

            api.colResize.init({widthMatch: 'none', dblClick: 'matchContent'});

Thanks!

maca88 commented 10 years ago

This is the right approach to enable the matchContent feature. I've tried it myself and it is working fine. Let me explain what this feature exactly does. When this feature is enabled, ColResize will trigger a function on each redraw that will clone the whole table, all widths applied to any th tags will be removed and the table-layout will be set to 'auto '. When the table-layout is set to 'auto' the browser will do the calculation of the column widths. After that calculation I just iterate over the columns and save the widths. Those widths will be used when a double click will be triggered.

Note: you can remove the widthMatch option as it does not exists anymore.

marianopeck commented 10 years ago

Ok, thanks for the explanation of what matchContent does. I misunderstood. It indeed displays what the table-layout: auto would do it. However, from a user point of view, that is different of what Excel does when you double click. Right? I though the matchContent would iterate over the rows (for that column) and see the size of the contents to set the minimum width to the column so that the contents of all the cells fit in one line.

I removed widthMatch, thanks.

maca88 commented 10 years ago

Yes I've added a wrong example... Excel was not a good one.

maca88 commented 10 years ago

In the lasted commit I've added a new option 'autoFit' for the dblClick setting, that should resize the column so that the contents will fit in one line. Do note that some columns will be resized a little more that it would be needed to fit in one line, because I've used the jQuery function outerWidth instead of width. That is because the width function in some cases didn't worked as I would expect. If you want to experiment with the width function you can change it in THIS line of code.

A live example: HERE

NOTE: the matchContent was renamed to autoMinFit and the origWidth to initWidth