Set width in percentage

[BenMGilman]

Set width in percentage

[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.

[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.

[evilPaprika]

How to do that properly in 2024?

[neocybereth]

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)

[yangfei4913438]

@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)

This is very useful, we can add a global event listener and just regenerate the data when the window size changes.

 const getColumns = () => {
    return [
      {
        Header: 'Name',
        accessor: 'name',
        id: 'name',
        width: Math.round((window.innerWidth - 55) * 0.2),
        disableFilters: true,
      },
      {
        Header: 'Age',
        accessor: 'age',
        id: 'age',
        width: Math.round((window.innerWidth - 55) * 0.2),
        disableFilters: true,
      },
      {
        Header: 'Visits',
        accessor: 'visits',
        id: 'visits',
        width: Math.round((window.innerWidth - 55) * 0.2),
        disableFilters: true,
      },
      {
        Header: 'Last Visit',
        accessor: 'last_visit',
        id: 'last_visit',
        width: Math.round((window.innerWidth - 55) * 0.2),
        disableFilters: true,
      },
      {
        Header: 'Status',
        accessor: 'status',
        id: 'status',
        width: Math.round((window.innerWidth - 55) * 0.2),
        disableFilters: false,
      },
    ];
  };

  const [columns, setColumns] = useState(() => getColumns());

  useEffect(() => {
    const resizeCols = () => {
      setColumns(() => getColumns());
    };
    window.addEventListener('resize', resizeCols);
    return () => {
      window.removeEventListener('resize', resizeCols);
    };
  }, []);

[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.

[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 

[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))

[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 ***@***.***> wrote: @tannerlinsley ***@***.***/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 ***@***.***/2?redirect=https%3A%2F%2Fgithub.com%2Freact-tools%2Freact-table%2Fissues%2F43%23issuecomment-421319601&recipient=cmVwbHkrMDA1NTI2MDk1MWIxMmE1NzBkNWVhYmEzYzcxMzUwZGExMTJlY2QwNTUwNDQ4MDQ3OTJjZjAwMDAwMDAxMTdiMzU0OWI5MmExNjljZTBjMWMwZDVhQHJlcGx5LmdpdGh1Yi5jb20%3D), or mute the thread ***@***.***/3?redirect=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAFUmCXKZm1-4-tccy7j7OIbDKszc6xOdks5ua4obgaJpZM4LtwC0&recipient=cmVwbHkrMDA1NTI2MDk1MWIxMmE1NzBkNWVhYmEzYzcxMzUwZGExMTJlY2QwNTUwNDQ4MDQ3OTJjZjAwMDAwMDAxMTdiMzU0OWI5MmExNjljZTBjMWMwZDVhQHJlcGx5LmdpdGh1Yi5jb20%3D).

[oshiniG]

any update for using percentage values related to width?

[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?

[annie-l]

or could you do something like colspan to support flexibility?

[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.

[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

[damianobarbati]

@evilPaprika how did you solve this?

[DreierF]

I also needed columns to have a given fraction of the overall table and came up with the following solution:

https://gist.github.com/DreierF/0511d58d36c3ac2aaa0aa68807efb912

It can be plugged in as a feature into Tanstack Table v8 and allows to specify column sizes either as pixel values or fractions of the remaining table space. Would also be easy to extend this to percentage, but IMHO fraction is easier to deal with as you don't need to ensure that the values add up to 100%. Maybe this is a helpful starting point for others facing a similar challenge.