Давайте посмотрим, как мы можем начать пользоваться библиотекой vue3-ease-data-table. Начнем мы с вопросов установки. В разделе "Get started" есть инструкция, как можно установить эту библиотеку для работы с таблицами в ваш проект.

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

Есть несколько способов, как это можно установить. 

Во-первых, это с помощью ES модулей, а второй способ - с помощью CDN. С помощью ES модулей мы можем установить ее с помощью пакетного менеджера npm или yarn.

Если вы разрабатываете проект без сборщика модулей, вы можете также с помощью CDN установить эту таблицу и начать работать с этой библиотекой. 

Это достаточно удобно, потому что позволяет нам, не разворачивать проект, а начать пользоваться всем и сразу.

Давайте рассмотрим способ с помощью ES модулей. 

npm install vue3-easy-data-table

Я перешел в папку со своим проектом. Он у меня находится в папке "assets/main". И вот, собственно говоря, мы устанавливаем нашу библиотеку vue3-easy-data-table. Собственно говоря, все, наша библиотека установилась. 

Теперь я могу открыть мой компонент. У меня есть компонент "Hello world", обычный пустой компонент, с которым мы сейчас будем работать.

Первым делом нужно открыть файл "main.js", и нам нужно зарегистрировать глобально файлы нашей библиотеки. Мы просто копируем это дело и вставляем его сюда. Давайте копируем вот эту часть. 

import Vue3EasyDataTable from 'vue3-easy-data-table';
import 'vue3-easy-data-table/dist/style.css';


const app = createApp(App);
app.component('EasyDataTable', Vue3EasyDataTable);

Теперь нам нужно добавить нашу таблицу внутрь нашего компонента.

То есть у нас будет заголовки (headers), названия столбцов, которые будут в нашей таблице. Здесь приведен способ, как это можно сделать для случая, если вы используете composition api в вашем компоненте. Я покажу сейчас, как это можно сделать на примере Option API проекта. 

см. видео, чтобы посмотреть пример вставки кода

По сути, мы не прописали ни одного тега, а наша таблица уже собралась. Причем, она у нас мобильная, оптимизированная. Она уже, как вы видите, перемещается по ней, и здесь показывается количество элементов по умолчанию. Да, какая-то постраничная навигация уже организована, которой мы можем пользоваться. Такая табличка у нас появилась.