Библиотека для создания таблиц на Vue 3. vue3-easy-data-table

Проблема работы с табличными данными на Vue.js

Очень часто, когда мы с вами разрабатываем какие-то проекты на фреймворке Vue.js, нам приходится иметь дело с таблицами, какими-то табличными данными.

Конечно, мы можем создавать таблицы с помощью стандартных средств HTML, то есть писать <table>, <tr>, <td> и так далее. Но как правило, работа с таблицами сопряжена с рядом сложностей. Их достаточно сложно настраивать, особенно если количество данных, которые будут в таблице, достаточно большое, эти данные достаточно сложные. То есть нужна какая-то фильтрация данных, сортировка данных, поиск по данным, еще какие-то выделения, каких-то строк, удаление и так далее. То есть такие вот типовые задачи, которые часто приходится решать, они значительно усложняют нам работу, если мы используем какие-то стандартные средства для создания таблиц на фреймворке Vue.

Решение, которое может быть использовано.

Я же хочу вам показать одну библиотеку, которая может значительно упростить вам жизнь при работе с таблицами. Эта библиотека называется vue3-easy-data-table. Благодаря этой библиотеке мы можем создавать таблицы, которые будут соответственно отображаться в зависимости от тех данных, которые мы передадим на вход. То есть данные хранятся отдельно, таблица хранится отдельно.

Вот такой вот компонент. Конечно, не все задачи можно решать с помощью этой библиотеки, но большинство таких вот часто распространенных задач мы с вами рассмотрим, как можно решать с помощью этой библиотеки. 

Где найти эту библиотеку?

На этом слайде вы можете соответственно видеть официальный сайт библиотеки, можете перейти по этой ссылке, посмотреть подробнее. 

https://hc200ok.github.io/vue3-easy-data-table-doc/

Что же это за плагин? Что же это за библиотека? Работает она с версией 3 фреймворка Vue js и, соответственно, поддерживается в большинстве браузеров. То есть даже на старом Internet Explorer 11 это должно работать. Вот такая вот, собственно говоря, библиотека. И давайте в следующем видео посмотрим, как мы ее можем установить наш проект и начать ей пользоваться.