React-table: Set width in percentage

[BenMGilman]

Is it possible to set min/max width in percentage rather than pixels? Giving the variable minWidth: '40%' sets the inline style to 100px, which I think is the default.

[tannerlinsley]

This is a great question. I'm trying to think how that would work with flexbox right now. Would you expect the percentage to be relative to the width of the table viewport? I'll have to experiment with this :)

[BenMGilman]

Yes, exactly! What I really need is to set relative scaling. So, if I have 4 columns, and I want the 1st column to be twice the size of the others, the flex properties would be 40, 20, 20, 20, respectively, rather than all 25.

[BenMGilman]

(sorry didn't mean to actually close this)

[tannerlinsley]

Still working on this. I did just add support for all pixel widths though. minWidth, width, and maxWidth

[tannerlinsley]

the more I'm getting into this, I'm not sure if it's going to work exactly how I was thinking. Especially when mixing percentage widths with min/max widths and static widths. I'm going to keep working on it, but just wanted to report back on the difficulty ;)

[BenMGilman]

Thanks for the help! We could overwrite inline styles with css and !important but would prefer if we didn't have to go through all that

[tannerlinsley]

Absolutely. I'm with ya. I'll give it a fresh look this week and see if I can't achieve it another way ;)

[tannerlinsley]

Closing this one for now. Multiple attempts have been made and nothing seems to get the job done correctly. I'll keep trying as the code matures.

[chin2km]

Any update on this yet?

[abhandaru]

I think this is an important feature.
Feel free to narrow down the scope of the behavior.
For instance, it is not unreasonable to require that all widths be percentages when using fractions.
Admittedly this is a tradeoff, but hard-coding the width is definitely not ideal.

[yniknafs]

I'm really surprised this does not exist. Seems like a really useful / standard feature for a table. Hard-coding widths gives basically 0 flexibility for window resizing.

[annie-l]

or could you do something like colspan to support flexibility?

[saiemsaeed]

@tannerlinsley any update for using percentage values on minWidth, maxWidth and width?

[tannerlinsley]

Percentages will not likely be supported in this version of react-table. This is mostly because RT's layout engine is built on flexbox and is already extremely complicated. We can investigate this feature in future versions of RT though.

Sent from Mailspring (https://link.getmailspring.com/link/[email protected]/0?redirect=https%3A%2F%2Fgetmailspring.com%2F&recipient=cmVwbHkrMDA1NTI2MDk1MWIxMmE1NzBkNWVhYmEzYzcxMzUwZGExMTJlY2QwNTUwNDQ4MDQ3OTJjZjAwMDAwMDAxMTdiMzU0OWI5MmExNjljZTBjMWMwZDVhQHJlcGx5LmdpdGh1Yi5jb20%3D), the best free email app for work
On Sep 14 2018, at 4:51 am, Saiem Saeed [e-mail] wrote:
>

@tannerlinsley (https://link.getmailspring.com/link/[email protected]/1?redirect=https%3A%2F%2Fgithub.com%2Ftannerlinsley&recipient=cmVwbHkrMDA1NTI2MDk1MWIxMmE1NzBkNWVhYmEzYzcxMzUwZGExMTJlY2QwNTUwNDQ4MDQ3OTJjZjAwMDAwMDAxMTdiMzU0OWI5MmExNjljZTBjMWMwZDVhQHJlcGx5LmdpdGh1Yi5jb20%3D) any update for using percentage values on minWidth, maxWidth and width?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub (https://link.getmailspring.com/link/[email protected]/2?redirect=https%3A%2F%2Fgithub.com%2Freact-tools%2Freact-table%2Fissues%2F43%23issuecomment-421319601&recipient=cmVwbHkrMDA1NTI2MDk1MWIxMmE1NzBkNWVhYmEzYzcxMzUwZGExMTJlY2QwNTUwNDQ4MDQ3OTJjZjAwMDAwMDAxMTdiMzU0OWI5MmExNjljZTBjMWMwZDVhQHJlcGx5LmdpdGh1Yi5jb20%3D), or mute the thread (https://link.getmailspring.com/link/[email protected]/3?redirect=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAFUmCXKZm1-4-tccy7j7OIbDKszc6xOdks5ua4obgaJpZM4LtwC0&recipient=cmVwbHkrMDA1NTI2MDk1MWIxMmE1NzBkNWVhYmEzYzcxMzUwZGExMTJlY2QwNTUwNDQ4MDQ3OTJjZjAwMDAwMDAxMTdiMzU0OWI5MmExNjljZTBjMWMwZDVhQHJlcGx5LmdpdGh1Yi5jb20%3D).

[sean-magin]

a solution to this could be something as simple as:

This would give your particular column a screen width of 20% ; not very dynamic though.
width: Math.round(window.innerWidth * 0.2)

[colomar]

Given react-table is using flexbox, wouldn't it make sense to allow setting the flex-grow and flex-shrink properties of each column instead of percentage widths? That should give you similar results if I understand flexbox correctly.

[oshiniG]

any update for using percentage values related to width?

[samueldjones24]

@colomar We managed to use flex-grow in this case and it does the trick:

CSS:

.react-table-column-flex-grow-1 {
  flex-grow: 1 !important;
  width: unset !important;
  flex-basis: 5px !important;
  max-width: none !important;
}

JS

getTdProps={( state, rowInfo, column, instance) => 
({ className: `react-table-column-flex-grow-${column.flexGrow}` })}

Also, don't forget to set a flexGrow property in the relevant column(s):

Header: "Reference"
accessor: "refId"
flexGrow: 1
width: 100 // you could also play with the width value 

[yniknafs]

@joaquinox Thanks for this. looks great.

to clarify - in your code above. flexGrow: 1 turns it on? Where are you actually setting the percentage?

[samueldjones24]

@yniknafs Apologies, this is a workaround to setting a percentage. We are simply setting the flexGrow property as per docs.

[therohitjha]

a solution to this could be something as simple as:

This would give your particular column a screen width of 20% ; not very dynamic though.
width: Math.round(window.innerWidth * 0.2)

you can do like this too,just pass variable value as decimal value like 20 which means 20%.check the example with image.

width: Math.round(window.innerWidth * (value/100))

[adamscybot]

I have a very hacky plugin hook to use alongside flex layout. When I say hacky, I mean hacky -- use with caution. It even works with resizable columns. Here it is: gist.github.com/adamscybot/65df3ce2b155c20c8b867786ef612e72