conscious-sapphire•4w ago

Data not filtering by characters

export const CustomerList = () => { const { tableProps, filters } = useTable<ICustomers>({ resource: "customers", onSearch: (values: any) => { return [ { field: "name", operator: "contains", value: values.name, }, ]; }, pagination: { pageSize: 5, }, sorters: { initial: [ { field: "name", order: "asc", }, ], }, }); const go = useGo(); return ( <List breadcrumb={false} headerButtons={() => ( <CreateButton onClick={() => { go({ to: { resource: "customers", action: "create", }, options: { keepQuery: true, }, type: "replace", }); }} /> )} > <Table {...tableProps} pagination={{ ...tableProps.pagination }} rowKey="id" > <Table.Column dataIndex="name" title={"Name"} defaultFilteredValue={getDefaultFilter("id", filters)} filterIcon={<SearchOutlined />} filterDropdown={(props) => ( <FilterDropdown {...props}> <Input placeholder="Search Customer" /> </FilterDropdown> )} /> <Table.Column dataIndex="email" title={"Email"} /> <Table.Column dataIndex="mobile" title={"Mobile"} /> <Table.Column title={"Actions"} dataIndex="id" fixed="right" render={(value) => ( <Space> <EditButton hideText size="small" recordItemId={value} /> <DeleteButton hideText size="small" recordItemId={value.id} /> </Space> )} /> </Table> </List> ); }; data isnt filtering when trying to fitler by character? it only filters when eneting full name @kapa.ai

4 Replies

kapa.ai•4w ago

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 encountering an issue where the data isn't filtering correctly by characters and only filters when entering the full name. This could be related to how the filter operator is configured in your useTable hook. Based on the knowledge sources, here are a few things to check and adjust: 1. Ensure Correct Filter Operator: Make sure that the filter operator is correctly set to "contains" in your onSearch function. This operator should allow partial matches. 2. Check DataProvider Configuration: Ensure that your DataProvider is correctly configured to handle the "contains" filter operator. This is a common issue as mentioned in the GitHub issue (https://github.com/refinedev/refine/issues/3828). 3. Filter Dropdown Configuration: Ensure that the filter dropdown is correctly set up to pass the filter value. Here is a revised version of your code with these considerations:

export const CustomerList = () => {
  const { tableProps, filters } = useTable<ICustomers>({
    resource: "customers",
    onSearch: (values: any) => {
      return [
        {
          field: "name",
          operator: "contains",
          value: values.name,
        },
      ];
    },
    pagination: {
      pageSize: 5,
    },
    sorters: {
      initial: [
        {
          field: "name",
          order: "asc",
        },
      ],
    },
  });
const go = useGo();
  return (
    <List
      breadcrumb={false}
      headerButtons={() => (
        <CreateButton
          onClick={() => {
            go({
              to: {
                resource: "customers",
                action: "create",
              },
              options: {
                keepQuery: true,
              },
              type: "replace",
            });
          }}
        />
      )}
    >
      <Table
        {...tableProps}
        pagination={{ ...tableProps.pagination }}
        rowKey="id"
      >
        <Table.Column
          dataIndex="name"
          title={"Name"}
          filterIcon={<SearchOutlined />}
          filterDropdown={(props) => (
            <FilterDropdown {...props}>
              <Input
                placeholder="Search Customer"
                onChange={(e) => {
                  const value = e.target.value;
                  filters.setFilters([
                    {
                      field: "name",
                      operator: "contains",
                      value,
                    },
                  ]);
                }}
              />
            </FilterDropdown>
          )}
        />
        <Table.Column dataIndex="email" title={"Email"} />
        <Table.Column dataIndex="mobile" title={"Mobile"} />

        <Table.Column
          title={"Actions"}
          dataIndex="id"
          fixed="right"
          render={(value) => (
            <Space>
              <EditButton hideText size="small" recordItemId={value} />
              <DeleteButton hideText size="small" recordItemId={value.id} />
            </Space>
          )}
        />
      </Table>
    </List>
  );
};

export const CustomerList = () => {
  const { tableProps, filters } = useTable<ICustomers>({
    resource: "customers",
    onSearch: (values: any) => {
      return [
        {
          field: "name",
          operator: "contains",
          value: values.name,
        },
      ];
    },
    pagination: {
      pageSize: 5,
    },
    sorters: {
      initial: [
        {
          field: "name",
          order: "asc",
        },
      ],
    },
  });
const go = useGo();
  return (
    <List
      breadcrumb={false}
      headerButtons={() => (
        <CreateButton
          onClick={() => {
            go({
              to: {
                resource: "customers",
                action: "create",
              },
              options: {
                keepQuery: true,
              },
              type: "replace",
            });
          }}
        />
      )}
    >
      <Table
        {...tableProps}
        pagination={{ ...tableProps.pagination }}
        rowKey="id"
      >
        <Table.Column
          dataIndex="name"
          title={"Name"}
          filterIcon={<SearchOutlined />}
          filterDropdown={(props) => (
            <FilterDropdown {...props}>
              <Input
                placeholder="Search Customer"
                onChange={(e) => {
                  const value = e.target.value;
                  filters.setFilters([
                    {
                      field: "name",
                      operator: "contains",
                      value,
                    },
                  ]);
                }}
              />
            </FilterDropdown>
          )}
        />
        <Table.Column dataIndex="email" title={"Email"} />
        <Table.Column dataIndex="mobile" title={"Mobile"} />

        <Table.Column
          title={"Actions"}
          dataIndex="id"
          fixed="right"
          render={(value) => (
            <Space>
              <EditButton hideText size="small" recordItemId={value} />
              <DeleteButton hideText size="small" recordItemId={value.id} />
            </Space>
          )}
        />
      </Table>
    </List>
  );
};

