[data grid] Adding Textfield to Datagrid

[master117]

The problem in depth

https://codesandbox.io/p/sandbox/nostalgic-shape-hvy99t

I want to put a Textfield into my Datagrid. But when using the arrow keys in the Textfield it navigates off.

1. 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?
2. Is this even a good idea? Can I run into state problems?

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: edit useState Order ID: 4500853195

[michelengelen]

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>
  );
}

[master117]

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.)

[kenanyusuf]

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.

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed.