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

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

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/

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} />