Auto Resize datatable to Window Size

Webix JS
1

Hi,

I’m new to Webix and trying to use datatable for an application. Below are a couple of things I’m trying to figure out. Thanks for any advice you can give.

  1. Is there an easy way to automatically resize the table to fit window size. Is there a quick way to do this using webix layout? The quick solution I found is to adjust the container

    of datatable on window resize event and then call adjust() function of datatable. I’m wondering if there’s a more elegant way out of the box?

  2. How can I adjust column widths in datatable to fill full width of window? I’ve found the fillspace property in column config. But is there a way to proportionally allocate white space to all columns, instead of just one of them?

Thanks again.

2

Is there an easy way to automatically resize the table to fit window size.

If you init datatable directly on document.body it will resize itself automatically after window resize ( also, if you init layout on document.body and place grid in the layout - it also will react on window resize )

If you are placing datatable in some div on the page, it will not resize self automatically. You can add onresize handler to call adjust or, use the “position” attribute

http://webix.com/snippet/7827b95c

This is actually a not documented side effect, so it can be replaced with more official solution in future.

is there a way to proportionally allocate white space to all columns

Currently there is no such option, but you can use onResize event to define custom sizing logic

http://webix.com/snippet/ef622f39

3

Thanks for the suggestions, makes sense to me. I’ll give them a shot. Btw, just want to say that webix is the best out there that we’ve seen. Great work!

4

I get a script error in Chrome when running the second snippet.

5

Starting from Webix 2.0 you need not use onResize event, as you can have fillspace set for multiple columns.

http://webix.com/snippet/8c84076c

I have updated link in the above post with the valid one. setColumnWidth API was changed in Webix 2.0 and requires column id not column index as it was previously.