correct-apricot•8mo ago

How to filter data in List Table at the server

i want to filter data that being fetched in my list page but i want to filter it at the server side. so i need to sent role information from frontend to my server to filter the data

5 Replies

kapa.ai•8mo ago

Hi @M Farhan Zachary. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To filter data on the server side in a List Table using refine, you can utilize the useTable hook and configure it to handle server-side filtering. Here’s how you can achieve this: 1. Set up the useTable hook for server-side filtering: By default, useTable is configured for server-side operations. You need to ensure that the filters.mode is not set to "off". 2. Send filter information to the server: You can use the filters state to send the necessary filter information (e.g., role) to your server. Here is an example of how you can set up server-side filtering in your list page:

import { useTable } from "@refinedev/core";
import { Table } from "antd";

const ListPage = () => {
  const { tableProps, filters, setFilters } = useTable({
    // Ensure server-side filtering is enabled
    filters: {
      mode: "server",
    },
  });

  // Example of setting a filter for role
  const handleRoleFilter = (role) => {
    setFilters([
      {
        field: "role",
        operator: "eq",
        value: role,
      },
    ]);
  };

  return (
    <div>
      <button onClick={() => handleRoleFilter("admin")}>Filter Admins</button>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column dataIndex="name" title="Name" />
        <Table.Column dataIndex="role" title="Role" />
      </Table>
    </div>
  );
};

export default ListPage;

import { useTable } from "@refinedev/core";
import { Table } from "antd";

const ListPage = () => {
  const { tableProps, filters, setFilters } = useTable({
    // Ensure server-side filtering is enabled
    filters: {
      mode: "server",
    },
  });

  // Example of setting a filter for role
  const handleRoleFilter = (role) => {
    setFilters([
      {
        field: "role",
        operator: "eq",
        value: role,
      },
    ]);
  };

  return (
    <div>
      <button onClick={() => handleRoleFilter("admin")}>Filter Admins</button>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column dataIndex="name" title="Name" />
        <Table.Column dataIndex="role" title="Role" />
      </Table>
    </div>
  );
};

export default ListPage;

In this example: - The useTable hook is configured to handle server-side filtering. - The handleRoleFilter function sets a filter for the role field. - When the button is clicked, it sets the filter to only show records where the role is "admin". This setup ensures that the filter information is sent to the server, and the server returns the filtered data based on the role. For more details, you can refer to the refine documentation on server-side filtering (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#how-can-i-handle-client-side-filtering). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

correct-apricotOP•8mo ago

i want to filter is default based on which account logged in i want to filter is default based on which account @kapa.ai

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To set a default filter based on the account, you can use the permanentFilter property in the useTable hook. This ensures that the filter is always applied when fetching data from the server. Here’s how you can set up a default filter based on the account: 1. Configure the useTable hook with permanentFilter: This will ensure that the filter is always applied when fetching data. 2. Set the filter based on the account: You can dynamically set the filter value based on the account information. Here is an example:

import { useTable } from "@refinedev/core";
import { Table } from "antd";

const ListPage = ({ account }) => {
  const { tableProps } = useTable({
    permanentFilter: [
      {
        field: "account",
        operator: "eq",
        value: account, // Set the account dynamically
      },
    ],
  });

  return (
    <Table {...tableProps} rowKey="id">
      <Table.Column dataIndex="id" title="ID" />
      <Table.Column dataIndex="name" title="Name" />
      <Table.Column dataIndex="role" title="Role" />
    </Table>
  );
};

export default ListPage;

import { useTable } from "@refinedev/core";
import { Table } from "antd";

const ListPage = ({ account }) => {
  const { tableProps } = useTable({
    permanentFilter: [
      {
        field: "account",
        operator: "eq",
        value: account, // Set the account dynamically
      },
    ],
  });

  return (
    <Table {...tableProps} rowKey="id">
      <Table.Column dataIndex="id" title="ID" />
      <Table.Column dataIndex="name" title="Name" />
      <Table.Column dataIndex="role" title="Role" />
    </Table>
  );
};

export default ListPage;

In this example: - The useTable hook is configured with a permanentFilter that filters data based on the account field. - The value of the filter is dynamically set based on the account prop passed to the ListPage component. This setup ensures that the data is always filtered based on the account when fetching from the server. For more details, you can refer to the refine documentation on permanentFilter (https://github.com/refinedev/refine/issues/444). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

How to filter data in List Table at the server

Did you find this page helpful?