Как быстро создать таблицу для Dynamics в React с Fluent UI

Fluent UI — это мощная библиотека компонентов от Microsoft, которая позволяет быстро и качественно создавать интерфейсы. В этой статье мы на практическом примере покажем, как с помощью Fluent UI реализовать веб-интерфейс с таблицей и фильтрами, используя React. Пошагово разберём структуру проекта, установку и подключение библиотеки, разработку компонентов и финальное тестирование.

А узнать больше про создание таблицы в Fluent UI можно в нашем видео:

Подготовка проекта

Для начала был подготовлен пустой React-проект. После инициализации автоматически создаются базовые файлы App.jsx и main.jsx. Далее создаём структуру проекта:

• Папка components, в которой будут храниться компоненты.

• Внутри неё создаём две подпапки: dataGridView и filterPanelView.

• В каждой папке создаём JSX-файл с тем же названием, где будут реализованы соответствующие компоненты.

Инсталлирование библиотеки

Далее устанавливаем Fluent UI. Переходим в документацию, раздел Quick Start, и копируем команду установки:

npm install @fluentui/react-components

Также устанавливаем иконки, которые нужны отдельно:

npm install @fluentui/react-icons

После завершения установки все компоненты и иконки становятся доступны в проекте.

Подключение библиотеки

Теперь необходимо правильно подключить библиотеку в приложение. Ключевой компонент — это FluentProvider, он задаёт контекст темы, стилей и других параметров.

В файле main.jsx оборачиваем компонент <App /> в <FluentProvider> и передаём тему. Мы используем стандартную webLightTheme:

 <FluentProvider theme={webLightTheme}>

  <App />

</FluentProvider>

Теперь все дочерние компоненты получат доступ к теме и стилизации Fluent UI.

Разработка основного компонента

В компоненте dataGridView создаётся таблица с использованием компонента DataGrid. Код копируется из документации и адаптируется под проект. Также импортируются иконки и другие вспомогательные компоненты из Fluent UI.

Компонент экспортируется по умолчанию:

export default function DataGridView({ size, sortable }) {
}

Панель фильтров

В filterPanelView реализуется панель фильтров с использованием компонента Toolbar. Панель содержит:

• Меню для выбора размера шрифта (extra small, small, medium);

• Кнопку для включения/отключения сортировки по колонкам.

Кнопки взаимодействуют с состоянием через пропсы setSize и setSortable.

Для иконок и кнопок используются компоненты ToolbarButton, Menu, MenuTrigger, ToolbarDivider и другие. Вся логика построена на простых onClick-обработчиках.

Подключение в App.jsx

Теперь всё готово для подключения компонентов в App.jsx. Создаётся useState для хранения:

• выбранного размера шрифта (size);

• флага сортировки (sortable).

Создаём простой контейнер div, куда помещаем FilterPanelView и DataGridView, и применяем стили через useStyles с display: flex, flexDirection: column, и отступами.

В итоге:

<FilterPanelView setSize={setSize} setSortable={setSortable} /><DataGridView size={size} sortable={sortable} />

Все параметры передаются корректно, и компоненты рендерятся один под другим.

Тестирование работоспособности

После запуска проекта через npm run dev, проверяем работу таблицы:

• Таблица отображается корректно, включая аватары и иконки.

• Меню фильтров позволяет менять размер шрифта. При выборе "Extra Small", шрифт уменьшается, при "Medium" — увеличивается.

• Кнопка сортировки работает: сначала сортировка отключена, затем включается по нажатию.

Все компоненты работают стабильно, и библиотека Fluent UI действительно упрощает и ускоряет процесс разработки. Также можно легко заменить данные в таблице на полученные из API или CRM — структура компонентов останется той же, потребуется лишь заменить источник данных.

Заключение

Fluent UI — отличное решение для быстрой реализации современного интерфейса с таблицами, фильтрами и стилизованными элементами. Компоненты гибкие, кастомизируемые и уже адаптированы под типичный корпоративный дизайн. Даже базовая реализация с демонстрационными данными показывает, насколько просто можно получить качественный результат с минимумом усилий.