CODEWITHSUNDEEP
reactjsantd
Ayushi
Ayushi

Reputation: 31

Is it possible to hide the header of an empty table in Ant Design?

This is my table Table with no data

My table has a default filtering on a column.

const columns = [
...other_columns,
    {
      title: 'Requester',
      dataIndex: 'requester',
      key: 'requester',
      width: '10%',
      defaultFilteredValue: 'User1',
      ...getColumnSearchProps('requester', searchInput, handleSearch, handleReset, filterObj),
    },
]

When the table is empty i want to show the user another layout instead of the table. I tried using locale prop that the table provides but i want to hide the header and create something like this. Does antd provide a prop for that? Or is there any hack available to achieve this? No table when no data

Upvotes: 0

Views: 9113

Answers (2)

Alen Šljivar
Alen Šljivar

Reputation: 344

It is up to you if you don't want to show the table component when there is no data. If I got you right you want to hide the whole table if there is no data. In that case, you can create a parent component that will manage which component to show. Something like this

const SomeParentComponent = (data) => {
  return data.length ? <Table columns={data} ... /> : <YourCustomComponent ... />
}

Upvotes: 0

Hans Murangaza DRCongo
Hans Murangaza DRCongo

Reputation: 860

Use the showHeader prop on Table

showHeader={empty ? false : true}

Upvotes: 6

Related Questions