Antd UI library. Overriding <Table /> behavior on empty data

Question

I want to render some other content if <Table /> receives empty data Array.
Currently its just showing 'No data', but I want to put some custom component there.

How this may be done?

Answer 1

There is another way to do this, without touching the locale property:

Wrap the <Table /> with a <ConfigProvider /> and set the renderEmpty property:

<ConfigProvider renderEmpty={() => <Empty description="Custom message"/>}>
  <Table />
</ConfigProvider>

The renderEmpty function can return any component you want.

More details here: https://ant.design/components/config-provider/#API Example from docs: https://ant.design/components/empty/#components-empty-demo-config-provider

Answer 2

You can use locale props of antd table which is Object. Instead of just passing string to emptyText you can pass HTML tag.

let locale = {
  emptyText: (
    <span>
      <p>
        <Icon type="like" />
        Custom Message
      </p>
      <Button>Custom Button</Button>
    </span>
  )
};

<Table locale={locale}  dataSource={dataSource} columns={columns} />

Answer 3

There is a property of table, locale. This is an object, used to define following things:

filterConfirm, filterReset, emptyText.

Use emptyText to specify the text that you want to show if data is empty. Like this:

let locale = {
  emptyText: 'Abc',
};

<Table locale={locale}  dataSource={dataSource} columns={columns} />

Check the Doc: https://ant.design/components/table/

Answer 4

Locale can be used. Empty text can be given directly.

<Table 
   locale={{emptyText:"No data"} 
   dataSource={dataSource}
   columns={columns} />