formProps id is does not work when filtering table

6 Replies

Hi @daw. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're having trouble with formProps not working correctly when filtering a table. Based on the knowledge sources, there are a few things to consider when using formProps with the useTable hook in refine. Key Points to Consider: 1. Form Instance: Ensure that formProps is correctly passed to the Ant Design <Form> component. The searchFormProps from useTable should be used as the form instance. 2. Triggering onSearch: When searchFormProps.onFinish is called, it should trigger the onSearch function. Make sure that the form submission is correctly set up to call this function. 3. Manual Submission: You can manually submit the form using searchFormProps.form.submit. 4. Resetting Filters: If you need to reset the filters, you should use the setFilters function provided by useTable. Example Code: Here is an example setup based on the provided knowledge sources:

import { HttpError } from "@refinedev/core";  
import { List, useTable, SaveButton } from "@refinedev/antd";  
import { Table, Form, Input, Button } from "antd";  

interface IPost {  
  id: number;  
  title: string;  
}  

interface ISearch {  
  title: string;  
}  

const PostList: React.FC = () => {  
  const { searchFormProps, tableProps, setFilters } = useTable<IPost, HttpError, ISearch>({  
    onSearch: (values) => {  
      return [  
        {  
          field: "title",  
          operator: "contains",  
          value: values.title,  
        },  
      ];  
    },  
  });  

  const resetFilters = () => {
    setFilters([], "replace");
  };
return (  
    <List>  
      <Form {...searchFormProps} layout="inline">  
        <Form.Item name="title">  
          <Input placeholder="Search by title" />  
        </Form.Item>  
        <SaveButton onClick={searchFormProps.form?.submit} />  
        <Button htmlType="reset" type="default" danger onClick={resetFilters}>
          Reset
        </Button>
      </Form>  
      <Table {...tableProps} rowKey="id">  
        <Table.Column dataIndex="id" title="ID" />  
        <Table.Column title="Title" dataIndex="title" />  
      </Table>  
    </List>  
  );  
};  

export default PostList;

import { HttpError } from "@refinedev/core";  
import { List, useTable, SaveButton } from "@refinedev/antd";  
import { Table, Form, Input, Button } from "antd";  

interface IPost {  
  id: number;  
  title: string;  
}  

interface ISearch {  
  title: string;  
}  

const PostList: React.FC = () => {  
  const { searchFormProps, tableProps, setFilters } = useTable<IPost, HttpError, ISearch>({  
    onSearch: (values) => {  
      return [  
        {  
          field: "title",  
          operator: "contains",  
          value: values.title,  
        },  
      ];  
    },  
  });  

  const resetFilters = () => {
    setFilters([], "replace");
  };
return (  
    <List>  
      <Form {...searchFormProps} layout="inline">  
        <Form.Item name="title">  
          <Input placeholder="Search by title" />  
        </Form.Item>  
        <SaveButton onClick={searchFormProps.form?.submit} />  
        <Button htmlType="reset" type="default" danger onClick={resetFilters}>
          Reset
        </Button>
      </Form>  
      <Table {...tableProps} rowKey="id">  
        <Table.Column dataIndex="id" title="ID" />  
        <Table.Column title="Title" dataIndex="title" />  
      </Table>  
    </List>  
  );  
};  

export default PostList;

