ambitious-aqua•2y ago

How to sort DataGrid of computed column?

One of my columns in the MUI x-DataGrid is a computed column. When I attempt to click the header to sort by the computed value, the table spins for a few seconds and returns an error message: column table_name.column_name does not exist Error (status code: 42703)' My computed column GridColDef looks like this:

                {
                    field: "profit",
                    headerName: "Profit",
                    type: "number",
                    renderCell: function render({row}) {
                        return (
                             {compute_profit_here}
                        );
                    },
                 }

                {
                    field: "profit",
                    headerName: "Profit",
                    type: "number",
                    renderCell: function render({row}) {
                        return (
                             {compute_profit_here}
                        );
                    },
                 }

Did I implement this computed column correctly? How do I make the column sort naturally and bypass refine's magic dataProvider/queries/etc.?

5 Replies

kapa.ai•2y ago

Hi @imedemi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information extracts provided, I cannot determine if you implemented the computed column correctly, as there is no example of a computed column in the extracts. However, I can help you with sorting the column in MUI x-DataGrid. To bypass refine's dataProvider and handle sorting manually, you can override the onSortModelChange function in the <DataGrid> component. Here's an example from the extracts:

<DataGrid  
 {...dataGridProps}  
 columns={columns}  
 autoHeight  
 onSortModelChange={(model, details) => {  
 dataGridProps.onSortModelChange(model, details);  
 // do something else  
 }}  
/>

<DataGrid  
 {...dataGridProps}  
 columns={columns}  
 autoHeight  
 onSortModelChange={(model, details) => {  
 dataGridProps.onSortModelChange(model, details);  
 // do something else  
 }}  
/>

In the onSortModelChange function, you can implement your custom sorting logic for the computed column. Keep in mind that this example is for overriding the default behavior, and you'll need to adapt it to your specific use case. For more information on the useDataGrid hook, you can refer to the documentation (https://refine.dev/docs/api-reference/mui/hooks/useDataGrid/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

unwilling-turquoise•2y ago

do you want to sort on the client side ?

ambitious-aqua•2y ago

Great question. In most situations involving pagination, I'd like to sort on the server side. I should create a computed column in my database and then the client would both have the column as well as the ability to sort it.

unwilling-turquoise•2y ago

i'm work client side filtering and sorting feature 🥹 we have plan to release this week. https://github.com/refinedev/refine/pull/4194 i will inform you when this merge