How to create datatable responsive on the mobile view

Webix JS
#1

How to create datatable responsive on the mobile view.
Could you please send me the example for that

#2

Hey @shiv, you can make use of a fillspace property of the datatable columns to make ccolumns take up the free space available and make them responsive: https://snippet.webix.com/x16dsntq.

Here is an example to try out on your mobile device: https://responsive-dtable.netlify.com/.

If you want to learn more about responsive layouts, I recommend you reading [this] article.

#3

@Dzmitry I have a table layout where more than 7 column and I already use fillspace property, then some column are cropped on the mobile devices
320 resolution.

And you provided link https://responsive-dtable.netlify.com/
there is only 4 column are showing, so please open this url in 320 resolution now see the second column text is cropped from the right side.

Not you can guess if column is more than 7 then what happened.

I am unable to attach screenshot otherwise i attached for you reference.

Thanks for reply my query @Dzmitry

If you have a any solution for that then please let me know i really appreciate you and webix team.

Thanks

Shiv Shrivastava

#4

Yes, I did test the provided link beforehand on a mobile device, the column will simply take up all of the available space that is left to spare, since the other columns have a defined width, all of the column content won’t be able to fit inside.

The only thing you can do here specify the minWidth and add a scroll to the datatable as far as I can tell: https://dtable-scroll.netlify.com/.