Empty

Empty state placeholder.

When To Use#

When there is no data provided, display for friendly tips.
User tutorial to create something in fresh new situation.

Examples

No Data

Basic

Simplest Usage.

TypeScript
JavaScript
import { Empty } from 'antd';

const App: React.FC = () => <Empty />;

export default App;

No Data

Chose image

You can choose another style of image by setting image to Empty.PRESENTED_IMAGE_SIMPLE.

TypeScript
JavaScript
import { Empty } from 'antd';

const App: React.FC = () => <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;

export default App;

Customize Description

Customize

Customize image source, image size, description and extra content.

TypeScript
JavaScript
import React from 'react';
import { Empty, Button } from 'antd';

const App: React.FC = () => (
  <Empty
    image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
    imageStyle={{
      height: 60,
    }}
    description={
      <span>
        Customize <a href="#API">Description</a>
      </span>
    }
  >
    <Button type="primary">Create Now</Button>
  </Empty>
);

export default App;

Select

TreeSelect

Cascader

Transfer

0 item

No Data

0 item

No Data

Table

Name	Age
No Data

List

No Data

ConfigProvider

Use ConfigProvider set global Empty style.

TypeScript
JavaScript
import React, { useState } from 'react';
import {
  ConfigProvider,
  Switch,
  Divider,
  TreeSelect,
  Select,
  Cascader,
  Transfer,
  Table,
  List,
} from 'antd';
import { SmileOutlined } from '@ant-design/icons';

const customizeRenderEmpty = () => (
  <div style={{ textAlign: 'center' }}>
    <SmileOutlined style={{ fontSize: 20 }} />
    <p>Data Not Found</p>
  </div>
);

const style = { width: 200 };

const App: React.FC = () => {
  const [customize, setCustomize] = useState(false);

  return (
    <div>
      <Switch
        unCheckedChildren="default"
        checkedChildren="customize"
        checked={customize}
        onChange={val => {
          setCustomize(val);
        }}
      />

      <Divider />

      <ConfigProvider renderEmpty={customize ? customizeRenderEmpty : undefined}>
        <div className="config-provider">
          <h4>Select</h4>
          <Select style={style} />

          <h4>TreeSelect</h4>
          <TreeSelect style={style} treeData={[]} />

          <h4>Cascader</h4>
          <Cascader style={style} options={[]} showSearch />

          <h4>Transfer</h4>
          <Transfer />

          <h4>Table</h4>
          <Table
            style={{ marginTop: 8 }}
            columns={[
              {
                title: 'Name',
                dataIndex: 'name',
                key: 'name',
              },
              {
                title: 'Age',
                dataIndex: 'age',
                key: 'age',
              },
            ]}
          />

          <h4>List</h4>
          <List />
        </div>
      </ConfigProvider>
    </div>
  );
};

export default App;

No description

Simplest Usage with no description.

TypeScript
JavaScript
import { Empty } from 'antd';

const App: React.FC = () => <Empty description={false} />;

export default App;

API#

<Empty>
  <Button>Create</Button>
</Empty>

Property	Description	Type	Default
description	Customize description	ReactNode	-
image	Customize image. Will treat as image url when string provided	ReactNode	`Empty.PRESENTED_IMAGE_DEFAULT`
imageStyle	The style of image	CSSProperties	-

Built-in images#

Empty.PRESENTED_IMAGE_SIMPLE
Empty.PRESENTED_IMAGE_DEFAULT