Comments (4)
Hi @hlavacz
You should never define a component inside a component:
const Component1 = () => {
// ❌ new component is created on every rerender
const Component2 = () => <div>Component 2</div>;
return <Component2 />
}
// ✅ the component is defined once
const Component2 = () => <div>Component 2</div>;
const Component1 = () => {
return <Component2 />
}
Here's a fixed demo based on the code provided: https://codesandbox.io/s/pensive-newton-rwtgph?file=/src/Demo.tsx
from mui-x.
I found out, that styled DataGrid fire processRowUpdate if there is not used rowModesModel & onRowModesModelChange. When used normal DataGrid, not styled, it is fired also with using own modes model.
from mui-x.
Hi @hlavacz, thanks for bringing this issue to our attention, I have managed to reproduce it using the code provided.
As a temporary workaround whilst we look into the issue, you could apply styles to the data grid using the sx
prop, e.g:
<DataGrid
rows={rows}
columns={columns}
editMode="row"
rowModesModel={rowModesModel}
onRowModesModelChange={handleRowModesModelChange}
onRowEditStop={handleRowEditStop}
processRowUpdate={processRowUpdate}
slots={{
toolbar: EditToolbar as GridSlots['toolbar'],
}}
slotProps={{
toolbar: { setRows, setRowModesModel },
}}
sx={(theme) => ({
'& .rigel-row-blue': {
backgroundColor: getBackgroundColor(theme.palette.info.main, theme.palette.mode),
'&:hover': {
backgroundColor: getHoverBackgroundColor(theme.palette.info.main, theme.palette.mode),
},
'&.Mui-selected': {
backgroundColor: getSelectedBackgroundColor(
theme.palette.info.main,
theme.palette.mode,
),
'&:hover': {
backgroundColor: getSelectedHoverBackgroundColor(
theme.palette.info.main,
theme.palette.mode,
),
},
},
},
})}
/>
from mui-x.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.
@hlavacz: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.
from mui-x.
Related Issues (20)
- [data grid] `onCellSelectionModelChange` not triggered when ctrl+dragging to select additional cells HOT 1
- [DataGridPremium] Fork Exceljs
- [pickers] While dragging outside of the clockface the selection won't trigger HOT 1
- [data grid] `GridCellParams` TS type does not include `api` even though the object actually does HOT 1
- [fields][DateField] Enter/display week number on text field for datepicker HOT 6
- [data grid] Override the descendant count for row-grouping="multiple" HOT 1
- [data grid] How to use `renderCell` on an actions column type HOT 1
- [data grid] First row is 1px taller than other rows HOT 3
- [data grid] Select/deselect all is not working as expected in data grid premium with row grouping HOT 2
- [data grid] Customize grouping Rows HOT 5
- [TreeView] Use selectors on `TreeItem` instead of `instance` methods
- [pickers] The monthly label moves up with quickly switch between months HOT 2
- [DataGrid] Improve keyboard navigation based on the ARIA spec
- [data grid] Unexpected keyboard tab navigation behaviour within cells HOT 5
- [docs] Add a recipe for persisting filters on page refresh HOT 1
- Add new rows on DataGrid paste
- @mui/x-license 7.12.1 not available
- Exception when printing styled Data Grid with hidden columns "Cannot read properties of null (reading 'cloneNode')" HOT 1
- Editing row from example code not working
- [data grid] Apply page level filtering once all filter are selected and click on button like 'Apply Filters'
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.