vuetify-hasura-table
v0.0.43
Published
- Принимает все те же пропсы/слоты, что и обычная VDataTable - Интегрирует таблицу с движком Hasura - Из коробки поддерживает серверную сортировку, пагинацию, фильтрацию и поиск - По желанию добавляет столбец для удаления строки (с кастомизируемым способо
Downloads
19
Maintainers
Readme
Плюсы
- Принимает все те же пропсы/слоты, что и обычная 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мс.