Как сделать навигацию для таблицы в виде кнопок?

Question

[Андрей Белый]

Добрый день!
Сейчас имеется такая таблица:


Необходимо добавить кнопки навигации, и работать они должны так: при нажатии на кнопку пролистывание должно быть ровно до следующей колонки:


Как реализовать?

Answer 1

[Арсений Матыцин]

Как по мне, самый безболезненный в плане верстки и расчетов способ: взять либу типа Vue и крутить массив со значениями + transition-group (для появления\исчезновения td-шек), либо то же самое, но на ванилке накатать (ни один фреймворк не может больше того, что умеет сам JS, просто там уже накатаны те подходы и методы, которые ты не захочешь реализовать сам).

При таком подходе не придется считать размеры относительно друг-друга, хотя при очень разном контенте таблица будет прыгать по высоте. Впрочем, она в любом случае будет прыгать. Можно смягчить чем-то в духе свойства css transition: all .5s.

Comments

[Андрей Белый]

Можно поподробнее, что на Vue мне необходимо конкретнее использовать? Может пример какой есть?

[Арсений Матыцин]

Андрей Белый, в зависимости от того, как ты выводишь данные, тебе надо либо взять массивы данных, либо DOM-элементы и выводить их с помощью фильтрации от n до n+количество видимых элементов. Кнопками вправо\влево этот диапазон смещать. Тебе еще потребуется сделать проверки на то, чтобы не выйти за рамки строк, ну или сделать правильный бесконечный слайдер.

Да, по сути это усложненный слайдер. А анимация появления и исчезновения это transition\transition-group. При фильтрации массивов на Vue при привязке анимации она срабатывает сама (ну как сама, просто ты лично для этого дополнительно ничего не делаешь).