Text

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

Swizzle

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

Live previews only work with the latest documentation.

import { IResourceComponentsProps, useMany } from "@pankod/refine-core";
import {
  List,
  TextField,
  Table,
  useTable,
} from "@pankod/refine-antd";

const PostList: React.FC<IResourceComponentsProps> = (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 };
}

TIP

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

It also accepts all props of Ant Design Text.

Usage​

API Reference​

Properties​

Usage

API Reference

Properties