eager-peach
eager-peach3mo ago

How to exclude a 'point_amount' column from sorting conditions?

``` const columns = React.useMemo<GridColDef<IPointValues>[]>( () => [ {field: 'id', headerName: 'ID'}, { field: 'order_id', flex: 1, headerName: '주문번호', minWidth: 150, }, { field: 'payment_amount', flex: 1, headerName: '총 실결제금액', type: 'number', minWidth: 100, renderCell: ({ row }) => { const orderTotalPayment = Number(row.payment_amount).toLocaleString() return <div>{orderTotalPayment}</div> }, }, { field: 'point_amount', flex: 1, headerName: '적립금', type: 'number', minWidth: 100, renderCell: ({ row }) => { const orderPointType = row.order_point_type; const orderPoint = Number(row.point_amount).toLocaleString(); let orderEditPoint = 0; let displayValue = null; if (Array.isArray(row.items) && row.items.length > 0) { orderEditPoint = row.items.reduce((totalAmount, item) => totalAmount + item.amount, 0);
const displayValueColor = orderEditPoint > 0 ? 'blue' : 'red'; const displaySign = orderEditPoint > 0 ? '+' : ''; displayValue = ( <span style={{ color: displayValueColor }}> {displaySign}{Number(orderEditPoint).toLocaleString()} </span> ); }
2 Replies
kapa.ai
kapa.ai3mo ago
Hi @florent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To exclude a column from sorting conditions in a DataGrid, you can set the sortable property of the column to false. This will disable sorting for that specific column. In your case, you can modify the 'point_amount' column definition as follows:
{
field: 'point_amount',
flex: 1,
headerName: '적립금',
type: 'number',
minWidth: 100,
sortable: false, // This line disables sorting for the 'point_amount' column
renderCell: ({ row }) => {
const orderPointType = row.order_point_type;
const orderPoint = Number(row.point_amount).toLocaleString();
let orderEditPoint = 0;
let displayValue = null;

if (Array.isArray(row.items) && row.items.length > 0) {
orderEditPoint = row.items.reduce((totalAmount, item) => totalAmount + item.amount, 0);

const displayValueColor = orderEditPoint > 0 ? 'blue' : 'red';
const displaySign = orderEditPoint > 0 ? '+' : '';
displayValue = (
<span style={{ color: displayValueColor }}>
{displaySign}{Number(orderEditPoint).toLocaleString()}
</span>
);
}
}
}
{
field: 'point_amount',
flex: 1,
headerName: '적립금',
type: 'number',
minWidth: 100,
sortable: false, // This line disables sorting for the 'point_amount' column
renderCell: ({ row }) => {
const orderPointType = row.order_point_type;
const orderPoint = Number(row.point_amount).toLocaleString();
let orderEditPoint = 0;
let displayValue = null;

if (Array.isArray(row.items) && row.items.length > 0) {
orderEditPoint = row.items.reduce((totalAmount, item) => totalAmount + item.amount, 0);

const displayValueColor = orderEditPoint > 0 ? 'blue' : 'red';
const displaySign = orderEditPoint > 0 ? '+' : '';
displayValue = (
<span style={{ color: displayValueColor }}>
{displaySign}{Number(orderEditPoint).toLocaleString()}
</span>
);
}
}
}
This information is not directly mentioned in the provided knowledge sources, but it is a common feature of data grid components, including the Material UI DataGrid used by Refine (source (https://mui.com/components/data-grid/columns/#column-types)). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3mo ago
<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below