afraid-scarlet
afraid-scarlet10mo ago

why not useTable search after data update?

export default function PointList() {
const { tableQueryResult, pageCount, pageSize, current, setCurrent } = useTable({
resource: "points",
pagination: {
current: 1,
pageSize: 10,
},
});

const { register, handleSubmit, control, reset } = useForm<BaseRecord, HttpError, IPointsFilterVariables>({

defaultValues: {
q: getDefaultFilter('q', filters, 'eq'),
points: getDefaultFilter('points', filters, 'eq'),
},
})

<CardContent sx={{ pt: 0 }}>
<Box
component="form"
sx={{ display: 'flex', flexDirection: 'column' }}
autoComplete="off"
onSubmit={handleSubmit(search)}
>
<Box mb={2}>
<TextField
{...register('q')}
label={'검색'}
placeholder={'주문번호, 주문상태, 주문자, 상품명 등'}
margin="normal"
fullWidth
autoFocus
size="small"
variant="outlined"
/>
</Box>

<Box display="flex" justifyContent="space-between" width="200px">
<Button type="submit" variant="contained">
검색하기
</Button>
<Button type="button" variant="contained" color="secondary" onClick={() => resetForm()}>
초기화
</Button>
</Box>
</Box>
</CardContent>
export default function PointList() {
const { tableQueryResult, pageCount, pageSize, current, setCurrent } = useTable({
resource: "points",
pagination: {
current: 1,
pageSize: 10,
},
});

const { register, handleSubmit, control, reset } = useForm<BaseRecord, HttpError, IPointsFilterVariables>({

defaultValues: {
q: getDefaultFilter('q', filters, 'eq'),
points: getDefaultFilter('points', filters, 'eq'),
},
})

<CardContent sx={{ pt: 0 }}>
<Box
component="form"
sx={{ display: 'flex', flexDirection: 'column' }}
autoComplete="off"
onSubmit={handleSubmit(search)}
>
<Box mb={2}>
<TextField
{...register('q')}
label={'검색'}
placeholder={'주문번호, 주문상태, 주문자, 상품명 등'}
margin="normal"
fullWidth
autoFocus
size="small"
variant="outlined"
/>
</Box>

<Box display="flex" justifyContent="space-between" width="200px">
<Button type="submit" variant="contained">
검색하기
</Button>
<Button type="button" variant="contained" color="secondary" onClick={() => resetForm()}>
초기화
</Button>
</Box>
</Box>
</CardContent>
11 Replies
kapa.ai
kapa.ai10mo 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: ---------------------- Based on the provided extracts, it's not clear why the useTable search might not work after a data update. However, it's important to note that the useTable hook in refine provides functionalities for handling table states including search. The useTable hook returns searchFormProps which can be used to create a search form. When the form is submitted, searchFormProps.onFinish is called, which triggers the onSearch function. This function should return an array of search parameters that will be used to filter the table data. Here is an example of how to use searchFormProps and onSearch:
const { searchFormProps, tableProps } = useTable<IPost, HttpError, ISearch>({
onSearch: (values) => {
return [
{
field: "title",
operator: "contains",
value: values.title,
},
];
},
});
const { searchFormProps, tableProps } = useTable<IPost, HttpError, ISearch>({
onSearch: (values) => {
return [
{
field: "title",
operator: "contains",
value: values.title,
},
];
},
});
In your code, it seems like you're using useForm from react-hook-form to handle your form state and submission. If you want to use refine's useTable for search, you should consider using searchFormProps from useTable instead of useForm. If you're still having issues, it might be due to how your data is updated or how your search parameters are set up. Without more context, it's hard to provide a more specific answer. For more information, you can refer to the refine documentation on useTable (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table#searchformprops). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai10mo ago
<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below
afraid-scarlet
afraid-scarletOP10mo ago
@kapa.ai however, Object literal may only specify known properties, and 'onSearch' does not exist in type 'useTableProps<IPointValues, HttpError, IPointValues>'.ts(2353) why this error message?
kapa.ai
kapa.ai10mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- The error message you're seeing typically occurs when you're trying to assign a property to an object that doesn't exist in the object's type definition. In this case, it seems like onSearch is not a property of the useTableProps type. The useTable hook in refine does accept an onSearch property in its configuration object. This property should be a function that returns an array of search parameters. Here's an example from the provided extracts:
const { searchFormProps, tableProps } = useTable<IPost, HttpError, ISearch>({
onSearch: (values) => {
return [
{
field: "title",
operator: "contains",
value: values.title,
},
];
},
});
const { searchFormProps, tableProps } = useTable<IPost, HttpError, ISearch>({
onSearch: (values) => {
return [
{
field: "title",
operator: "contains",
value: values.title,
},
];
},
});
If you're seeing an error that onSearch does not exist in type useTableProps, it could be due to a few reasons: 1. There might be a mistake in your type definitions. Make sure that useTableProps is correctly typed and includes onSearch as a property. 2. You might be using an outdated version of refine. Make sure you're using the latest version of refine that includes onSearch as a property of useTable. 3. There might be a mistake in how you're using useTable. Make sure you're passing onSearch as a property of the configuration object to useTable, not as a property of useTableProps. For more information, you can refer to the refine documentation on useTable (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table#searchformprops). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai10mo ago
<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below
afraid-scarlet
afraid-scarletOP10mo ago
@kapa.ai yes I use onSearch is. useDataGrid
const { dataGridProps, search, filters } = useDataGrid<BaseRecord, HttpError, IPointsFilterVariables>({
pagination: {
mode: 'server', // Client 기준 페이지네이션
},
initialPageSize: 10,
onSearch: (params) => {
const filters: CrudFilters = []
const { q, points } = params

filters.push({
field: 'q',
operator: 'eq',
value: q !== '' ? q : undefined,
})

filters.push({
field: 'points',
operator: 'eq',
value: q !== '' ? q : undefined,
})

filters.push(
{
field: 'order_date',
operator: 'gte',
value: startValue ? dayjs(startValue).format('YYYY-MM-DD 00:00:00') : undefined,
},
{
field: 'order_date',
operator: 'lte',
value: endValue ? dayjs(endValue).format('YYYY-MM-DD 23:59:59') : undefined,
},
)

return filters
},
})
const { dataGridProps, search, filters } = useDataGrid<BaseRecord, HttpError, IPointsFilterVariables>({
pagination: {
mode: 'server', // Client 기준 페이지네이션
},
initialPageSize: 10,
onSearch: (params) => {
const filters: CrudFilters = []
const { q, points } = params

filters.push({
field: 'q',
operator: 'eq',
value: q !== '' ? q : undefined,
})

filters.push({
field: 'points',
operator: 'eq',
value: q !== '' ? q : undefined,
})

filters.push(
{
field: 'order_date',
operator: 'gte',
value: startValue ? dayjs(startValue).format('YYYY-MM-DD 00:00:00') : undefined,
},
{
field: 'order_date',
operator: 'lte',
value: endValue ? dayjs(endValue).format('YYYY-MM-DD 23:59:59') : undefined,
},
)

return filters
},
})
And when I onSubmit click button
onSubmit={handleSubmit(search)}
onSubmit={handleSubmit(search)}
api send and response data. But this data not update useTable.
kapa.ai
kapa.ai10mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the provided information, it seems like you're using useDataGrid for handling search and pagination, and you're expecting the data to be updated in useTable. However, useDataGrid and useTable are separate hooks and they maintain their own states. Changes in useDataGrid won't automatically reflect in useTable. If you want to update the data in useTable after a search operation in useDataGrid, you might need to manually trigger a refetch in useTable. Unfortunately, the provided extracts do not contain information on how to do this. Alternatively, you might want to consider using only useDataGrid or useTable for both fetching the data and handling search and pagination. This way, the state is maintained in a single hook and updates should automatically reflect. For more information, you can refer to the refine documentation on useDataGrid (https://refine.dev/docs/api-reference/hooks/data/useDataGrid) and useTable (https://refine.dev/docs/api-reference/hooks/data/useTable). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai10mo ago
<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below
afraid-scarlet
afraid-scarletOP10mo ago
@kapa.ai ok, how to use single hook ?
kapa.ai
kapa.ai10mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- To use a single hook for both fetching data and handling search and pagination, you can use either useTable or useDataGrid. Here's an example of how you can use useDataGrid:
const { dataGridProps, search } = useDataGrid<BaseRecord, HttpError, IPointsFilterVariables>({
pagination: {
mode: 'server',
},
initialPageSize: 10,
onSearch: (params) => {
const filters: CrudFilters = []
const { q, points } = params

filters.push({
field: 'q',
operator: 'eq',
value: q !== '' ? q : undefined,
})

filters.push({
field: 'points',
operator: 'eq',
value: q !== '' ? q : undefined,
})

filters.push(
{
field: 'order_date',
operator: 'gte',
value: startValue ? dayjs(startValue).format('YYYY-MM-DD 00:00:00') : undefined,
},
{
field: 'order_date',
operator: 'lte',
value: endValue ? dayjs(endValue).format('YYYY-MM-DD 23:59:59') : undefined,
},
)

return filters
},
})
const { dataGridProps, search } = useDataGrid<BaseRecord, HttpError, IPointsFilterVariables>({
pagination: {
mode: 'server',
},
initialPageSize: 10,
onSearch: (params) => {
const filters: CrudFilters = []
const { q, points } = params

filters.push({
field: 'q',
operator: 'eq',
value: q !== '' ? q : undefined,
})

filters.push({
field: 'points',
operator: 'eq',
value: q !== '' ? q : undefined,
})

filters.push(
{
field: 'order_date',
operator: 'gte',
value: startValue ? dayjs(startValue).format('YYYY-MM-DD 00:00:00') : undefined,
},
{
field: 'order_date',
operator: 'lte',
value: endValue ? dayjs(endValue).format('YYYY-MM-DD 23:59:59') : undefined,
},
)

return filters
},
})
In your form submission handler, you can call the search function returned by useDataGrid:
onSubmit={handleSubmit(search)}
onSubmit={handleSubmit(search)}
This will trigger the onSearch function in useDataGrid with the form values as parameters, and the returned filters will be used to fetch the data. For more information, you can refer to the refine documentation on useDataGrid (https://refine.dev/docs/api-reference/hooks/data/useDataGrid). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai10mo ago
<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below