CODEWITHSUNDEEP
reactjsantd
Федор Усаков
Федор Усаков

Reputation: 1255

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

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.

Current default behavior on empty data property

How this may be done?

Upvotes: 27

Views: 33201

Answers (7)

Taha Daboussi
Taha Daboussi

Reputation: 149

<Table
    className='myTasksTable'
    columns={TaskColumns}
    dataSource={myTasks}
    pagination={false}
    rowSelection={{
        type: selectionType,
        ...rowSelection,
    }}
    scroll={{ y: tableHeight }}
    locale={{
        emptyText: (
            <Empty
                image={Empty.PRESENTED_IMAGE_SIMPLE}
                description="No Tasks Available"
            />
        ),
    }}
/>

Something like this solution will change the description but while keeping the old icon so you don't have to put one from you own , or you like you can change it

Upvotes: 0

Ved
Ved

Reputation: 1028

Check the following example, which uses <Result/> component of antd

App.jsx

import React from "react";
import "./index.css";
import { Button, Table, Result } from "antd";

const App = () => {
  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name"
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age"
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address"
    },
    {
      title: "Tags",
      key: "tags"
    }
  ];

  const data = [];

  let locale = {
    emptyText: (
      <Result
        title="No data"
        subTitle="No users have been created yet, Click on add button to create a new user"
        extra={[
          <Button type="primary">Add user</Button>,
          <Button>Cancel</Button>
        ]}
      />
    )
  };

  return (
    <>
      <Table locale={locale} columns={columns} dataSource={data} />
    </>
  );
};

export default App;

Output: output

Upvotes: 0

Gucal
Gucal

Reputation: 923

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

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

Upvotes: 4

Abdul Malik
Abdul Malik

Reputation: 559

It is well explained on ant design site. Here is the link https://ant.design/components/empty/

Upvotes: 1

Nikhil Mahirrao
Nikhil Mahirrao

Reputation: 3711

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

Upvotes: 19

Alex Ruzzarin
Alex Ruzzarin

Reputation: 311

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

Upvotes: 31

Mayank Shukla
Mayank Shukla

Reputation: 104379

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/

Upvotes: 42

Related Questions