How to set table width limit & ellipsis with resize?

nwicki

I am using

• https://github.com/jeffreydwalter/ColReorderWithResize
• https://datatables.net/blog/2016-02-26

in my datatables implementation.

I built a showcase on https://jsfiddle.net/njprhuya/6/. As you can see I am using the ellipsis renderer with a cutoff of 5 for demonstration purposes.

Now, it is nice that we can see all data, but if we were to use the column resize functionality provided by the github code, it is of small use since the text shown stays the same even though there is more space available.

What I am pursuing is to adjust the cutoff depending on the size of the column. To achieve this I thought I could calculate the maximum table width, let the columns expand up to that maximum and after reaching the limit I could start applying the ellipsis cutoff on the columns pushing the table to its limit by equally truncating the words up to the point where they fit in the table container.

But since the table width is not limited by the container it seems as though it can expand arbitrarily (as you will see if you comment the ellipsis line in the datatable definition of the jsfiddle).

First of all, I would like to limit the table size to the size of the container. And additionally I would like to know how I best approach this or if it even is possible. Sadly, I have not yet found anyone else trying something similar with datatables.net.

nwicki

To solve my issue, I used browser support. On the following link you find how I did it:
https://jsfiddle.net/5zbgpsre/23/

I think its ugly to use constant column widths, but I could not find another way to limit the table width to the container size.

It is also nice to use the "scrollX: true" option in this case such that widening a column does not lead the table to reach beyond the container.