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