inland-turquoise•15mo ago

How to use form instance ANTD inside filterDropdown?

https://codesandbox.io/s/compassionate-bash-pzxuf7?file=/src/App.jsx Please help me build a correct way on filter dropdown, I need multiple inputs inside the filterDropdown and really don't know how to do it; my mission: get data dynamically from api on table change params (pagination, fitlers or sortings) instead of using default antd statically fitlers... I just need to output from each column the key and value and columnKey as object, and create an array inside App.jsx, after that I will manage by myself axios get actions. Really thanks, maybe also something wrong with my code, but I tried my best, many thanks... 🙏

7 Replies

kapa.ai•15mo ago

Hi @vity31. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand that you want to create a filter dropdown with multiple inputs and fetch data dynamically from an API based on table parameters like pagination, filters, or sorting. I can guide you on how to achieve this using refine and Ant Design based on the information extracts provided. First, you need to use the useTable hook from refine to fetch data from your API and make it compatible with Ant Design's <Table> component. The useTable hook will handle pagination, filtering, and sorting for you. Here's an example of how to use the useTable hook:

import React from "react";
import { List, Table, useTable } from "@refinedev/antd";

interface IFormValue {
  name: string;
  email: string;
  skills: string;
  id: number;
}

export default function PostList() {
  const { tableProps } = useTable<IFormValue>();

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="firstName" title="First Name" />
        <Table.Column dataIndex="email" title="Email" />
        <Table.Column dataIndex="skills" title="Skills" />
      </Table>
    </List>
  );
}

import React from "react";
import { List, Table, useTable } from "@refinedev/antd";

interface IFormValue {
  name: string;
  email: string;
  skills: string;
  id: number;
}

export default function PostList() {
  const { tableProps } = useTable<IFormValue>();

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="firstName" title="First Name" />
        <Table.Column dataIndex="email" title="Email" />
        <Table.Column dataIndex="skills" title="Skills" />
      </Table>
    </List>
  );
}

(Source: react-crud-app-with-dynamic-form-ant-design (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design)) Next, you can use the filterDropdown property from <Table.Column> to create custom filter dropdowns. To do this, you need to put the filtering form inside the <FilterDropdown> component and pass the properties coming to the function to these component's properties. Here's an example of how to use the filterDropdown with <FilterDropdown> component:

import {
  List,
  FilterDropdown,
  useTable,
} from "@refinedev/antd";
import { Table, Select } from "antd";

const PostList: React.FC = (props) => {
  const { tableProps } = useTable<IPost>();
return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column
          dataIndex={["category", "id"]}
          title="Category"
          key="category.id"
          filterDropdown={(props) => (
            <FilterDropdown {...props}>
              <Select
                mode="multiple"
                placeholder="Select Category"
                options={[
                  { label: "Ergonomic", value: "1" },
                  { label: "Island", value: "2" },
                ]}
              />
            </FilterDropdown>
          )}
        />
      </Table>
    </List>
  );
};

interface IPost {
  id: number;
  category: {
    id: number;
  };
}

import {
  List,
  FilterDropdown,
  useTable,
} from "@refinedev/antd";
import { Table, Select } from "antd";

const PostList: React.FC = (props) => {
  const { tableProps } = useTable<IPost>();
return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column
          dataIndex={["category", "id"]}
          title="Category"
          key="category.id"
          filterDropdown={(props) => (
            <FilterDropdown {...props}>
              <Select
                mode="multiple"
                placeholder="Select Category"
                options={[
                  { label: "Ergonomic", value: "1" },
                  { label: "Island", value: "2" },
                ]}
              />
            </FilterDropdown>
          )}
        />
      </Table>
    </List>
  );
};

interface IPost {
  id: number;
  category: {
    id: number;
  };
}

(Source: api-reference/antd/components/filter-dropdown (https://refine.dev/docs/api-reference/antd/components/filter-dropdown)) You can modify the example above to include multiple inputs inside the FilterDropdown component as per your requirements. Once you have the filter values, you can manage the API calls using axios as needed. Please note that the code provided is based on the information extracts and may need to be adjusted to fit your specific use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

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

genetic-orange•15mo ago

filterDropdown from antd accepts react node. this means you can return any react component. inside that react component you can fetch api request or anything you want https://codesandbox.io/s/suspicious-gwen-e65gu5?file=/src/App.jsx:1352-1382

inland-turquoise•15mo ago

yes but how i can prevent default antd static filter and call my exampleAPI() function with fitlers?

genetic-orange•15mo ago

if i understand correctly, we have example for that: https://codesandbox.io/s/github/refinedev/refine/tree/next/examples/base-antd?from-embed=&file=/src/pages/posts/list.tsx:1262-1292 category column is a relational field, we are fetching all categories and filter post resource by category id. repo: https://github.com/refinedev/refine/tree/next/examples/base-antd

inland-turquoise•15mo ago

Sorry but I only use antd, not refine... is there a way to do that with only antd?

genetic-orange•15mo ago

Ofcourse. We did it 🚀 it's not a short task, i can't prepare demo code. You need to handle state and use it instead of antd state. Antd table have filteredValue prop. You need to give your state to this prop