I'm trying to develop a fixed header table.It is a kind of widget, where use will be allowed to set width to columns whichever he wants.
Scenario:
Table(width is set to 500px) has four columns where if we don't specify width at col tag level,all columns are optimized to total table width like this:
If we specify width to 2 columns at col level whose total width is less than table width, then table looks like as follow:
But, if width of the 2 columns are greater than table width, then remaining columns are getting hidden, though table wrapper(<div class="v-grid-content">) has overflow:auto.Scrolling is enabled but only two fields are shown:
I am not getting what is wrong, can somebody help. Here is the jsfiddle.
I tried to keep min-width to col,but that didn't work.
Do we need to set width to every col??
Do we need to set width to every col?
No, you don't. You can set a width to some – any other column widths will get computed by the browser as usual. (Taking into account the widest content of that column and the overall table width.)
Related
I have a Material UI Table below. All of the table's columns are fit sized to 205px. Table itself set to be 100% width. So when I load the page if there is available space table do get bigger. The problem is if there is not enough space columns need to shrink based on the text inside them but they don't. They are stuck at 205px width.
I removed all paddings no help either. Text inside the each cell is an input field so if I make the input field width and all cells 60px the width went down to 191 but it's still giving each cell way bigger width than they need so columns are way larger than they should be. I changed width of the table, width of the container all no help.
I have pretty much exact table structure as in this example here;
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table
If you see table columns unnecessarily too large in this example too. What's causing columns to be way larger than what they need to be? Why they're all identical fixed to some size?
The input in the table cells have a default width and are making the columns to be not shrinkable, Changing width of input to 100% might make input to take parents width.
https://codesandbox.io/s/optimistic-benz-ilnz2
I want to make auto size content for one spesific column at ag-grid. But I think this autoSizeColumns proeprty for all grid columns. What can I do? Is there anything else?
autoSizeColumns(colKeys) accepts an array of column IDs to auto size based on their content.
gridOptions.columnApi.autoSizeColumns(["SOME_COLUMN_ID"]);
Also setting the minWidth && maxWidth in the column definition will lock the column size regardless of dragging the header or using one of the API methods.
Does such a script exist?
Masonry and flexbox do not make columns match end to end, like Flickr does; and obviously so, because neither resize height.
I want to be able to take elements of any (relative) width, and have a script resize their height like Flickr .
Basically, take a container with 6 elements. Imagine they exist as 2 columns with 3 rows.
Now, if element #2 is a few pixels more narrow than the other 5, the top column will end a few pixels before the bottom column does. I don't want this to happen.
I generally set fixed column widths via CSS with flawless results:
#tableID thead tr th:nth-child(1){width: 75px;}
#tableID thead tr th:nth-child(2){width: 75px;}
/* etc… */
But now I'm in a situation where I won't know the desired column widths until runtime. Here's an excerpt from the code I'm using to dynamically set the column widths:
var tr=$("<tr>");
var colArr=Home.ColDefs[this.statBatchType].colArr;
for(var i=0;i<colArr.length;i++){
var col=colArr[i];
tr.append(
$("<th>")
.html(col.title)
.css("width",col.width)
);
}
this.jqTHead.append(tr);
Sorry this code is a bit out of context but the bottom line is that I'm adding columns, represented by <th> elements, to a table header and setting each one's width.
What ACTUALLY happens, however, is that Firefox is treating the column width as a minimum and then automatically expanding the column width as the user expands his browser window. Consider a case where my JavaScript code sets the width of each column to 75px. Firefox will ensure each column is at least 75px wide, but if the user maximizes (or enlarges) his browser, provided there is sufficient room, each column will be automatically widened.
This is odd to me since the JavaScript code would seem to be the functional equivalent of what I was doing in CSS. Yet the CSS approach doesn't cause this odd behavior.
Any thoughts?
Fix the width of the <table> this will ensure the table does not take the available size and bump the layout.
table-layout: fixed; on the table does exactly this: columns never expand to fit their contents, and if you give the table itself a width, the extra space is divided equally. The contents of cells don't come into play at all.
I'm using SlickGid 2.0 and I'd like to be able to set the width of each column based on the longest string contained in the column. I'm fine calculating the required width, but I cannot figure out how to set the width of a column outside of faking a drag event. Is there any other way to individually set the widths of columns in SlickGrid?
According to comments in the source code, you can set model[cell].width to adjust the width of individual columns.
See comments here:
http://code.google.com/p/slickgrid/source/browse/trunk/slick.grid.js?r=9