[BUG] - setFilters with filters.mode="off" not updating the table

[Abenezer]

Describe the bug

when using external search box to filter a table with filter.mode set to "off" the filter query is correctly displayed on the location bar but the table will not be updated until the page is refreshed. i forked the basic example of react-table with charka-ui and able to reproduce the issue.

Steps To Reproduce

open https://codesandbox.io/p/sandbox/solitary-architecture-fne4uq?file=%2Fsrc%2Fpages%2Fposts%2Flist.tsx%3A140%2C21
on the text filed "search by title" type any of the title eg. rter
the table is not filtered. even though the query string on location bar is set correctly

but if filters.mode is set to server or cleared the table will be filtered as expected.

Expected behavior

the table should be updated when user types text on the search field without requesting the server if filter.mode is set to "off".
(only works after refreshing the page)

Screenshot

No response

Desktop

No response

Mobile

No response

Additional Context

No response

[BatuhanW]

Hello @Abenezer, thanks for the detailed report! We'll check and get back to you.

[alicanerdurmaz]

Hi @Abenezer, This does not work because when filters.mode="off" you need to handle filters on the client side with the help of TanStack Table.

you can use it like this:
https://codesandbox.io/p/sandbox/boring-water-ubs5wo?file=%2Fsrc%2Fpages%2Fposts%2Flist.tsx%3A174%2C1-175%2C1

other filters work as expected (dropdown, sorters, etc.) because we already write the required logic on /components/table/columnFilter.tsx

[Abenezer]

thankyou for the fast response. one thing i did not understand is how it was able to work when refreshing the page if the logic is not implemented. I can work like the example you provided, setting column filter like this might be even better. thankyou.

[alicanerdurmaz]

@Abenezer After refresh works because we are populating TanStack Table's initialState with URL params.

[alicanerdurmaz]

@Abenezer We discuss this issue with the core team and decided this behavior and implementation are quite confusing. Next week we will plan this feature and we will improve the API and documentation of useTable to make it more understandable.

Thanks for the issue 🚀

[alicanerdurmaz]

@Abenezer Hi again, due to our higher priority tasks this week, we couldn't schedule this job. We hope to schedule and complete it next week ✌️.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jaychang99]

I have the same issue, except that the table data won't be filtered even after full reload (refresh). I am using ant-design as my UI library.

'use client';
import {
  useTable,
  List,
  EditButton,
  ShowButton,
  DeleteButton,
} from '@refinedev/antd';
import { Table, Space, Input } from 'antd';

import { IPost } from 'src/interfaces';

const WordList: React.FC = () => {
  const { tableProps, setFilters, filters } = useTable<IPost>({
    resource: 'words',
    pagination: {
      mode: 'client',
      pageSize: 20,
    },
    filters: {
      mode: 'off',
    },
  });

  return (
    <List>
      {/* search form */}
      <Input.Search
        onChange={(event) => {
          console.log('value', event.target.value);
          setFilters([
            {
              field: 'firstChar',
              operator: 'eq',
              value: String(event.target.value),
            },
          ]);
        }}
      />
      <Table {...tableProps} rowKey="id" size="small">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column dataIndex="word" title="Word" />
        <Table.Column dataIndex="length" title="Length" />
        <Table.Column<IPost>
          title="Actions"
          dataIndex="actions"
          render={(_text, record): React.ReactNode => {
            return (
              <Space>
                <EditButton size="small" recordItemId={record.id} />
                <ShowButton size="small" recordItemId={record.id} />
                <DeleteButton size="small" recordItemId={record.id} />
              </Space>
            );
          }}
        />
      </Table>
    </List>
  );
};

export default WordList;

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[reedwane]

I am also facing this issue too. I'm passing the needed filters as arguments to a custom queryFn, and also declared my custom queryKeys and added an object with the filters to force trigger a refetch with the passed filters. But this isn't working at all

I thought I read it all correctly from the useTable docs