grumpy-cyan
grumpy-cyan6mo ago

How to map table cell data to useSelect data?

I'm using useTable to get a list of data from an API. I want the cell data on certain columns to be mapped to data from another dataset obtained with useSelect. How do?
3 Replies
kapa.ai
kapa.ai6mo ago
Hi @chris. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To map table cell data to data obtained with useSelect, you can follow these steps. This approach involves using the useTable hook to fetch your main dataset and the useSelect hook to fetch the related dataset. Then, you can map the cell data to the related data. Here's a step-by-step guide: 1. Fetch the main dataset using useTable:
import React from "react";
import { useTable, HttpError } from "@refinedev/core";
import { Table } from "antd";

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

const PostList: React.FC = () => {
const { tableProps } = useTable<IPost, HttpError>();

return (
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column dataIndex="title" title="Title" />
<Table.Column dataIndex="content" title="Content" />
{/* Additional columns */}
</Table>
);
};

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

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

const PostList: React.FC = () => {
const { tableProps } = useTable<IPost, HttpError>();

return (
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column dataIndex="title" title="Title" />
<Table.Column dataIndex="content" title="Content" />
{/* Additional columns */}
</Table>
);
};

2. Fetch the related dataset using useSelect:
import { useSelect } from "@refinedev/antd";
import { Select } from "antd";

interface ICategory {
id: number;
title: string;
}

const { selectProps } = useSelect<ICategory>({
resource: "categories",
optionLabel: "title",
optionValue: "id",
});

import { useSelect } from "@refinedev/antd";
import { Select } from "antd";

interface ICategory {
id: number;
title: string;
}

const { selectProps } = useSelect<ICategory>({
resource: "categories",
optionLabel: "title",
optionValue: "id",
});

3. Map the cell data to the related data:
import React from "react";
import { useTable, HttpError } from "@refinedev/core";
import { Table, Select } from "antd";
import { useSelect } from "@refinedev/antd";

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

interface ICategory {
id: number;
title: string;
}
const PostList: React.FC = () => {
const { tableProps } = useTable<IPost, HttpError>();
const { selectProps, data, isFetching } = useSelect<ICategory>({
resource: "categories",
optionLabel: "title",
optionValue: "id",
});

return (
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column dataIndex="title" title="Title" />
<Table.Column dataIndex="content" title="Content" />
<Table.Column
dataIndex={["category", "id"]}
title="Category"
render={(value) => {
if (isFetching) return "loading...";
return data?.data.find((category) => category.id === value)?.title;
}}
filterDropdown={(props) => (
<Select
style={{ minWidth: 200 }}
mode="multiple"
{...selectProps}
/>
)}
/>
<Table.Column dataIndex="status" title="Status" />
</Table>
);
};

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

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

interface ICategory {
id: number;
title: string;
}
const PostList: React.FC = () => {
const { tableProps } = useTable<IPost, HttpError>();
const { selectProps, data, isFetching } = useSelect<ICategory>({
resource: "categories",
optionLabel: "title",
optionValue: "id",
});

return (
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column dataIndex="title" title="Title" />
<Table.Column dataIndex="content" title="Content" />
<Table.Column
dataIndex={["category", "id"]}
title="Category"
render={(value) => {
if (isFetching) return "loading...";
return data?.data.find((category) => category.id === value)?.title;
}}
filterDropdown={(props) => (
<Select
style={{ minWidth: 200 }}
mode="multiple"
{...selectProps}
/>
)}
/>
<Table.Column dataIndex="status" title="Status" />
</Table>
);
};

In this example: - The useTable hook fetches the main dataset (IPost). - The useSelect hook fetches the related dataset (ICategory). - The render function in ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai6mo ago
<@132392716767068160> kapa.ai is still learning and improving, please let us know how it did by reacting below
grumpy-cyan
grumpy-cyanOP6mo ago
This AI rocks