Empty

Empty state placeholder.

When To Use#

When there is no data provided, display for friendly tips.

Examples

No Data

No Data

Simplest Usage.

expand codeexpand code
import { Empty } from 'antd';

ReactDOM.render(
  <Empty />,
  mountNode
);
empty

Customize Description

Customize image, description and extra content.

expand codeexpand code
import { Empty, Button } from 'antd';

ReactDOM.render(
  <Empty
    image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
    description={
      <span>
        Customize <a href="#API">Description</a>
      </span>
    }
  >
    <Button type="primary">立即创建</Button>
  </Empty>,
  mountNode
);

Select

TreeSelect

Cascader

Transfer

0 item
    No Data

    No Data

    0 item
      No Data

      No Data

      Table

      Name
      Age
      No Data

      No Data

      List

      No Data

      No Data

      Use ConfigProvider set global Empty style.

      expand codeexpand code
      import {
        ConfigProvider, Switch, Divider, Icon,
        TreeSelect, Select, Cascader,
        Transfer,
        Table, List,
      } from 'antd';
      
      const customizeRenderEmpty = () => (
        <div style={{ textAlign: 'center' }}>
          <Icon type="smile" style={{ fontSize: 20 }} />
          <p>Data Not Found</p>
        </div>
      );
      
      const style = { width: 200 };
      
      class Demo extends React.Component {
        state = {
          customize: false,
        };
      
        render() {
          const { customize } = this.state;
          return (
            <div>
              <Switch
                unCheckedChildren="default"
                checkedChildren="customize"
                checked={customize}
                onChange={(val) => {
                  this.setState({ customize: val });
                }}
              />
      
              <Divider />
      
              <ConfigProvider renderEmpty={customize && customizeRenderEmpty}>
                <div className="config-provider">
                  <h3>Select</h3>
                  <Select style={style} />
      
                  <h3>TreeSelect</h3>
                  <TreeSelect style={style} treeData={[]} />
      
                  <h3>Cascader</h3>
                  <Cascader style={style} options={[]} showSearch />
      
                  <h3>Transfer</h3>
                  <Transfer />
      
                  <h3>Table</h3>
                  <Table
                    style={{ marginTop: 8 }}
                    columns={[
                      {
                        title: 'Name',
                        dataIndex: 'name',
                        key: 'name',
                      },
                      {
                        title: 'Age',
                        dataIndex: 'age',
                        key: 'age',
                      },
                    ]}
                  />
      
                  <h3>List</h3>
                  <List />
                </div>
              </ConfigProvider>
            </div>
          );
        }
      }
      
      ReactDOM.render(<Demo />, mountNode);

      API#

      <Empty>
        <Button>Create</Button>
      </Empty>
      PropertyDescriptionTypeDefault
      descriptionCustomize descriptionstring | ReactNode-
      imageCustomize image. Will tread as image url when string providedstring | ReactNodefalse
      CommentList