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
K
kapa.ai219d 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: ----------------------
K
kapa.ai219d ago
<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below
H
harsh-harlequin219d ago
I'm using useTable, not useSelect @kapa.ai
K
kapa.ai219d 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: ----------------------
K
kapa.ai219d ago
<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below
H
harsh-harlequin219d ago
Fixed it to
onValuesChange={debounce(() => {
searchFormProps.form?.submit()
}, 500)}
onValuesChange={debounce(() => {
searchFormProps.form?.submit()
}, 500)}
with lodash
F
foreign-sapphire186d ago
ye, nice work bro
More Posts
Can I use different menu items for the same resources?resources={[ { name: "post", list: "/post", How to handle with filtersHow to handle the filters in the url http://localhost:5000/class?s=%7B%22%24and%22%3A%5B%5D%7D on a How to handle with array query paramIf filter is a query array param, how can I adjust my request? Using @Query?How to handle filters in NestJS?How to handle filters in NestJS?Not calling list api```tsx { name: "admin/reports", list: "admin/reports", meta: { How to make MUI Autocomplete multipleLike in topic, how to be able to let Autcoomplete using multiple values instead of one?Go back to List after edit or createGo back to List after edit or createToken not visible in header after passingconst check = async () => { try { const { token } = keycloak if (token) { How to tell the front-end how many items the list has?I imagine that in the listing the number of pages is done through a parameter for the number of itemOptimizing for productionHi peepz, I was wondering are there any best practices apart from vite to optimize the bundle for pCannot use import.meta.envError: Property 'env' does not exist on type 'ImportMeta' ```ts export default defineConfig({ plugNot able to translate text while writing testsHi, I am using vitest for writing tests for my refine app. I am not able to translate text using i18Action in Upload Antd Prop do not include Authorization header```tsx <Form {...formProps} layout="vertical" onFinish={async (values) => { connavigate resource with different roles```tsx <Route element={ <Authenticated fallback={<CatchAllNavigadynamically load resource base on rolecustomise show resource , based on cookie stored variableAdd ordinal number columnAdd an extra ordinal number column on LIst pagewhile using POST, PUT, or PATCH if my access token has been expired user will be logged outI have used axios as my HTTP client and using `axios-auth-refresh` for refreshing my access token frGet default List, Create, Post page styleI want to create a custom component but still inherit style from the list, create or post pageaccess control condition not working```tsx accessControlProvider={{ can: async ({ resource, action }) => { UseOne not working```tsx import type { RefineThemedLayoutV2HeaderProps } from "@refinedev/antd"; import { useGetIdenti