Handsontable: Changing heights and widths based on dynamic data - javascript

I'm creating tables dynamically based on user data, using Handsontable.
Question: How do I tell handsontable to adjust the height of rows and the width of columns based on the data and the available space?

Maybe this can help:
It is also possible just with CSS but probably you will have to override default min-width for td, th.
Check out this fiddle: http://jsfiddle.net/warpech/z9fYC/
or try also this:
I'm not sure if there is build in function to control this, however, there is hack using css width: in style
style: {
width:'800px'
}
A working example is here http://jsfiddle.net/FDpvV/1/
Here a hint: https://docs.handsontable.com/0.35.0/demo-scrolling.html

Related

How can I unshrink column headers of one2many tree view in odoo 14?

Odoo shrinks the column header based on datatypes and when there are many fields in one2many tree view. the columns are shrinked.
When I checked the file list_editable_renderer.js under web folder
There are these constants for column width
const fixedWidths = {
boolean: '70px',
date: '92px',
datetime: '146px',
float: '92px',
integer: '74px',
monetary: '104px',
};
I am just not able to solve this issue.
I tried changing few of the JS code, None seem to be working.
Any help or guidance would be of a great help
You can add a custom CSS to set the minimum width for those fields. You can set a class attribute on the tree view then, in CSS, use that class to target the tree and use the data-name attribute to target a specif field.
By default, min-width is set to 74px, use !important to force the new value.
To show Customer length label, try length of 130px.
Example:
.ef_saletree th[data-name="x_customer_order_length"]{min-width: 130px !important;}

ag-grid hiding everything below column headers if no data found

When I use ag-grid of given fixed height with Angular, before any data is shown the space where data will be shown (so grid in fact) is visible with text 'loading'. It's not correct in my case, as I don't bind rowData to Observable or Promise so it's not async. The grid is populated after click on button. I'd like to see only column headers and nothing below that. My grid config looks like that:
<ag-grid-angular
style="width: 100%; height: 335px;"
class="ag-theme-balham"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[rowData]="rowData"
animateRows
rowSelection="multiple"
>
So I'd like to hide whole grid except of column headers until rowData is empty array. Is there a way to do this?
Just to clarify, I use ag-grid with React but there are many similarities between the two. There are two things you can do here:
You can control what text is visible while loading or if there is no data with
[overlayLoadingTemplate]="<span></span>"
[overlayNoRowsTemplate]="<span></span>"
Since you are currently setting a fixed height in your in line styling for the grid, it will always be at 335px. Once you set that to something that's not static, you can add this prop to the grid and it will change the height of the grid depending on data inside.
[domLayout]="autoHeight"

how to set height and width for cells in backrid

i have integrated backgrid.js in my current assignment everything is working fine but i would like to know that how to set height and width for a cell in the backgrid table?
Is it possible to change the width and height of the backgrid table also how to use on mouse over events on the cell?
You can use jquery and CSS for changing cell height and cell width. You should also be able to use the css classes for cells to detect hovers as well.
Take a look at http://backgridjs.com/misc/styling.html. It explains all the classNames used for the different cell types.
Sorry I can't offer you any examples. I'd need a better explanation of your problem for that.
Yes, you can use CSS. You are using Backgrid so you have table with class 'backgrid'. Override existing Backgrid CSS. For example:
table.backgrid td {
//do something
}
Same as above, you can override height and width of backgrid table.

Make column width same for 2 tables

I am trying to implement a table structure in which the header remains fixed when i scroll down. I have used 2 tables for this purpose. The first table has the header values and the second table have the corresponding data(length of data in each column might vary as the data is populated dynamically). The problem is that the header width and data column width are not matching exactly.
I have written some code like shown below to dynamically alter the column width
$('#tdCheckAllBody').width($('#tdCheckAllHead').width());
$('#tdLoginBody').width($('#tdLoginHead').width());
$('#tdStatusBody').width($('#tdStatusHead').width());
$('#tdFNameBody').width($('#tdFNameHead').width());
$('#tdLNameBody').width($('#tdLNameHead').width());
$('#tdCompBody').width($('#tdCompHead').width());
But it doesnt seem to work properly. Any help appreciated.
Use this method
$(window).scroll(function(){
$("#id of the table header").offset({top:$("#id of the control which u placed the scrolling").scrollTop()});
});
Created a working fiddle for this:
http://jsfiddle.net/terjeto/dx7H5/
Offcourse if your case is different, you might need to tweak a litle. In my opinion the problematic areas are if the table use dynamic or % width and coping with the "auto" scrollbar which takes up approx 18px, and offcourse if the table needs horizontal scrollbars it complicates things a litle needing the onscroll event.
Could it be that your exmple is not accurate because of lacking reset-css code?
I use this: http://developer.yahoo.com/yui/reset/

Fixed Header/Scrollable Table with Variable Width

I realize this question has been asked quite a bit on Stack Overflow; however, after looking through a number of them, I believe my question has one more requirement. I want to transform a regular html table, into a table that can be scrolled both vertically and horizontally, while the the header remains at the top. The width of this table exceeds the width of the page, so I need the headers to move horizontally as the table is scrolled. I would prefer to use a pure CSS method; however, I will use Javascript if necessary. Have yet to find a solution that does all of this.
This solution might work for you depending on the style of your headers. It's pure CSS.
http://salzerdesign.com/blog/?p=191
Why would you not just use a and set a height and width for it allowing overflow. Then just simply place your table in there and you are good to go.
To me that just seems like the most logic and easiest way to go about it...
well you can use JQuery to do this in few lines of code,
you can see my other post to create a table with fix header
and scrollable body
Create Table with scrollable body
after that lets imagine you have one div for the headers with class name = "Top1" and one div for the body with class name = "Top2", you can bind the scroll of one to the other
$('.Top2').bind('scroll', function(){
$(".Top1").scrollLeft($(this).scrollLeft());
});
$('.Top1').bind('scroll', function(){
$(".Top2").scrollLeft($(this).scrollLeft());
});
jsFliddle demo
Here is a good jQuery plugin, working in all browsers! (check out the demo)
The result is a table with a fixed header, scrolling (for the moment..) only vertically, but with a variable width.
I develop this plugin to meet the problem of fixed header + flexible width.
Check it: https://github.com/benjaminleouzon/tablefixedheader

Categories