CODEWITHSUNDEEP
reactjsmaterial-ui
Ezrab_
Ezrab_

Reputation: 973

React.js - Material-ui DataGrid disable row width

Is it possible to change the width of a row? I have some rows with JSON data. It would be best to display them in a <pre> tag so that the user can view it naturally, but this seems to be impossible.

So now I'm wondering is it possible to remove the default overflow-x: hidden? And to just let the user scroll to the end of a row? Instead of the text just having 3 dots at the end, because there's a max-width.

Upvotes: 1

Views: 2281

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

In the data-grid css api they show the necessary classes which could be overridden, and at the end they say:

You can override the style of the component thanks to one of these customization points
...

So you could add the following style rule to override the default one :

.MuiDataGrid-root .MuiDataGrid-cell {
  text-overflow: initial;
     overflow-x: auto;
}

Edit Material demo (forked)

Upvotes: 1

Related Questions