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.

Usage​

API Reference​

Properties​

Usage

API Reference

Properties