How can i define the size of each column in pivot element

Webix JS
#1

I need to define the size of each column in the pivot. I can’t find a way to do it.
I try onBeforeRender but this event is not working.

#2

Hello @Juan_Gonell,

The Pivot and most of our complex widgets (except Kanban and Spreadsheet) are built as modularized apps on Webix Jet, and the user can customize existing modules or add new ones.

Modules are implemented as JetViews (ES6 classes) where any UI element, data-related service, or feature can be customized by the same rules. For more details about this architecture, please check the following blog article, which describes the general idea and reasons for this structure.

Please note that complex modifications may require observing the source code of the tool in order to build the most feasible solution that will correctly alter/extend the original logic.

By inheriting the table view (full view Class Map you can find here) we create a new class (for example, CustomSizeTable). Inside of this class we need to customize the SetColumns() function (default fucntion you will find inside sourse code):

class CustomSizeTable extends pivot.views.table {
  SetColumns(columns, footer, marks, transpose, lastId) {
    const cols = super.SetColumns(columns, footer, marks, transpose, lastId);
    cols[3].width = 50 // setting width to the 4th column
    return cols;
  }
}

And replace default view via the override map:

  override: new Map([[pivot.views.table, CustomSizeTable]]),

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

#3

I need override the data load, and it works.

override: new Map([[pivot.services.Backend, MyBackend]]),

But when i put the other override

override: new Map([[pivot.views.table, CustomSizeTable]]),

the pivot control says

“Incorrect formula in values”

#4

Could you please share a snippet of code in our snippet tool with a described problem? Thank you in advance.

#5

https://snippet.webix.com/gps0dmp5

#6

There are a few things to note in your example:

  1. container:"webix_container" doesn’t exist;
  2. locale doesn’t exist (should be setted, for example: Code Snippet);
  3. propery columns can’t be empty, so if the columns are not needed, it should be deleted;
  4. each property, including override must be specified only once.

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