optimistic-gold
optimistic-gold11mo ago

Debounce on list table CRUD search

const { tableProps, searchFormProps } = useTable<IUser, HttpError, IUserFilterVariables>({
syncWithLocation: true,
onSearch: (params) => {
const filters: CrudFilters = []
const { team_name } = params
filters.push(
{
field: "team_name",
operator: "contains",
value: team_name,
},
);

return filters;
},
});
const { tableProps, searchFormProps } = useTable<IUser, HttpError, IUserFilterVariables>({
syncWithLocation: true,
onSearch: (params) => {
const filters: CrudFilters = []
const { team_name } = params
filters.push(
{
field: "team_name",
operator: "contains",
value: team_name,
},
);

return filters;
},
});
<Form
{...searchFormProps}
layout="horizontal"
onValuesChange={() => searchFormProps.form?.submit()}
>
<Space wrap>
<Form.Item name="team_name">
<Input
placeholder="Team 01, etc."
prefix={<SearchOutlined />}
/>
</Form.Item>
</Space>
</Form>
<Form
{...searchFormProps}
layout="horizontal"
onValuesChange={() => searchFormProps.form?.submit()}
>
<Space wrap>
<Form.Item name="team_name">
<Input
placeholder="Team 01, etc."
prefix={<SearchOutlined />}
/>
</Form.Item>
</Space>
</Form>
Add debounce on search
7 Replies
kapa.ai
kapa.ai11mo ago
Hi @tads8799. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add debounce on search, you can use the debounce property in the useSelect hook. The debounce property allows you to delay the execution of the onSearch function until after a certain amount of time has passed since the last time it was invoked. Here's how you can do it:
const { selectProps } = useSelect<ICategory>({
resource: "categories",
debounce: 500, // Add debounce here
onSearch: (value) => [
{
field: "title",
operator: "contains",
value,
},
],
});
const { selectProps } = useSelect<ICategory>({
resource: "categories",
debounce: 500, // Add debounce here
onSearch: (value) => [
{
field: "title",
operator: "contains",
value,
},
],
});
In this example, the onSearch function will be debounced by 500 milliseconds. This means that the function will not be called until 500 milliseconds have passed since the last time it was invoked. Please note that the debounce property is not available in the useTable hook based on the provided extracts. If you want to add debounce to the useTable hook, you might need to implement it manually or check if there's an update in the refine documentation that includes this feature. For more information, you can refer to the useSelect documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai11mo ago
<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below
optimistic-gold
optimistic-gold11mo ago
I'm using useTable, not useSelect @kapa.ai
kapa.ai
kapa.ai11mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. Based on the provided extracts, the debounce property is not directly available in the useTable hook. However, you can implement a debounce functionality manually in the onSearch function using a debounce utility function. Here's a basic example of how you can create a debounce function:
function debounce(func, wait) {
let timeout;

return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};

clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};
function debounce(func, wait) {
let timeout;

return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};

clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};
You can then use this function to debounce your onSearch function:
const debouncedOnSearch = debounce((params) => {
const filters: CrudFilters = []
const { team_name } = params
filters.push(
{
field: "team_name",
operator: "contains",
value: team_name,
},
);

return filters;
}, 500); // 500ms debounce time

const { tableProps, searchFormProps } = useTable<IUser, HttpError, IUserFilterVariables>({
syncWithLocation: true,
onSearch: debouncedOnSearch,
});
const debouncedOnSearch = debounce((params) => {
const filters: CrudFilters = []
const { team_name } = params
filters.push(
{
field: "team_name",
operator: "contains",
value: team_name,
},
);

return filters;
}, 500); // 500ms debounce time

const { tableProps, searchFormProps } = useTable<IUser, HttpError, IUserFilterVariables>({
syncWithLocation: true,
onSearch: debouncedOnSearch,
});
Please note that this is a basic example and might need to be adjusted based on your specific use case. If you want to add debounce to the useTable hook, you might need to check if there's an update in the refine documentation that includes this feature. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai11mo ago
<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below
optimistic-gold
optimistic-gold11mo ago
Fixed it to
onValuesChange={debounce(() => {
searchFormProps.form?.submit()
}, 500)}
onValuesChange={debounce(() => {
searchFormProps.form?.submit()
}, 500)}
with lodash
rival-black
rival-black10mo ago
ye, nice work bro