Skip to main content
Version: 4.xx.xx

sort-live-preview

localhost:3000
import { useAutocomplete } from "@refinedev/mui";
import { Autocomplete, Button, TextField } from "@mui/material";

interface ICategory {
id: number;
title: string;
}

const PostCreate: React.FC = () => {
const [order, setOrder] = React.useState<"asc" | "desc">("asc");
const { autocompleteProps } = useAutocomplete<ICategory>({
resource: "categories",
sorters: [
{
field: "title",
order,
},
],
});

return (
<>
<Autocomplete
{...autocompleteProps}
getOptionLabel={(item) => item.title}
isOptionEqualToValue={(option, value) =>
value === undefined || option?.id?.toString() === (value?.id ?? value)?.toString()
}
placeholder="Select a category"
renderInput={(params) => (
<TextField
{...params}
label="Category"
margin="normal"
variant="outlined"
required
/>
)}
/>
<Button
onClick={() => setOrder(order === "asc" ? "desc" : "asc")}
variant="contained"
size="small"
>
Toggle Order
</Button>
</>
);
};