I'm using MUI X Data Grid in my react app. The PM consist's that he wants to filter the data like this:
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