brilliant-orangeB
Refine2y ago
14 replies
brilliant-orange

Can I modify the column in useMemo so that I can control it myself?

const columns = React.useMemo<GridColDef<IPointValues>[]>(
    () => [
      {field: 'id', headerName: 'ID'},
      {
        field: 'order_id',
        flex: 1,
        headerName: '주문번호',
        minWidth: 150,
      },
      {
        field: 'order_date',
        flex: 1,
        headerName: '주문일 (결제일)',
        minWidth: 200,
        renderCell: function render({ row }) {
          const orderDate = dayjs(row.order_date).format('YYYY-MM-DD HH:mm:ss');
          const paymentDate = dayjs(row.payment_date).format('YYYY-MM-DD HH:mm:ss');
          return (
            <>
              <div>
                <span>{orderDate}</span>
                <br />
                <span>({paymentDate})</span>
              </div>
            </>
          )
        },
      },
      {
        field: 'order_status',
        flex: 1,
        headerName: '주문/CS 상태',
        minWidth: 150,
        renderCell: ({ value }) => (
          <>
            <div>
            {value.split(',').map((status:string, index:number) => (
                <div>
                <span>{status.trim()}</span>
                </div>
                ))}
            </div>
          </>
        ),
      },
      {
        field: 'member_name',
        flex: 1,
        headerName: '주문자 / 아이디',
        minWidth: 150,
        renderCell: function render({ row }) {
          const memberName = row.member_name
          const memberEmail = row.member_id
          return (
            <>
              <div>
                {memberName}
                <br />
                {memberEmail}
              </div>
            </>
          )
        },
      },
      {
        field: 'product_name',
        flex: 1,
        headerName: '상품명',
        minWidth: 300,
      },



If the characters become long after using useMemo, they are abbreviated as "..."
Can I modify the heat so that I can control it myself?
Was this page helpful?