Is it possible to have simple filter in the colmns header when using MUI X Data Grid?

I'm using MUI X Data Grid in my react app. The PM consist's that he wants to filter the data like this:

this image

I don't know if it's possible or not and how to implement that.

I did something by renderHeader prop like: Problems with renderHeader prop MUI X Data Grid Pro component.

and the code is https://codesandbox.io/s/stackoverflow-mui-data-grid-render-header-xmwf0?file=/src/App.jsx

  const filterOnColumns = [
    {
      field: 'name',
      headerName: 'Name',
      flex: 1,
      minWidth: 200,
      renderHeader: () => (
        <TextField
          variant="standard"
          label="Name"
          type="text"
          name="name"
          // value={filters.name}
          // onChange={handleFiltersChange}
          onKeyDown={event => event.stopPropagation()}
        />
      ),
    },
    {
      field: 'phone',
      headerName: 'Phone',
      flex: 1,
      minWidth: 200,
      renderHeader: () => (
        <TextField
          variant="standard"
          label="Phone"
          type="text"
          name="phone"
          // value={filters.phone}
          // onChange={handleFiltersChange}
          onKeyDown={event => event.stopPropagation()}
        />
      ),
    },
    {
      field: 'email',
      headerName: 'Email',
      flex: 1,
      minWidth: 200,
      renderHeader: () => (
        <FilterInput
          variant="standard"
          label="Email"
          type="text"
          name="email"
          onChange={handleFiltersChange}
          value={filters.email}
          updateFilters={setFilters}
        />
      ),
    },

But when I click on the header's input, the sorting is also working.

You also need to call stopPropagation on onClick too:

onClick={(event) => event.stopPropagation()}

Next to uncontrol the TextField you can only pass defaultValue to it.

Remains only to filter the rows variable with the updated filters.

Updated code here: https://codesandbox.io/s/stackoverflow-mui-data-grid-render-header-forked-50yv4d?file=/src/App.jsx