Accordion item in datatable

Webix JS
1

Hi I’m new to this library.
I’m trying to add a collapsable column to my datatable, is it possible to make a column an accordion item inside a datatable?

Many thanks

2

Hello @gcampof,

If you need to hide a column, you can use hideColumn/showColumn via the API or via headermenu (Code Snippet).

There is no built-in collapse of one individual column, but simple customization can be done. If one column needs to be visually “collapsed” but remain visible, you can change its width via the API (setColumnWidth() method) and add a condition to the template according to which the content will be displayed depending on the width of the column.

You can do the same when collapsing a group (onColumnGroupCollapse) to slightly “collapse” the first column along with the entire group.

Please, check out the snippet with the example: Code Snippet

Also, to “collapse” one individual column, you can add a custom button (for example, use a masterCheckbox) to the header to change its width: Headers and Footers of DataTable, Configuration Webix Docs

1 Like
3

Hello Natasha,

Thanks a lot for your suggestion and the Snippet, I will try to implement something similar in my datatable!

1 Like