Skip to main content
Version: 4.xx.xx
Swizzle Ready

Text

This field lets you show basic text. It uses Ant Design's <Typography.Text> component.

Good to know:

You can swizzle this component to customize it with the Refine CLI

Usage

Let's see how to use it in a basic list page:

localhost:3000
import { useMany } from "@refinedev/core";
import {
List,
TextField,
useTable,
} from "@refinedev/antd";
import { Table } from "antd";

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

const categoryIds =
tableProps?.dataSource?.map((item) => item.category.id) ?? [];

const { data: categoriesData, isLoading } = useMany<ICategory>({
resource: "categories",
ids: categoryIds,
queryOptions: {
enabled: categoryIds.length > 0,
},
});

return (
<List {...props}>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="title" title="title" width="50%" />
<Table.Column
dataIndex={["category", "id"]}
title="category"
render={(value: number) => {
if (isLoading) {
return <TextField value="Loading..." />;
}

return (
<TextField
strong
value={
categoriesData?.data.find((item) => item.id === value)?.title
}
/>
);
}}
width="50%"
/>
</Table>
</List>
);
};

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

interface IPost {
id: number;
title: string;
category: { id: number };
}
Implementation Tips:

Table columns already render their data as text by default. If the rendered data is in text form and its text field won't be customized with any of Ant Design <Typography.Text> properties, there isn't any need to use <TextField> in a column's render function.

API Reference

Properties

External Props:

This field also accepts all props of Ant Design's Text component.

Was this helpful?