I can not figure out what is the best way to allow pivot cells (header and regular) to warp text on multiple lines.
Requirements:
- number of lines not fixed (cell text length can be dynamic, and it is not known in advance what would be it’s length and how may lines would it need to fully display)
- cells text wrap and height should react on column resize
As far as I understand that should be possible with some combination of datatable.fixedRowHeight = false
and calling adjustRowHeight()
in onColumnResize
event and on pivot init. Also some additional css may be needed to apply for header and regular cells, like ‘word-break: break-word’, or ‘white-space: normal’ and ‘line-height: normal’
But I wasn’t able to achieve a desired result. The most problematic part here is to adjust header height (it doesn’t react on adjustRowHeight()
).
Please help!
Thanks!
Will appreciate some help with this!
Thanks!
Hi @vitaliy_kretsul
Thank you for waiting.
The overall solution can look as follows: Code Snippet
In a regular Datatable, the similar settings look much easier to apply (Code Snippet), but that’s because they can be set initially.
In Pivot, such customization will require reviewing the related code and replacing default modules with their extended version. The Table view is available in source code at sources\views\table.js
.
Once the new data is received, the widget rebuilds the inner treetable with the new columns, then the data is parsed to the updated table.
The solution can be divided into the following steps:
- modify default table configuration (
config()
) and add fixedRowHeight: false
,
- intercept creation of columns and set autoheight and CSS for multiline headers
(in SetColumns()
/ SetFirstColumn()
),
- call
adjustRowHeight
after the data is parsed ( UpdateTable()
).
Additionally, the Treetable with icons in the column (rendered by common.treetable()) requires a more complex template to place the multiline text correctly.
Also, I must admit that the adjustRowHeight
can be a quite heavy operation on big tables, since it calculates the height of the content for each cell.
OMG dear @Listopad
You must have spent quite some time composing this very detailed and exhaustive answer. And I was stupid enough to not mention that I need this solution for an outdated version of the lib (before v9.0, when it was rewritten on Webix Jet).
Please, forgive me
The same can be applied for the old Pivot (8.4 and below), but with a different approach.
https://snippet.webix.com/2fn6g7hm
The aggregated data and columns will be available in onBeforeRender
event, and you can iterate all columns there.
Please note the comments in the html/styling section of the snippet: by default, font size for the first column is bigger than default, while Webix measures text in table cells according to the default skin settings.
The measurement settings for cells are global (will affect all calculations made by adjustRowHeight
anywhere).