score:26

Accepted answer

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/

score:1

it is well explained on ant design site. here is the link https://ant.design/components/empty/

score:3

locale can be used. empty text can be given directly.

<table locale={{emptytext:"no data"}  datasource={datasource} columns={columns} />

score:14

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

score:19

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


Related Query

More Query from same tag