like-gold
like-gold6mo ago

How to draw filter datepicker?

I'm drawing a list with Grid using useMemo. At this time, I want to add a date search filter with Muy datepicker.
return (
<Grid container>
<Grid item xs={24} lg={12}>
<Card sx={{paddingX: {xs: 2, md: 0}}}>
<CardHeader title={"검색"}/>
<CardContent sx={{pt: 0}}>
<Box
component="form"
sx={{display: "flex", flexDirection: "column"}}
autoComplete="off"
onSubmit={handleSubmit(search)}
>
<TextField
{...register("q")}
label={"검색"}
placeholder={"주문번호, 주문상태, 주문자, 상품명 등"}
margin="normal"
fullWidth
autoFocus
size="small"
/>

<Button type="submit" variant="contained">
검색하기
</Button>
</Box>
</CardContent>
</Card>
</Grid>
<Grid item xs={24} lg={12}>
<List
title={"적립금 지급 내역"}

wrapperProps={{sx: {paddingX: {xs: 2, md: 0}}}}
>
<Typography variant="body1" align="right">
* 주문건에 대한 상세 내용이나, 클레임 처리, 구독신청 내역 확인 등은 기존 카페24 관리자 페이지에서 진행해 주세요.
</Typography>
{open && (
<PointsDetail
open={open}
onClose={handleClose}
pointDetail={pointDetail}
/>
)}
<DataGrid
{...dataGridProps}
columns={columns}
filterModel={undefined}
autoHeight
pageSizeOptions={[10, 20, 50, 100]}
rowHeight={80}
sx={{
...dataGridProps.sx,
"& .MuiDataGrid-row": {
cursor: "pointer",
},
}}
/>
</List>
</Grid>
</Grid>
);
return (
<Grid container>
<Grid item xs={24} lg={12}>
<Card sx={{paddingX: {xs: 2, md: 0}}}>
<CardHeader title={"검색"}/>
<CardContent sx={{pt: 0}}>
<Box
component="form"
sx={{display: "flex", flexDirection: "column"}}
autoComplete="off"
onSubmit={handleSubmit(search)}
>
<TextField
{...register("q")}
label={"검색"}
placeholder={"주문번호, 주문상태, 주문자, 상품명 등"}
margin="normal"
fullWidth
autoFocus
size="small"
/>

<Button type="submit" variant="contained">
검색하기
</Button>
</Box>
</CardContent>
</Card>
</Grid>
<Grid item xs={24} lg={12}>
<List
title={"적립금 지급 내역"}

wrapperProps={{sx: {paddingX: {xs: 2, md: 0}}}}
>
<Typography variant="body1" align="right">
* 주문건에 대한 상세 내용이나, 클레임 처리, 구독신청 내역 확인 등은 기존 카페24 관리자 페이지에서 진행해 주세요.
</Typography>
{open && (
<PointsDetail
open={open}
onClose={handleClose}
pointDetail={pointDetail}
/>
)}
<DataGrid
{...dataGridProps}
columns={columns}
filterModel={undefined}
autoHeight
pageSizeOptions={[10, 20, 50, 100]}
rowHeight={80}
sx={{
...dataGridProps.sx,
"& .MuiDataGrid-row": {
cursor: "pointer",
},
}}
/>
</List>
</Grid>
</Grid>
);
3 Replies
kapa.ai
kapa.ai6mo ago
Hi @florent_26629. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not contain specific examples or instructions on how to add a date search filter with MUI DatePicker to your existing code. However, you can refer to the Refine documentation (https://refine.dev/docs) or Material-UI DatePicker documentation (https://mui.com/components/date-picker/) for more information on how to implement this feature. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai6mo ago
<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below
foreign-sapphire
foreign-sapphire6mo ago
Hello @florent_26629, you can check this documentation: https://refine.dev/docs/ui-integrations/material-ui/hooks/use-data-grid/#filtering
useDataGrid | refine
By using useDataGrid, you can get properties that are compatible with MUI X component. All features such as sorting, filtering, and pagination come out of the box. Under the hood it uses useList for the fetch.