Additional Resources: - Documentation on useTable (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#searchformprops) - Example of Table Search (https://refine.dev/docs/advanced-tutorials/search/table-search/) By following these guidelines and using the example code, you should be able to resolve issues with formProps not working correctly when filtering the table. If you continue to experience issues, please ensure that all necessary props and functions are correctly implemented as shown in the example. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@243918634374660098> kapa.ai is still learning and improving, please let us know how it did by reacting below

robust-apricotOP•5mo ago

@kapa.ai

help.txt

robust-apricotOP•5mo ago

@kapa.ai why isnt the scheduleId filtering data?

help.txt

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If the scheduleId is not filtering data as expected, there could be several reasons for this issue. Here are some steps to troubleshoot and ensure that the filtering works correctly: Steps to Troubleshoot: 1. Check DataProvider Configuration: Ensure that your DataProvider is correctly configured to handle filtering. Incorrect configuration can lead to filters not being applied properly. Reference: DataProvider Tutorial (https://refine.dev/docs/tutorial/understanding-dataprovider/index/) 2. Verify Filter Setup in useTable: Make sure that the useTable hook is correctly set up to handle the scheduleId filter. The onSearch function should correctly map the form values to the filter fields. 3. Ensure Correct Form Submission: Verify that the form is correctly submitting the scheduleId value and that the onSearch function is being triggered. Example Code: Here is an example setup to ensure that scheduleId is correctly used for filtering:

import { HttpError } from "@refinedev/core";  
import { List, useTable, SaveButton } from "@refinedev/antd";  
import { Table, Form, Input, Button } from "antd";  

interface IPost {  
  id: number;  
  title: string;  
  scheduleId: number;  
}  

interface ISearch {  
  scheduleId: number;  
}  

const PostList: React.FC = () => {  
  const { searchFormProps, tableProps, setFilters } = useTable<IPost, HttpError, ISearch>({  
    onSearch: (values) => {  
      return [  
        {  
          field: "scheduleId",  
          operator: "eq",  
          value: values.scheduleId,  
        },  
      ];  
    },  
  });  

  const resetFilters = () => {
    setFilters([], "replace");
  };
return (  
    <List>  
      <Form {...searchFormProps} layout="inline">  
        <Form.Item name="scheduleId">  
          <Input placeholder="Search by Schedule ID" />  
        </Form.Item>  
        <SaveButton onClick={searchFormProps.form?.submit} />  
        <Button htmlType="reset" type="default" danger onClick={resetFilters}>
          Reset
        </Button>
      </Form>  
      <Table {...tableProps} rowKey="id">  
        <Table.Column dataIndex="id" title="ID" />  
        <Table.Column title="Title" dataIndex="title" />  
        <Table.Column title="Schedule ID" dataIndex="scheduleId" />  
      </Table>  
    </List>  
  );  
};  

export default PostList;

import { HttpError } from "@refinedev/core";  
import { List, useTable, SaveButton } from "@refinedev/antd";  
import { Table, Form, Input, Button } from "antd";  

interface IPost {  
  id: number;  
  title: string;  
  scheduleId: number;  
}  

interface ISearch {  
  scheduleId: number;  
}  

const PostList: React.FC = () => {  
  const { searchFormProps, tableProps, setFilters } = useTable<IPost, HttpError, ISearch>({  
    onSearch: (values) => {  
      return [  
        {  
          field: "scheduleId",  
          operator: "eq",  
          value: values.scheduleId,  
        },  
      ];  
    },  
  });  

  const resetFilters = () => {
    setFilters([], "replace");
  };
return (  
    <List>  
      <Form {...searchFormProps} layout="inline">  
        <Form.Item name="scheduleId">  
          <Input placeholder="Search by Schedule ID" />  
        </Form.Item>  
        <SaveButton onClick={searchFormProps.form?.submit} />  
        <Button htmlType="reset" type="default" danger onClick={resetFilters}>
          Reset
        </Button>
      </Form>  
      <Table {...tableProps} rowKey="id">  
        <Table.Column dataIndex="id" title="ID" />  
        <Table.Column title="Title" dataIndex="title" />  
        <Table.Column title="Schedule ID" dataIndex="scheduleId" />  
      </Table>  
    </List>  
  );  
};  

export default PostList;

Additional Resources: - Documentation on useTable (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#searchformprops) - Example of Table Search (https://refine.dev/docs/advanced-tutorials/search/table-search/) By following these steps and using the example code, you should be able to troubleshoot and resolve issues with the scheduleId filter not working as expected. If the problem persists, double-check the DataProvider configuration and ensure that the API correctly handles the filtering logic. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@243918634374660098> kapa.ai is still learning and improving, please let us know how it did by reacting below

formProps id is does not work when filtering table

Did you find this page helpful?