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!
Related
I would like to make a table with resizable columns, where the columns start out automatically sized so that they are the width they need to be to contain the text that's in that column.
I have been able to achieve these separately, but not together.
It seems that the problem is that react-table requires you to use either FlexLayout, BlockLayout, or AbsoluteLayout to be able to resize the columns, but this causes table elements to be replaced with divs. When the divs are giving an "auto" width, each one individually fits to its contents, which creates a "brick wall" of stacked divs, and not a table where all the cells in a column are aligned.
Here is an example of the brick wall effect: https://codesandbox.io/s/nervous-goldstine-s12pve?file=/src/components/DataTable.js
Commenting out line 11, which sets the column widths to 'auto', will fix the alignment issues, but the columns will be wider than they need to be. If instead you comment out line 30, the column width issue will be resolved, but the columns will no longer be resizable.
Is it possible to have both of these features?
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.
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.
Here is code example: http://jsfiddle.net/gubvw/3/
If you'll slowly change screen size by dragging sizer in testing window you'll see that number columns scattered.
What can I do to fix this trouble?
UPDATE: This is for FLUID CSS GRID system to make layouts for webapps. I don't want to get table. And the example is for testing this grid on resize and other dimensions.
I think that the problem is in browser which calculates .cx1 to 55+43px and round it to pixels,
and .cx5 calculates to 449+43px not watchind that .cx1 rounded to 55px.
Specially for Dexter Huinda:
There is 100% width? and 12 columns with 3.8% margin right (except the last).
So for cx1 = (1*(100+3.8))/12-3.8 = 4.85%
for cx2 = 4.85*2+3.8 = 13.5%
for cx3 = 4.85*3+3.8*2 = 22.15%
and so on.
The main formula to calculate any column width from 1 to 12 is
(a*(100+b))/12-b (where a = number of spanned columns and b is margin)
Any questions to math?
And the question is why: width(4.85%+3.8%+4.85%+3.8%+4.85%) <> width(22.15%)
So if you need nothing to explain please find the mistake in any .cx width. Can you?
Either you should use div with fixed width that you may provide in your css file or you can make it via table. Actually your divs are not properly tightened together. This is the main reason.
I think your approach could do with some rethinking.
If you need to align columns, use either a table or use fixed width divs. You are using classes, so why not apply fixed widths via the class, and not the percentage widths that are there.
Using a fixed width font in conjunction could also give a desired effect.
Solution is here: http://jsfiddle.net/NwkPz/.
Thanx to Vasiliy Aksyonov (Web Standards Days) && Vadim Makeev (Opera Software)
))
I have a DataGrid that has between 4-10 columns. I want the columns to be of width '50'. I have already set the width attribute in MXML. I am using "colName.hide = true" to hide various columns depending on whether I have data. I find that my columns expand when I have less columns. Is there a way to set the max width of a column or force it to keep the same width?
Why not just resize the width of the datagrid itself to 50 * amtOfCols when columns are hidden and shown?
You have to leave one column with undefined width - it will stretch when parent (grid) will be resized.
Or, you should recalculate and apply width of the greed dynamically