Приложение реализует функциональную таблицу данных с возможностями сортировки, фильтрации, пагинации и управления колонками. Таблица имеет адаптивный дизайн и оптимизирована для работы на различных устройствах.
- Сортировка: Возможность сортировать данные по любой колонке (клик по заголовку колонки). Сортировка работает как по возрастанию, так и по убыванию.
- Фильтрация: Поиск по всем полям или по конкретному выбранному полю с мгновенным отображением результатов.
- Пагинация: Разбивка данных на страницы с возможностью выбора количества записей на странице (5, 10, 25, 50, 100).
- Управление колонками: Пользователь может скрывать/показывать отдельные колонки таблицы через контекстное меню.
- Адаптивность: Автоматическая адаптация интерфейса под размер экрана (десктоп, планшет, мобильный).
- Индикация загрузки: Отображение процесса загрузки данных с имитацией сетевого запроса.
- Angular: Фреймворк для разработки одностраничных приложений (SPA).
- Angular Material: Библиотека компонентов для Angular, реализующая принципы Material Design.
- RxJS: Библиотека для реактивного программирования, используется для обработки асинхронных операций.
- TypeScript: Язык программирования, расширяющий возможности JavaScript.
- models/ - Интерфейсы и типы данных
- services/ - Сервисы для работы с данными
- components/ - Компоненты приложения
- data-table/ - Основной компонент таблицы
- Node.js и npm
- Angular CLI
- Клонировать репозиторий
git clone [URL репозитория]
cd data-table-app- Установить зависимости
npm install- Запустить приложение
ng serve- Открыть приложение в браузере:
http://localhost:4200
- Приложение использует Standalone Components из Angular.
- Данные загружаются асинхронно с имитацией задержки сети (от 0.5 до 1.5 секунд).
- Для мобильных устройств автоматически скрываются некоторые колонки, чтобы улучшить пользовательский опыт.
- Интерфейс автоматически адаптируется к различным размерам экрана.