datable width 100% scroll and adjust

Webix JS
#1

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

#2

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

#3

Thanks so much!!! yes i have pro version of webix