Empty

Компонент Empty в библиотеке Ant Design используется для отображения состояния, когда нет данных для отображения в списках, таблицах, картах или других контейнерах. Он служит визуальным индикатором пустого состояния и помогает пользователю понять, что контент отсутствует, вместо того чтобы показывать пустое пространство.

Основные возможности

  • Настраиваемый образ и текст – можно изменять изображение, заголовок и описание.
  • Поддержка действий – добавление кнопок или ссылок для навигации или создания новых данных.
  • Поддержка различных размеров – small, default, large.
  • Интеграция с темами – компонент корректно адаптируется под светлую и темную темы Ant Design.

Импорт и базовое использование

import { Empty } from 'antd';

const App = () => <Empty />;

По умолчанию компонент отображает стандартное изображение и текст “No Data”.

Настройка заголовка и описания

<Empty 
  description="Данные отсутствуют"
/>

<Empty
  description={
    <span>
      Здесь пока нет информации
    </span>
  }
/>
  • description может быть строкой или React-элементом.
  • Позволяет полностью кастомизировать текстовое содержимое.

Кастомизация изображения

<Empty
  image="https://example.com/custom-image.png"
  description="Нет записей"
/>
  • image может быть URL, React-элементом или предопределённой константой Empty.PRESENTED_IMAGE_SIMPLE.
  • Простая версия:
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="Нет данных" />

Добавление действий

Компонент поддерживает область для кнопок или ссылок, которые помогают пользователю взаимодействовать с пустым состоянием.

<Empty
  description="Список пуст"
  children={
    <Button type="primary">Создать запись</Button>
  }
/>
  • children – React-элемент, который отображается под изображением и описанием.
  • Обычно используется для кнопок или ссылок на создание данных.

Размеры Empty

Компонент поддерживает три размера, которые задаются через проп size:

  • small – компактный вид, подходит для встроенных пустых состояний.
  • default – стандартный вид.
  • large – крупный вид для центральных страниц или модальных окон.
<Empty size="small" description="Малый размер" />
<Empty size="large" description="Большой размер" />

Empty в таблицах и списках

Часто используется вместе с компонентами Table, List, Card:

import { Table } from 'antd';

const columns = [
  { title: 'Имя', dataIndex: 'name', key: 'name' },
  { title: 'Возраст', dataIndex: 'age', key: 'age' },
];

const data = [];

<Table
  columns={columns}
  dataSource={data}
  locale={{ emptyText: <Empty description="Нет данных в таблице" /> }}
/>
  • Через locale.emptyText можно заменить стандартный текст отсутствия данных на компонент Empty.
  • Аналогично работает для List:
import { List } from 'antd';

<List
  dataSource={[]}
  renderItem={item => <List.Item>{item}</List.Item>}
  locale={{ emptyText: <Empty description="Список пуст" /> }}
/>

Пользовательская интеграция с темами

Ant Design поддерживает динамическую смену темы, и компонент Empty корректно меняет стиль под светлую и темную темы. Для упрощенной версии с минималистичным изображением используется Empty.PRESENTED_IMAGE_SIMPLE:

<Empty 
  image={Empty.PRESENTED_IMAGE_SIMPLE} 
  description="Пусто" 
/>

Полная кастомизация через стили

Для расширенной настройки можно использовать класс ant-empty:

.ant-empty {
  background-color: #f0f2f5;
  border-radius: 8px;
  padding: 40px;
}

.ant-empty-description {
  color: #8c8c8c;
  font-size: 16px;
}

Также возможно передавать стили напрямую через style:

<Empty 
  style={{ backgroundColor: '#fafafa', padding: '50px' }} 
  description="Нет данных"
/>

Адаптация под мобильные устройства

Компонент Empty автоматически масштабируется в зависимости от контейнера, но при необходимости можно дополнительно использовать медиазапросы для изменения размера изображения и текста:

@media (max-width: 576px) {
  .ant-empty-description {
    font-size: 14px;
  }
  .ant-empty-img {
    width: 80px;
    height: 80px;
  }
}

События и динамическое управление

Хотя Empty не имеет собственных событий, можно динамически управлять его отображением через условный рендеринг:

const [data, setData] = useState([]);

return (
  <>
    {data.length === 0 ? (
      <Empty description="Данные отсутствуют" />
    ) : (
      <List dataSource={data} renderItem={item => <List.Item>{item}</List.Item>} />
    )}
  </>
);
  • Позволяет показывать Empty только когда данных действительно нет.
  • Можно сочетать с загрузкой (Spin) для отображения состояния загрузки перед пустым состоянием.

Итоговые рекомендации по использованию

  • Использовать Empty для визуализации отсутствия данных вместо простого текста.
  • Подбирать размер и изображение в зависимости от контекста.
  • Добавлять действия для улучшения UX.
  • Поддерживать адаптивность и темы интерфейса.

Empty — универсальный компонент, который делает интерфейс более понятным и информативным, предотвращая ощущение “пустоты” при отсутствии данных.

Оглавление