Additional Steps: - Verify DataProvider: Ensure your DataProvider supports the "contains" operator. Refer to the DataProvider tutorial (https://refine.dev/docs/tutorial/understanding-dataprovider/index/) for more details. - Check for Known Issues: There might be known issues or limitations with certain filter operators as mentioned in the Discord support thread (https://discord.com/channels/837692625737613362/1229416157174562836). If the issue persists, you might want to check the backend API to ensure it supports partial matching with the "contains" operator. For more detailed information, you can refer to the [use ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

conscious-sapphire•4w ago

@kapa.ai does filtering by character work with supabase?

kapa.ai•4w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, filtering by character should work with Supabase when using the correct filter operators. However, there have been some issues reported with certain filter operators not being correctly parsed or mapped in the Supabase Data Provider. Known Issues and Fixes 1. Incorrect Parsing of Filter Values: There was an issue where filter values on nested queries with contains, containss, startswith, and endswith were not correctly parsed. This issue is documented in GitHub Issue #6239 (https://github.com/refinedev/refine/issues/6239). 2. Deep Filtering on Nested JSON Fields: Another related issue was with deep filtering on nested JSON fields, which required specific handling. This is discussed in GitHub Issue #5809 (https://github.com/refinedev/refine/issues/5809). Example of Filtering by Character To ensure that filtering by character works, you need to use the contains operator correctly. Here is an example setup:

export const CustomerList = () => {
  const { tableProps, filters } = useTable<ICustomers>({
    resource: "customers",
    onSearch: (values: any) => {
      return [
        {
          field: "name",
          operator: "contains",
          value: values.name,
        },
      ];
    },
    pagination: {
      pageSize: 5,
    },
    sorters: {
      initial: [
        {
          field: "name",
          order: "asc",
        },
      ],
    },
  });
const go = useGo();
  return (
    <List
      breadcrumb={false}
      headerButtons={() => (
        <CreateButton
          onClick={() => {
            go({
              to: {
                resource: "customers",
                action: "create",
              },
              options: {
                keepQuery: true,
              },
              type: "replace",
            });
          }}
        />
      )}
    >
      <Table
        {...tableProps}
        pagination={{ ...tableProps.pagination }}
        rowKey="id"
      >
        <Table.Column
          dataIndex="name"
          title={"Name"}
          filterIcon={<SearchOutlined />}
          filterDropdown={(props) => (
            <FilterDropdown {...props}>
              <Input
                placeholder="Search Customer"
                onChange={(e) => {
                  const value = e.target.value;
                  filters.setFilters([
                    {
                      field: "name",
                      operator: "contains",
                      value,
                    },
                  ]);
                }}
              />
            </FilterDropdown>
          )}
        />
        <Table.Column dataIndex="email" title={"Email"} />
        <Table.Column dataIndex="mobile" title={"Mobile"} />

        <Table.Column
          title={"Actions"}
          dataIndex="id"
          fixed="right"
          render={(value) => (
            <Space>
              <EditButton hideText size="small" recordItemId={value} />
              <DeleteButton hideText size="small" recordItemId={value.id} />
            </Space>
          )}
        />
      </Table>
    </List>
  );
};

export const CustomerList = () => {
  const { tableProps, filters } = useTable<ICustomers>({
    resource: "customers",
    onSearch: (values: any) => {
      return [
        {
          field: "name",
          operator: "contains",
          value: values.name,
        },
      ];
    },
    pagination: {
      pageSize: 5,
    },
    sorters: {
      initial: [
        {
          field: "name",
          order: "asc",
        },
      ],
    },
  });
const go = useGo();
  return (
    <List
      breadcrumb={false}
      headerButtons={() => (
        <CreateButton
          onClick={() => {
            go({
              to: {
                resource: "customers",
                action: "create",
              },
              options: {
                keepQuery: true,
              },
              type: "replace",
            });
          }}
        />
      )}
    >
      <Table
        {...tableProps}
        pagination={{ ...tableProps.pagination }}
        rowKey="id"
      >
        <Table.Column
          dataIndex="name"
          title={"Name"}
          filterIcon={<SearchOutlined />}
          filterDropdown={(props) => (
            <FilterDropdown {...props}>
              <Input
                placeholder="Search Customer"
                onChange={(e) => {
                  const value = e.target.value;
                  filters.setFilters([
                    {
                      field: "name",
                      operator: "contains",
                      value,
                    },
                  ]);
                }}
              />
            </FilterDropdown>
          )}
        />
        <Table.Column dataIndex="email" title={"Email"} />
        <Table.Column dataIndex="mobile" title={"Mobile"} />

        <Table.Column
          title={"Actions"}
          dataIndex="id"
          fixed="right"
          render={(value) => (
            <Space>
              <EditButton hideText size="small" recordItemId={value} />
              <DeleteButton hideText size="small" recordItemId={value.id} />
            </Space>
          )}
        />
      </Table>
    </List>
  );
};

Additional Resources - Supabase Data Provider Documentation (https://refine.dev/docs/api-references/providers/data-provider/) - GitHub Issue #6239 (https://github.com/refinedev/refine/issues/6239) - GitHub Issue #5809 (https://github.com/refinedev/refine/issues/5809) If you continue to experience issues, you may want to check the specific implementation details of your Supabase Data Provider or consult the Refine documentation (https://refine.dev/docs/) for further guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------