question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Suggestion] ability to set the Column's width prop to "auto" or "content"

See original GitHub issue

I am using the Table component with two columns. Right now the width prop of the Column component appears to be mapped to the css flex-basis property so it basically sets the initial width of the column which can change depending on the flexGrow and flexShrink.

I wish I could use auto or content for the width prop of the Column component and not only number values since these are valid values for the flex-basis property.

In my case, I want the left column to grow as much as possible without overlapping the right column which default size I cannot guess since it depends on localized text.

Setting the flex-basis property to auto gives me the exact behavior I want but since the width’s prop must be a number there’s no way I can set it without this ugly css:

.myColumn{
   flex-basis: auto !important;
}

Suggestion: accept ‘auto’ and ‘content’ as well as numbers for the Column’s width prop.

Example:

<Table>
....
    <Column
    dataKey="name"
    label="Name"
    cellRenderer={this.nameRenderer}
    width="auto"
    flexGrow={1}
    />
...
</Table>

Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?

Browser Chrome 72
OS macOS mojave
React 16.5.2
React DOM 16.5.2
react-virtualized 9.21.0

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:5
  • Comments:9

github_iconTop GitHub Comments

19reactions
OnkelTemcommented, Dec 27, 2019

Check out the PR please.

  • removes required from Column’s width and assigns auto to flex-basis by default;
  • allows to use any string and number value for Column’s width.
8reactions
EliRobinsoncommented, Jun 1, 2021

It’s 2021, is this something that will be added? This would be very nice to have.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Change the column width and row height - Microsoft Support
Change the column width and row height ; Change the column width to automatically fit the contents (auto fit) · Under Cell Size,...
Read more >
Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`
So we need to start by specifying a minimum width for the columns, making sure they don't get too narrow. We can do...
Read more >
Column width won't adjust - Google Groups
1. Disable auto resizing (Options... on the Table tab). · 2. Disable any exact width for the entire table. · 3. Clear any...
Read more >
Not able to fix width of datatable columns - Stack Overflow
You need to adjust the data that you're sending. It doesn't make sense to set both aoColumns and aoColumnDefs . Use aoColumns only...
Read more >
column-width - CSS: Cascading Style Sheets - MDN Web Docs
The column-width CSS property sets the ideal column width in a multi-column layout. The container will have as many columns as can fit ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found