vuetify-hasura-table

Плюсы

• Принимает все те же пропсы/слоты, что и обычная VDataTable
• Интегрирует таблицу с движком Hasura
• Из коробки поддерживает серверную сортировку, пагинацию, фильтрацию и поиск
• По желанию добавляет столбец для удаления строки (с кастомизируемым способом удаления)
• Используя систему плагинов, можно интегрировать ее с другой таблицей (например, с vuetify-schema-table)
• Текст всех сообщений (к примеру в модалке с подтвеждением удаления) может локализироваться (по умолчанию стоит английский язык). Пример локализации можно посмотреть в файле ~/plugins/vuetifyLocalization.js
• Поддерживает возможность получения связанной сущности и сортировку по ней. Для этого нужно использовать специальный синтаксиси и в поле "value" передать путь к детям. Текст, который нужно показать в столбце, выделяется с помощью знака *: { assistant { *name* } } или {autos_aggregate: {nodes: {count}}} -- выведет в стобце количество автомобилей у водителя
• При первом отобжении передает таблице-ребенку skeletonLoading = true, тем самым (по надобности) включает режим скелетон-загрузки

Минусы

• Модалку с подтверждением удаления пока нельзя кастомизировать
• Фильтры и поисковую строку необходимо делать вручную. Эта либа принимает только пропсы, но внешний вид нужно делать ручками

Props

• fields -- массив полей, который будет передаваться, во-первых, дальше таблицу-ребенку, а во-вторых, информация из этого массива используется для интеграции с Хасурой. Пример значения: fields: [ { text: 'Начало аренды', value: 'rentStartDate', type: 'datetime', timezone: 3 }, { text: 'Конец аренды', value: 'rentEndDate', type: 'datetime', timezone: 3 }, { text: 'Адрес', value: 'deliveryAddress' }, { text: 'Клиент', value: 'client { *name* }' }, { text: 'Ассистент', value: 'assistant { *name* }' } ]
• source -- название таблицы в Hasura
• defaultSelections -- массив селекторов, которые получаются с сервера всегда. По умолчанию, это поле 'id'
• sortMapper -- функция, которая используется для определения порядка сортировки
• noDelete -- булевый флаг, если нам не нужна возможность удаления строк
• deleteParams -- параметры, определяющие как строка будет удаляться: idType -- тип поля с id (uuid! по умолчанию), customMutation -- функция для переопределения мутации удаления
• filters -- объект с фильтрами, которые будут слаться при интеграции. Например, эта computed-функция позволит отображать строки только за выбранный день: computed: { filters () { const date = moment(this.date, 'YYYY-MM-DD').toDate() return { _and: [ { rentStartDate: { _gt: moment(date).utc().add(-3, 'hours').toISOString() } }, { rentStartDate: { _lt: moment(date).utc().add(1, 'day').add(-3, 'hours').toISOString() } } ] } } }
• search -- строки с поиском (если нужно включить поиск).
• searchFilter -- функция, используемая для поиска. Обязательный параметр, когда нужен поиск. Принимает на вход search, на выходе выдает объект с фильтром
• searchDelay -- debounce задержка при поиске, чтобы слишком часто не слать запросы. По умолчанию -- 200мс.