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,
},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?
