Comments (4)
Hey @master117 ... what you want to achieve is basically a cell that is in edit state infinitely, right?
You can achieve that by just controlling the edit state on load:
import React from 'react';
import { DataGrid, GridRowsProp, GridColDef, GridRowModes } from '@mui/x-data-grid';
import { randomCreatedDate, randomTraderName, randomUpdatedDate } from '@mui/x-data-grid-generator';
const columns: GridColDef[] = [
{ field: 'name', headerName: 'Name', width: 180, editable: true },
{
field: 'age',
headerName: 'Age',
type: 'number',
editable: true,
align: 'left',
headerAlign: 'left',
},
{
field: 'dateCreated',
headerName: 'Date Created',
type: 'date',
width: 180,
editable: true,
},
{
field: 'lastLogin',
headerName: 'Last Login',
type: 'dateTime',
width: 220,
editable: true,
},
];
const rows: GridRowsProp = [
{
id: 1,
name: randomTraderName(),
age: 25,
dateCreated: randomCreatedDate(),
lastLogin: randomUpdatedDate(),
},
{
id: 2,
name: randomTraderName(),
age: 36,
dateCreated: randomCreatedDate(),
lastLogin: randomUpdatedDate(),
},
{
id: 3,
name: randomTraderName(),
age: 19,
dateCreated: randomCreatedDate(),
lastLogin: randomUpdatedDate(),
},
{
id: 4,
name: randomTraderName(),
age: 28,
dateCreated: randomCreatedDate(),
lastLogin: randomUpdatedDate(),
},
{
id: 5,
name: randomTraderName(),
age: 23,
dateCreated: randomCreatedDate(),
lastLogin: randomUpdatedDate(),
},
];
const rowModesModel = rows.reduce(
(acc, row) => ({
...acc,
[row.id]: {
mode: GridRowModes.Edit,
},
}),
{},
);
export default function App() {
return (
<div style={{ height: 300, width: '100%' }}>
<DataGrid rows={rows} columns={columns} editMode={'row'} rowModesModel={rowModesModel} />
</div>
);
}
from mui-x.
No, this cell will not update my state. I need my state to be updated on every input or when leaving the field.
(I also prefer the design of a textfield in the table over a cell in edit mode.)
from mui-x.
How do I prevent navigating off? Changing all cells of that column to edit mode is visually unappealing but maybe this can be countered with css?
You could prevent keyboard events from propagating by adding an onKeyDown
event and calling the stopPropagation
method on the event.
<TextField
error={!IsNumeric(params.row.age)}
value={params.row.age}
onKeyDown={(event) => {
event.stopPropagation();
}}
onChange={(event) => {
const temp = [...rows];
const index = temp.findIndex((x) => x.id === params.row.id);
temp[index] = { ...temp[index], age: event.target.value };
setRows(temp);
}}
/>
Is this even a good idea?
One consideration is that by hijacking the keyboard events within the data grid you are disabling the keyboard navigation functionality that is built in for accessibility.
As you suggested in the previous question, it is probably best to use the edit functionality that is built into the data grid and customizing the look of the fields with CSS.
from mui-x.
The issue has been inactive for 7 days and has been automatically closed.
from mui-x.
Related Issues (20)
- [data grid] How to autosize and header filters work well? HOT 2
- [pickers] Translating page in Edge make calendar show March when not March HOT 5
- [pickers] Change of locale adapter import for moment.js HOT 1
- [pickers] Date Calendar like an actual Outlook-ish calendar HOT 4
- [data grid] Possibility to save changes in data grid, like column sorting, hiding ordering HOT 2
- [data grid] tests fail when calling setCellFocus HOT 1
- [docs] Recommended Pickers styling approach shown on all styling approaches HOT 3
- [pickers] MUI DateRangePicker property "name" doesnt render HOT 3
- [charts][RFC] Replace `DefaultXxxx` by the usage of hooks
- [charts] Remove deprecated props
- [data grid] Cell stealing focus from modal and onClicks for buttons rendered inside cells fire when the user hits the enter key HOT 1
- Create PDF component HOT 5
- [data grid] is there anyway to avoid copy paste functionality from one column to another? HOT 1
- [tree view][TreeItem] Add support for `href` attribute HOT 3
- [data grid] Check the grouped child rows on select of the grouped row HOT 2
- [data grid] Resizing columns gets misaligned HOT 1
- [charts] Get access to the data outside of the SVG
- [charts] Document the usage of foreingObject
- [fields][DateField] on Android: using DateField on firefox doesn't work HOT 1
- [data grid] Impact of not renewing license for small changes and bug fixes HOT 3
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.