Package Exports
- vuetify-hasura-table
- vuetify-hasura-table/src/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vuetify-hasura-table) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
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мс.