Skip to content

Width of column custom does not work in version 5 alpha #505

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
camux opened this issue Mar 9, 2025 · 3 comments
Open

Width of column custom does not work in version 5 alpha #505

camux opened this issue Mar 9, 2025 · 3 comments

Comments

@camux
Copy link

camux commented Mar 9, 2025

Describe the bug
When try set width of column custom does not work in version 5 alpha, we only see in hte inspector 150px, as fixed value you set another value but this not change for example width: 110

Screenshots or gifs

Image

Your environment details

  • Device: desktop
  • OS: Ubuntu 24.04
  • Browser : Firefox
@camux
Copy link
Author

camux commented Mar 9, 2025

Ok I fix it with this hack in css

.rgGridContent {
grid-template-columns: none !important;
}

@webloopbox
Copy link
Contributor

Column width should not be defined by adding the width property to the cell object under props. Instead, it should be set by passing an array to the columns prop of the ReactGrid component:

For example:

const columns = [
  { colIndex: 0, width: 220 },
  { colIndex: 1, width: 220 },
  { colIndex: 2, width: 220 },
  { colIndex: 3, width: 220 },
];

<ReactGrid columns={columns} />

Setting grid-template-columns to none via CSS is not recommended

@Zenairo
Copy link

Zenairo commented Apr 25, 2025

I have tried the suggestions here.

Overriding grid-template-columns removes all flexibility and you need to know all your column width values beforehand. Although, it was the only way I could get any column width below 150px.

Setting the column width using the width property on columns passed to ReactGrid only works for values over 150px.

I need to go lower than 150px and have been unable to find a way to do that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants