EmptyDataState

Options

emptyDataState

emptyDataState.emptyDataState : boolean | object

The emptyDataState option configures the EmptyDataState plugin.

You can set the emptyDataState option to one of the following:

Setting	Description
`false`	Disable the `EmptyDataState` plugin
`true`	Enable the `EmptyDataState` plugin
An object	Enable the `EmptyDataState` plugin with custom settings

If you set the emptyDataState option to an object, you can configure the following settings:

Property	Possible values	Description
`message`	`string` \| `object` \| `function`	Message to display in the empty data state overlay.

If you set the message option to an object, it have following properties:

Property	Possible values	Description
`title`	`string`	Title to display in the empty data state overlay.
`description`	`string`	Description to display in the empty data state overlay.
`buttons`	`array`	Buttons to display in the empty data state overlay.
`loading`	`boolean`	When `true`, shows a loading spinner (used for server fetch state).

If you set the message option to a function, the source argument can be "unknown", "filters", or "loading". With [[Options#dataProvider]], the "loading" branch follows DataProvider fetch hooks (beforeDataProviderFetch, afterDataProviderFetch, and related hooks) using the same rules as server-backed loading in the DataProvider plugin. Internal refetches (for example after column sort or CRUD) set skipLoading on [[Hooks#beforeDataProviderFetch]] so the EmptyDataState plugin can omit the loading overlay for those requests.

If you set the buttons option to an array, each item requires following properties:

Property	Possible values	Description
`text`	`string`	Text to display in the button.
`type`	’primary’ \| ‘secondary’	Type of the button.
`callback`	`function`	Callback function to call when the button is clicked.

This option can only be set at the grid level. It has no effect when set in the columns, cells, or cell options.

Default: false
Since: 16.2.0
Example

1
// Enable empty data state plugin with default messages
2
emptyDataState: true,
3

4
// Enable empty data state plugin with custom message
5
emptyDataState: {
6
  message: 'No data available',
7
},
8

9
// Enable empty data state plugin with custom message and buttons for any source
10
emptyDataState: {
11
  message: {
12
    title: 'No data available',
13
    description: 'There’s nothing to display yet.',
14
    buttons: [{ text: 'Reset filters', type: 'secondary', callback: () => {} }],
15
  },
16
},
17

18
// Enable empty data state plugin with custom message and buttons for specific source
19
emptyDataState: {
20
  message: (source) => {
21
    switch (source) {
22
      case "filters":
23
        return {
24
          title: 'No data available',
25
          description: 'There’s nothing to display yet.',
26
          buttons: [{ text: 'Reset filters', type: 'secondary', callback: () => {} }],
27
        };
28
      case "loading":
29
        return {
30
          title: 'Loading data',
31
          description: 'Please wait.',
32
        };
33
      default:
34
        return {
35
          title: 'No data available',
36
          description: 'There’s nothing to display yet.',
37
        };
38
    }
39
  },
40
},