CRUD - List - MUI, Express

CRUD - List - MUI, Express. How can I show the list in the descending order instead of default ascending?

2 Replies

kapa.ai•11mo ago

Hi @sarsar55.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, you can control the order of the list by using the sorters property in various hooks such as useDataGrid, useSelect, useAutocomplete, and useSimpleList. The sorters property allows you to specify the field and the order ("asc" for ascending and "desc" for descending) for sorting. For instance, if you are using the useDataGrid hook, you can initialize a sorting order for each or all fields in the grid using the sorters property. This lets you sort the rows on the initial page render. Here is an example:

const { dataGridProps } = useDataGrid({  
 sorters: {  
 initial: [{ field: "level", order: "desc" }],  
 },  
});

const { dataGridProps } = useDataGrid({  
 sorters: {  
 initial: [{ field: "level", order: "desc" }],  
 },  
});

In this example, the rows will be sorted using the level column on the initial render in descending order. You can also control the sorting externally using the setSorters function from the useDataGrid hook. Here is an example:

const { dataGridProps, setSorters } = useDataGrid();

const handleSorting = (order: "asc" | "desc") => {  
 setSorters([  
 {  
 field: "level",  
 order,  
 },  
 ]);  
};  

<Button onClick={() => handleSorting("desc")}>Desc</Button>

const { dataGridProps, setSorters } = useDataGrid();

const handleSorting = (order: "asc" | "desc") => {  
 setSorters([  
 {  
 field: "level",  
 order,  
 },  
 ]);  
};  

<Button onClick={() => handleSorting("desc")}>Desc</Button>

In this example, the rows will be sorted in descending order when the button is clicked. For more information, refer to the CrudSorting interface documentation (https://refine.dev/docs/core/interface-references/#crudsorting) and the refine blog post on using Material UI DataGrid component with refine app (https://refine.dev/blog/mui-datagrid-refine#sorting). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

<@791625518440120320> kapa.ai is still learning and improving, please let us know how it did by reacting below

CRUD - List - MUI, Express

Did you find this page helpful?