Где можно посмотреть рабочее демо vue-tables-2?

Question

[Владислав]

Добрый день, уважаемые знатоки. Вопрос следующего свойства: мигрируем с Angular 1.6 на Vue 2. Так как приложение имеет статистическую направленность, а данные отображаются в таблице (на данном этапе используем ng-table), то очевидно, что центральный компонент приложения - таблицы. ng-table поддерживает следующие жизненноважные для целевого приложения возможности:
1) построение таблицы на основе json как с серверной пагинацией, так и пагинацией на клиенте
2) группировка строк по определенному свойству c возмоностью сворачивать и разворачивать группы
3) сортировка
4) фильтрация (возможность фильтрации как на клиенте, так и на сервере)
5) поддержка кастомных шаблонов для ячеек в таблице, которые отображают какие-то специфические свойства
6) поиск максимального и минимального значений в колонках и его визуальное выделение
7) возможность выставить счетчик perPage

Проанализировав эти входные свойства, нашел два подходящих варианта для реализации (чтобы не писать свой велосипед):
1) https://github.com/matfish2/vue-tables-2 (даже возможность группировки нашел через кастомные шаблоны https://github.com/mosinve/vue-tables-grouping, отдельное спасибо автору)
2) https://github.com/ratiw/vue-table

Оба в принципе удовлетворяют заявленным требованиям, на одном из них даже есть туториал. Мой вопрос в следующем: поделитесь своими впечатлениями от использования данных туллзов: какие недостатки, какие преимущества, может есть какой-то опыт продвинутой кастомизации для специфических решений. В общем и целом интересует любая информация и опыт работы с указанными компонентами.

З.Ы. Если есть опыт взаимодействия Ror + Vue 2, буду счастлив пообщатьтся и задать пару вопросов лично. Спасибо заранее всем, кто откликнулся.

Answer 1

[igortelmenko]

Второй компонент ratiw/vuetable (что с туториалом) существует в отдельном репозитории под вторую версию Vue https://github.com/ratiw/vuetable-2

Я, к сожалению, пока ТОЛЬКО этот самый второй компонент и пробовал. Весьма неплохой, на мой взгляд. Пока немного поигрался с ним в связке с Laravel. Думаю, что с RoR будет ну то же самое. На серверной стороне заюзать пагинатор и т.д.

Делается ratiw/vuetable-2, вроде бы, толковым парнем. Чувствуется, что человек старается сделать все правильно и хорошо. Разбивает на отдельные компоненты и файлы там, где это надо.

Из минусов ratiw/vuetable-2 пока выделил все же некоторую недопиленность. Не хватает свойств для установки ширины столбцов, как в jquery datatables или jqgrid. Из-за этого длинный текст делает колонки многострочными. Быть может автор предполагал возложить эту задачу на плечи css. Но обычно в табличных компонентах есть для этого специальные свойтсва.

В ratiw/vuetable-2 нет из коробки готовых стилей Bootstrap. Пришлось искать пример автора на старую версию, брать оттуда и допиливать.

Некоторые свойства в ratiw/vuetable-2 хотелось бы иметь доступными по-умолчанию, а не писать их каждый раз вручную.

Но, в общем, я бы взял ratiw/vuetable-2 в продакшн.

Первый (matfish2/vue-tables-2), не пробовал. Вот какую демку нагуглил. Извиняюсь если баян.

UPD (2017-05-11): К вопросу о задании ширины столбцов вот автор (ratiw) дал ссылку как это сделать. Еще пока детально не смотрел. Но должно работать.

UPD2 (2017-05-18): Вчера совсем немного посмотрел matfish2/vue-tables-2 . Каких-то, прям, сильных отличий между этими двумя компонентами не нашел. По функциям не могу пока выделить какого-либо лидера.
Ну, у matfish2/vue-tables-2 есть встроеная возможность добавить строку с фильтрами под заголовок таблицы. Но у меня сомнения, что это кому-то нужно в таком виде. Хотя возможно.
Но matfish2/vue-tables-2 как я понял заточен под Twitter Bootstrap, в то время как ratiw/vuetable-2 не привязан к стилям.
У matfish2/vue-tables-2 пагинация встроеная, а у ratiw/vuetable-2 - отдельным компонентом (можно располагать сверху или снизу).

Comments

[Владислав]

igortelmenko спасибо, за ответ, по поводу демки - натыкался на нее, но она для первой версии vue, нашел для вторую, но там отвалился cdn второй версии vue.

[igortelmenko]

А можно ссылку на демку с поддержкой второй версии Vue?

[Владислав]

jsfiddle.net/CristiJ/z11fe07p/1318

[igortelmenko]

Владислав: Это, похоже, демка пакета от ratiw. А я скидывал (ссылка на jsfiddle) демку пакета от matfish2. К сожалению названия пакетов похожи. Их только по авторам и различать.

[Владислав]

igortelmenko: наверное я вас не так понял. эта демка по второй версии того, что вы используете

[Владислав]

igortelmenko: решил все-таки остановиться на vue-tables-2 от mattfish. Вот такую группировку реализовал. Пример сыроват, но на проде вместе с серверной таблицей все замечательно получилось.

[Владислав]

igortelmenko, кстати говоря по поводу заточенности под Bootstrap, в последних версиях появилась возможность использовать и другие фреймворки, что не может не радовать)

Answer 2

[Владислав]

jsfiddle.net/CristiJ/z11fe07p/1318
вот демка vuetable-2

Comments

[matfish2]

And here is a demo of vue-tables-2:
https://jsfiddle.net/matfish2/jfa5t4sm/

Answer 3

[Евгений Гридасов]

https://github.com/ratiw/vuetable-sample-api-endpoint