Cell height & width; avoid "click here"

Webix JS
1

We are currently evaluating your pivot table tool. Looks good so far. I have a question and feedback:

Q:

Is it possible to customize the cell height and width? We need to show many rows and columns on the screen without scrolling. The current cell padding is way too big for us.

Feedback:

I find the “[Click to configure]” not intuitive - better to avoid “click here”, and better to indicate that one can click. I use the webix.i18n.pivot to say just “Configure” and added some CSS to show a button. Here is the CSS:

        .webix_pivot_config_msg {
            background-color: #eee;
            border: solid 1px #aaa;
            color: #336;
            width: 150px;
            height: 40px;
            margin: 25px 65px;
            line-height: 36px;
            -webkit-box-shadow: 2px 2px 5px 0px rgba(107,107,107,0.75);
            -moz-box-shadow: 2px 2px 5px 0px rgba(107,107,107,0.75);
            box-shadow: 2px 2px 5px 0px rgba(107,107,107,0.75);
        }
2

I found this in another post to control the cell width:

view: "pivot",
columnWidth: 70,
...

This solves the problem partially. I’d like to reduce the big cell padding to a very small one.

3

I’d like to reduce the big cell padding to a very small one.

You can customize left and right paddings of Pivot cells via css:

<style>  
    .my_pivot .webix_column > div {
	padding: 0px 5px;
    }
 </style>
...
view: "pivot",
css: "my_pivot",

To change rows height you can choose “compact” skin instead of default “flat” or change rowHeight of DataTable:

...
view:"pivot",
datatable: {
    rowHeight: 30
},
...