Use search on table

I have this component and a want to use the useTableSearch properties for get filtered result

message.txt

6 Replies

Hi @Sebastos. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Certainly! I can help you with using the search functionality on a table using refine's useTable hook. The useTable hook provides search capabilities through its onSearch and searchFormProps properties. Here's how you can modify your component to implement search:

import React from "react";
import { HttpError } from "@refinedev/core";
import { useTable } from "@refinedev/antd";
import { Button, Form, Input, Space, Table } from "antd";

export const ProductTable: React.FC = () => {
  const { tableProps, searchFormProps } = useTable<
    IProduct,
    HttpError,
    IProduct
  >({
    resource: "products",
    onSearch: (values) => {
      return [
        {
          field: "name",
          operator: "contains",
          value: values.name,
        },
      ];
    },
  });

  return (
    <div style={{ padding: "4px" }}>
      <h2>Products</h2>
      <Form {...searchFormProps}>
        <Space>
          <Form.Item name="name">
            <Input placeholder="Search by name" />
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit">Search</Button>
          </Form.Item>
        </Space>
      </Form>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column dataIndex="name" title="Name" />
        <Table.Column dataIndex="price" title="Price" />
      </Table>
    </div>
  );
};

interface IProduct {
  id: number;
  name: string;
  price: string;
}

import React from "react";
import { HttpError } from "@refinedev/core";
import { useTable } from "@refinedev/antd";
import { Button, Form, Input, Space, Table } from "antd";

export const ProductTable: React.FC = () => {
  const { tableProps, searchFormProps } = useTable<
    IProduct,
    HttpError,
    IProduct
  >({
    resource: "products",
    onSearch: (values) => {
      return [
        {
          field: "name",
          operator: "contains",
          value: values.name,
        },
      ];
    },
  });

  return (
    <div style={{ padding: "4px" }}>
      <h2>Products</h2>
      <Form {...searchFormProps}>
        <Space>
          <Form.Item name="name">
            <Input placeholder="Search by name" />
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit">Search</Button>
          </Form.Item>
        </Space>
      </Form>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column dataIndex="name" title="Name" />
        <Table.Column dataIndex="price" title="Price" />
      </Table>
    </div>
  );
};

interface IProduct {
  id: number;
  name: string;
  price: string;
}

This example demonstrates how to use the useTable hook's search properties: 1. We destructure tableProps and searchFormProps from the useTable hook. 2. In the useTable hook, we define an onSearch function that returns an array of filter objects. In this case, we're filtering by the "name" field using the "contains" operator. 3. We create a form using Ant Design's Form component and spread the searchFormProps onto it. 4. Inside the form, we add an input field for the search term and a submit button. 5. The Table component uses the tableProps to handle the filtered data. When the user enters a search term and submits the form, the onSearch function will be called, and the table will be updated with the filtered results. This implementation allows for server-side filtering. If you want to handle client-side filtering instead, you can set filters.mode: "off" in the useTable hook options. Learn more about useTable and search (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#search) Remember to adjust the IProduct interface and table columns according to your actual data structure. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@689846866837373077> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

genetic-orangeOP•2mo ago

@kapa.ai but I am using Antd protable, and with this config the search is not triggered

genetic-orangeOP•5w ago

@kapa.ai I have this component and the search from columns is not working. Also the filter is local and not in the server

message.txt

kapa.ai•5w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're having issues with the search functionality in your table columns and that the filtering is happening locally instead of on the server. Let's address these problems based on the information provided in the knowledge sources. 1. Column Search Not Working: If the search from columns is not working, it might be because you haven't properly set up the column filtering. Here's how you can add filtering to your table columns:

<Table.Column
  dataIndex="title"
  title="Title"
  filterDropdown={(props) => (
    <FilterDropdown {...props}>
      <Input
        placeholder="Search title"
        onChange={(e) => props.setSelectedKeys(e.target.value ? [e.target.value] : [])}
      />
    </FilterDropdown>
  )}
/>

<Table.Column
  dataIndex="title"
  title="Title"
  filterDropdown={(props) => (
    <FilterDropdown {...props}>
      <Input
        placeholder="Search title"
        onChange={(e) => props.setSelectedKeys(e.target.value ? [e.target.value] : [])}
      />
    </FilterDropdown>
  )}
/>

This example shows how to add a filter dropdown to a column using the FilterDropdown component from refine Ant Design Table Filtering (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#filtering). 2. Local Filtering Instead of Server-Side: If the filtering is happening locally and not on the server, it's likely because the filters.mode is set to "off". To enable server-side filtering, you need to change this setting. Here's how you can modify your useTable hook:

const { tableProps, searchFormProps } = useTable<IProduct, HttpError, IProduct>({
  resource: "products",
  onSearch: (params) => {
    const filters: CrudFilters = [];
    const { q } = params;

    filters.push(
      {
        field: "q",
        operator: "eq",
        value: q,
      }
    );

    return filters;
  },
  filters: {
    mode: "server", // This enables server-side filtering
  },
});

const { tableProps, searchFormProps } = useTable<IProduct, HttpError, IProduct>({
  resource: "products",
  onSearch: (params) => {
    const filters: CrudFilters = [];
    const { q } = params;

    filters.push(
      {
        field: "q",
        operator: "eq",
        value: q,
      }
    );

    return filters;
  },
  filters: {
    mode: "server", // This enables server-side filtering
  },
});

By setting filters.mode to "server", you're telling refine to handle the filtering on the server side Filters Mode (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#filtersmode). If you actually want to keep the filtering on the client side, you can leave the filters.mode as "off" and use Ant Design's built-in filtering capabilities:

<Table.Column
  dataIndex="status"
  title="Status"
  filters={[
    { text: "Published", value: "published" },
    { text: "Draft", value: "draft" },
    { text: "Rejected", value: "rejected" },
  ]}
  onFilter={(value, record) => record.status === value}
/>

<Table.Column
  dataIndex="status"
  title="Status"
  filters={[
    { text: "Published", value: "published" },
    { text: "Draft", value: "draft" },
    { text: "Rejected", value: "rejected" },
  ]}
  onFilter={(value, record) => record.status === value}
/>

This approach uses Ant Design's filters and onFilter props to handle client-side filtering Client-side Filtering (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#how-can-i-handle-client-side-filtering). Remember to adjust these examples according to your specific data structure and requirements. If you need more detailed assistance, please provide your current component code so I can give more specific advice. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@689846866837373077> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Use search on table

Did you find this page helpful?