Column width stopped working?

[infokiller]

Hi, and thanks for the great project! When I try to set the column width (as documented here), it doesn't seem to work for me. I tried it with code similar to what you wrote in https://github.com/mwouts/itables/issues/5#issuecomment-549679169 but it seems to have no effect:

I got the same result in both jupyter lab and the classic notebook. I'm using Python 3.8.15 and the following:

itables                  1.4.1
jupyter_client           7.4.8
jupyter_core             5.1.0
jupyter-events           0.5.0
jupyter_server           2.0.0
jupyter_server_terminals 0.4.2
jupyterlab               3.5.1
jupyterlab-pygments      0.2.2
jupyterlab_server        2.16.3
jupyterlab-widgets       1.1.1

I hope this is enough details to reproduce, but if you can't reproduce it, please let me know and I'll try to reproduce it in docker.

Thanks!

[mwouts]

Hello @infokiller , thanks for reaching out!

Well I am afraid you're right - even the example in the documentation does not seem to have the right column width...

Maybe this is because of the new default value for style? We have added table-layout:auto to the default style and maybe that conflicts with the columns widths. Could you try with e.g.

show(df, columnsDefs=..., style="width:auto;margin:auto")

[infokiller]

Thanks a lot for the quick response @mwouts I tried style="width:auto;margin:auto" but that didn't change anything. I also tried to install a couple older versions of itables (0.4.0, 1.3.5) and that didn't change anything

[infokiller]

It seems the column width sets a minimum, but does not limit the width of long columns, for example:

I created a repo that demonstrates the issue at https://github.com/infokiller/jupyter-itables-test

You can reproduce it with that repo and docker:

git clone https://github.com/infokiller/jupyter-itables-test jupyter-itables-test
cd jupyter-itables-test
docker build .
docker run rm --interactive --net=host -p 9999:9999 "$(docker build . -q)" jupyter notebook --no-browser --allow-root --port=9999

[mwouts]

I think this relates to the width of the table. Could you try enforcing a fixed width like in the below? (in text: show(df, columnDefs=[{"width": "60px", "targets": "_all"}], style="width:120px;margin:auto"))

If we can it would be great to find out what is a value for width that makes this automatically work!

[infokiller]

I get similar results, but not identical- I also need to set overflow:hidden; text-overflow:ellipsis in the style parameter:

[infokiller]

Sorry, adding overflow:hidden; text-overflow:ellipsis only makes the table header element the same as in your screenshot, the regular rows are not affected.

[mwouts]

Hi @infokiller , I have updated the documentation to make the examples work and also point out at the required modification on the style argument.

Re the text-overflow settings, maybe you want to update the CSS that is used for all the tables? The default values are in itables.css. To change them in your notebook, see the documentation on the css option.

[infokiller]

Thanks @mwouts that's great I will change the CSS in my notebooks for now, I'm worried that if I change the defaults it will negatively affect other users. When I get a chance, I'll try to test the CSS in a clean environment (container/VM) to make sure there's nothing specific to my setup, because