rare-sapphire•10mo 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•10mo 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•10mo ago

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