-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[data grid] Autocomplete edit input cell #4813
Comments
I see multiple points in this proposal:
|
Yes, you're right. Thank you 👍 What I haven't mentioned yet is that if I don't define |
Yes, I'm not sure to fully understand your last point But that would concern only the filtering aspect |
Ok, I better understand the use case. The technical challenge is to provide access throw the API to the list of unique values. Once done, this list of values could be reused wherever we want: a new custom |
@alexfauquette we have recently converted to "Pro" and have been tinkering with this problem. I think until this receives the necessary upvotes to get a canonical solution, perhaps a working example in the docs would get us there. I've managed to get us this far: function AutocompleteEditCell<
T extends { value: string; label: string },
Multiple extends boolean = false,
DisableClearable extends boolean = false,
FreeSolo extends boolean = false
>({
id,
value,
field,
options,
disableClearable,
multiple,
freeSolo,
}: GridRenderEditCellParams & {
options: UseAutocompleteProps<
T,
Multiple,
DisableClearable,
FreeSolo
>['options'];
disableClearable: DisableClearable;
multiple: Multiple;
freeSolo: FreeSolo;
}) {
const apiRef = useGridApiContext();
const handleValueChange = (
_: any,
newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
) => {
apiRef.current.setEditCellValue({
id,
field,
// @ts-expect-error i can't figure out how to use AutocompleteValue
value: typeof newValue === 'string' ? value : newValue?.value || '',
});
};
return (
<Autocomplete<T, Multiple, DisableClearable, FreeSolo>
fullWidth
disableClearable={disableClearable}
multiple={multiple}
options={options}
freeSolo={freeSolo}
// @ts-expect-error i can't figure out how to use AutocompleteValue
value={options.find((o) => o.value === value)?.label || ''}
onChange={handleValueChange}
renderInput={(params) => <TextField {...params} />}
/>
);
} and this is referenced thusly: {
field: 'naicsCode',
headerName: 'Industry',
width: 250,
editable: true,
valueFormatter: ({ value }) => NAICS_OBJECT[value] ?? ''
renderEditCell: (params) => (
<AutocompleteEditCell
{...params}
options={NAICS_OPTIONS}
freeSolo={false}
multiple={false}
disableClearable
/>
),
}, First, if you see anything obvious we could be doing to clear up those two |
Thanks @adamrneary for example. It's been a while so I have written solution too. Here is my example:
In function |
Yes, I am using Autocomplete in 4 columns in a grid, since it is far better for large drop down lists since it allows user to search from the list by entering first few characters. Though I need single option select only. On the other note:- When I upgrade my data-grid-pro version to I am not sure if I should be logging a new issue for this or if this comment of mine will catch the attention of the material-ui team. Ref Order ID 💳 (optional) 28914 |
@adamrneary You should open another issue with a minimal reproduction of your customization that bugs in v5.17.1 Otherwise, this bug/regression will be lost into other comments asking for feature |
I agree with the UX recommendation made by the author of this issue. I think that it could be great to replace most uses of IMHO, the only question is: Should we always use the For example with the
|
Well, I don't know the answer either, but here are some of my thoughts:
|
I know its a lot to ask but can anyone provide me a snippet of a working autocomplete functionality inside a cell in the datagrid. I am unable to implement it |
My code few comments up here is updated and works pretty well: #4813 (comment) |
I got it to work like this: import { useState } from "react";
import { DataGrid } from "@mui/x-data-grid";
const UserPage = () => {
const [users, setUsers] = useState([
{ id: 1, name: "John Doe", email: "[email protected]", role: "basic" },
{ id: 2, name: "Jane Smith", email: "[email protected]", role: "admin" },
// Add more user objects as needed
]);
const handleRoleChange = (event, id) => {
const newUsers = [...users];
const userIndex = newUsers.findIndex((user) => user.id === id);
if (userIndex !== -1) {
newUsers[userIndex].role = event.target.value;
setUsers(newUsers);
console.log(newUsers);
}
};
const columns = [
{ field: "name", headerName: "Name", width: 150 },
{ field: "email", headerName: "Email", width: 200 },
{
field: "role",
headerName: "Role",
width: 120,
type: "singleSelect",
valueOptions: ["basic", "admin"],
editable: true,
},
];
return (
<div style={{ height: 400, width: "100%" }}>
<DataGrid rows={users} columns={columns} />
</div>
);
};
export default UserPage; Now it works how you would expect. The cells becomes autocomplete type elements when you start editing them. But now I'm having slight trouble in handling the change. Any idea on how to track change here? |
I gave a code snippet above. That works |
@AXLShorts Thk, this issue is solved |
@hcurbelo-hepyco I also have same issue where in system displays [object Object] using autocomplete inside mui data grid edit mode Update: Was able to manage it via renderCell method to display value from object. |
For what it's worth, setting |
who is calling handleRoleChange and how does it know to di it? |
Summary 💡
Should work like normal Autocomplete component. Unlike 'singleSelect', users can type in input and search options quickly.
Examples 🌈
Motivation 🔦
Autocomplete provides more freedom for users and also developers than select (singleSelect), like: freeSolo, getOptionLabel or multiple props.
Order ID 💳 (optional)
#31956
The text was updated successfully, but these errors were encountered: