Описание Тестовое задание реализует таблицу с двумя вкладками:

-Последние игры -История

Данные берутся из локального JSON-файла(данные удвоены для работы со скролом). Таблица использует CSS Grid для выравнивания колонок и фиксированную шапку с position: sticky.

Особенности и сложности Для удобства просмотра данных таблица имеет вертикальный скролл в теле таблицы с фиксированной высотой.

Сложность: Из-за вертикального скролла справа, который занимает некоторое пространство, содержимое таблицы и шапка могли смещаться относительно друг друга. Чтобы решить эту проблему, в стили шапки был добавлен отступ padding, равный ширине скроллбара (6px), для выравнивания колонок с содержимым.

Добавление скролла внутри таблицы влияет на ширину и требует тонкой настройки отступов, что является распространённой проблемой при создании таблиц с фиксированной шапкой.

Архитектура и структура Компонент выполнен как один файл Vue SFC без разбивки на подкомпоненты. Для тестового задания и упрощения поддержки было решено не дробить компонент, так как логика и структура таблицы достаточно компактны и читаемы.