Hello,
I need to get a table to have the following
width 100%, that the columns have adjust = “all” and when it is minimized in the x axis the browser appears the scroll, keeping adjust = “all” I have tried everything but I can’t, please help
Hello, @JAP
Standard scrollbars are static. They are enabled or disabled all the time.
Custom Scroll (pro option) are hidden until needed (i.e. if the user has brought the cursor to the table and there is something to, scrolling appears ). If you have a Webix Pro version, please consider using this option. If you prefer to use the standard scrollbars, it is possible to hide/show them manually via define method, which redefines a single configuration property (or an object with properties).
this.define({ scrollX: false });
To get scrollX
use config
property of datatable:
const scrollX = this.config.scrollX
To make scroll appear we suggest comparing the size of datatable with its inner content.
function toggleScroll() {
const scrollX = this.config.scrollX;
// get scrollable area and its parent container
const centerNode = this.$view.querySelector(".webix_ss_center");
const dataNode = centerNode.querySelector(".webix_ss_center_scroll");
// get sizes of these elements
const centerSize = webix.html.offset(centerNode);
const dataSize = webix.html.offset(dataNode);
// compare sizes and toggle scroll, if needed
if (dataSize.width > centerSize.width && scrollX === false){
this.define({ scrollX: true });
this.refreshColumns()
}
if (dataSize.width < centerSize.width && scrollX === true){
this.define({ scrollX: false });
this.refreshColumns()
}
refreshColumns is used here for refreshштп the structure of DataTable
For datatable react to each size changing it’s good to use onResize event
Here is an example: Code Snippet
Thanks so much!!! yes i have pro version of webix