I am making a virtualized table using react-table and react-window. Without using virtualization, the columns in the table are displayed evenly, the total width is normally calculated and so on. But with virtualized list I can't get the same result. Does anyone have any experience using these libraries in this case?
With virtualizarion
With normal table
Yes, I had the exact same problem, ended up using CSS to customize each width on each column in the header and then on the rows.
Related
For a printable layout I want to display a dynamic list (coming from an array) that should 'flow' through 4 columns of different heights, to look like this:
The blue elements are the four columns with the list (ul) inside.
The heights of the blue columns are fixed.
How can I achieve this with CSS? I looked at multicolumns in css but there the columns have to be the same height so that's not working I guess.
What's the best way to do this? It's fine if it only works in current web browsers.
I checked out 'flexbox' as well as 'css-grid' and even though it may be achievable I resign from doing it.
Instead I took another way and changed the initial array in the way I can comfortably place it in the different (now not connected) DIVs.
I'm trying to implement table in react that satisfies below requirement:
Column is resizable
Table width is not fixed, just full fill the table's container
Column width can be in pixcel or percentage
If columns width is not set, they will occupy the rest of horizontal space of table
I see some suggestions to use react-table. Here is one example:
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-resizing
But this library seems to be:
Column width must be set for every column (requirement #2, #4 not satisfied)
Not supporting column width in percentage (requirement #3 not satisfied)
could anyone help suggest me how I can handle with react-table to adapt needed requirements?
If it's impossible with react-table, do you know any other library or any other approach I can try ?
Thankyou all!
I want to manual set column(head and body) size(width, height).
I tired to set style but not work and find all document not found about this.
DataGrid Component
DataGrid set width size not work
Setting the column width:
<clr-dg-column [style.width.px]=“200”>my column</clr-dg-column>
This will also set width for all column cells.
To control height and width you can either put the datagrid inside a container with a set height/width.
After i tired use set style on template(html)
my column
I have other problem when use follow Server Driven(https://clarity.design/documentation/datagrid/server-driven)
When next pagging each column length adjusted according to data i found overlap column
Data overlap column
and when binding long length data i found header separate column incorrect
header wrong separate column
My solution i think i have to loop for looking longest length and setting style width and writing logic in to typescript.
Have any solution easy way please suggest me.
I'm trying to build a genealogy tree with HTML tables (and nested tables). It should, ultimately be editable by the user using contenteditable, and the nested cells should resize accordingly.
However, to my mystery, when I edit the cells, they resize far too fast and too much. Why so?
The outer table keeps everything under control, so sizes are fixed using
table-layout:fixed;
The nested table cells, on the other hand are only specified via
margin:auto;
Every cell's width is set individually via percentage, and it looks perfect before editing. Not so after.
DEMO here http://jsfiddle.net/KtB6C/
Try editing the Father or Mother cell.
I know this is a "fix-my-code" problem, but any help is appreciated.
I have mx DataGrids with custom item renderers on one column based on HBox. I tried to optimize them using the spark MXDataGridItemRenderer class, but using it results in the first row of the column being 2px shorter than the rest, as if the first row got hidden under the grid header. From the second row onwards the height is ok, but the first row problem results in every row being shifted up 2px. When selected, it looks just bad.
Any ideas would be much appreciated.
I have seen this issue before as well. I am not sure what the RIGHT answer is but to solve it for my app I stopped using the spark crap. I see the benefits of spark but for me, its frustration level outweighs its usefulness. So the way I see it, you have 2 options:
1: Create MXDataGridItemRenderer for each grid column so that they are all uniform.
2: Don't try to optimize them and just stick with the HBox solution (thats what I did).