Using two table with one source in one page

I want to call the same tables twices but with different filter in one page.

5 Replies

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 display the same table twice on one page with different filters, you can use the useTable hook from refine. Below is an example of how you can achieve this: 1. Set up your project: Ensure you have a refine project set up. If not, you can create one using the following command:

    npm create refine-app@latest

    npm create refine-app@latest

2. Create the component: Create a component that will render two tables with different filters. Here's an example of how you can implement this:

import React, { useMemo } from "react";
import { useTable, HttpError } from "@refinedev/core";

interface IPost {
  id: number;
  title: string;
  content: string;
  status: "published" | "draft" | "rejected";
  createdAt: string;
}

const PostList: React.FC = () => {
  // First table with filter for published posts
  const { tableQueryResult: publishedTableQueryResult, filters: publishedFilters, setFilters: setPublishedFilters } = useTable<IPost, HttpError>({
    resource: "posts",
    filters: {
      initial: [{ field: "status", operator: "eq", value: "published" }],
    },
  });

  // Second table with filter for draft posts
  const { tableQueryResult: draftTableQueryResult, filters: draftFilters, setFilters: setDraftFilters } = useTable<IPost, HttpError>({
    resource: "posts",
    filters: {
      initial: [{ field: "status", operator: "eq", value: "draft" }],
    },
  });

  const publishedPosts = publishedTableQueryResult?.data?.data ?? [];
  const draftPosts = draftTableQueryResult?.data?.data ?? [];
return (
    <div>
      <h1>Published Posts</h1>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {publishedPosts.map((post) => (
            <tr key={post.id}>
              <td>{post.id}</td>
              <td>{post.title}</td>
              <td>{post.status}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <h1>Draft Posts</h1>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {draftPosts.map((post) => (
            <tr key={post.id}>
              <td>{post.id}</td>
              <td>{post.title}</td>
              <td>{post.status}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default PostList;

import React, { useMemo } from "react";
import { useTable, HttpError } from "@refinedev/core";

interface IPost {
  id: number;
  title: string;
  content: string;
  status: "published" | "draft" | "rejected";
  createdAt: string;
}

const PostList: React.FC = () => {
  // First table with filter for published posts
  const { tableQueryResult: publishedTableQueryResult, filters: publishedFilters, setFilters: setPublishedFilters } = useTable<IPost, HttpError>({
    resource: "posts",
    filters: {
      initial: [{ field: "status", operator: "eq", value: "published" }],
    },
  });

  // Second table with filter for draft posts
  const { tableQueryResult: draftTableQueryResult, filters: draftFilters, setFilters: setDraftFilters } = useTable<IPost, HttpError>({
    resource: "posts",
    filters: {
      initial: [{ field: "status", operator: "eq", value: "draft" }],
    },
  });

  const publishedPosts = publishedTableQueryResult?.data?.data ?? [];
  const draftPosts = draftTableQueryResult?.data?.data ?? [];
return (
    <div>
      <h1>Published Posts</h1>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {publishedPosts.map((post) => (
            <tr key={post.id}>
              <td>{post.id}</td>
              <td>{post.title}</td>
              <td>{post.status}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <h1>Draft Posts</h1>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {draftPosts.map((post) => (
            <tr key={post.id}>
              <td>{post.id}</td>
              <td>{post.title}</td>
              <td>{post.status}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default PostList;

Explanation: - useTable Hook: We use the useTable hook twice, each with different initial filters. - The first useTable instance filters for posts with the status "published". - The second useTable instance filters for posts with the status "draft". - Rendering Tables: We render two tables, one for each set of filtered data. This approach ensures that you can display the same table structure with different data based on the filters applied. For more information on filtering with useTable, you can refer to the official documentation (https://refine.dev/docs/data/hooks/use-table/#filtering). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

continuing-cyan•4mo ago

i am using tables from ant design @kapa.ai

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To display the same Ant Design table twice on one page with different filters using refine, you can use the useTable hook from refine. Below is an example of how you can achieve this: 1. Set up your project: Ensure you have a refine project set up. If not, you can create one using the following command:

    npm create refine-app@latest -- --example table-antd-use-table

    npm create refine-app@latest -- --example table-antd-use-table

2. Create the component: Create a component that will render two Ant Design tables with different filters. Here's an example of how you can implement this:

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

interface IPost {
  id: number;
  title: string;
  content: string;
  status: "published" | "draft" | "rejected";
}

const PostList: React.FC = () => {
  // First table with filter for published posts
  const { tableProps: publishedTableProps } = useTable<IPost, HttpError>({
    resource: "posts",
    initialFilter: [{ field: "status", operator: "eq", value: "published" }],
  });

  // Second table with filter for draft posts
  const { tableProps: draftTableProps } = useTable<IPost, HttpError>({
    resource: "posts",
    initialFilter: [{ field: "status", operator: "eq", value: "draft" }],
  });

  return (
    <div>
      <h1>Published Posts</h1>
      <List>
        <Table {...publishedTableProps} rowKey="id">
          <Table.Column dataIndex="id" title="ID" />
          <Table.Column dataIndex="title" title="Title" />
          <Table.Column dataIndex="content" title="Content" />
          <Table.Column
            dataIndex="status"
            title="Status"
            render={(value: string) => <TagField value={value} />}
          />
        </Table>
      </List>
<h1>Draft Posts</h1>
      <List>
        <Table {...draftTableProps} rowKey="id">
          <Table.Column dataIndex="id" title="ID" />
          <Table.Column dataIndex="title" title="Title" />
          <Table.Column dataIndex="content" title="Content" />
          <Table.Column
            dataIndex="status"
            title="Status"
            render={(value: string) => <TagField value={value} />}
          />
        </Table>
      </List>
    </div>
  );
};

export default PostList;

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

interface IPost {
  id: number;
  title: string;
  content: string;
  status: "published" | "draft" | "rejected";
}

const PostList: React.FC = () => {
  // First table with filter for published posts
  const { tableProps: publishedTableProps } = useTable<IPost, HttpError>({
    resource: "posts",
    initialFilter: [{ field: "status", operator: "eq", value: "published" }],
  });

  // Second table with filter for draft posts
  const { tableProps: draftTableProps } = useTable<IPost, HttpError>({
    resource: "posts",
    initialFilter: [{ field: "status", operator: "eq", value: "draft" }],
  });

  return (
    <div>
      <h1>Published Posts</h1>
      <List>
        <Table {...publishedTableProps} rowKey="id">
          <Table.Column dataIndex="id" title="ID" />
          <Table.Column dataIndex="title" title="Title" />
          <Table.Column dataIndex="content" title="Content" />
          <Table.Column
            dataIndex="status"
            title="Status"
            render={(value: string) => <TagField value={value} />}
          />
        </Table>
      </List>
<h1>Draft Posts</h1>
      <List>
        <Table {...draftTableProps} rowKey="id">
          <Table.Column dataIndex="id" title="ID" />
          <Table.Column dataIndex="title" title="Title" />
          <Table.Column dataIndex="content" title="Content" />
          <Table.Column
            dataIndex="status"
            title="Status"
            render={(value: string) => <TagField value={value} />}
          />
        </Table>
      </List>
    </div>
  );
};

export default PostList;

Explanation: - useTable Hook: We use the useTable hook twice, each with different initial filters. - The first useTable instance filters for posts with the status "published". - The second useTable instance filters for posts with the status "draft". - Rendering Tables: We render two Ant Design tables, one for each set of filtered data. This approach ensures that you can display the same table structure with different data based on the filters applied. For more information on using the useTable hook with Ant Design, you can refer to the official documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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