This repository was archived by the owner on Feb 13, 2023. It is now read-only.
This repository was archived by the owner on Feb 13, 2023. It is now read-only.
Defining custom Grid layouts #1069
Description
Currently Grid is not supporting custom layouts. As a first step we would need to allow for defining custom layouts:
Add support for customLayouts prop for Grid component:
Example definition:
customLayouts() {
return [
{
key: 'KANBAN',
layout: {
component: Kanban,
},
activator: {
component: Activator,
dataCy: 'grid-kanban-view',
},
},
];
},
Which results with:
Where red rectangle is an activator and the KANBAN VIEW is a layout body.
The layout activator to active layout need to emit active event with KANBAN key:
methods: {
onActivate() {
this.$emit('active', KANBAN);
},
},
And it will consume selected prop.
The custom layout may have get the props which are coming from Grid component.
props: {
/**
* Context scope
*/
scope: {
type: String,
default: '',
},
/**
* List of columns presented at Grid
*/
columns: {
type: Array,
default: () => [],
},
/**
* List of rows presented at Grid
*/
rows: {
type: Array,
default: () => [],
},
/**
* List of row ids
*/
rowIds: {
type: Array,
default: () => [],
},
/**
* The drafts are unsaved changes, cached changed data at given time
*/
drafts: {
type: Object,
default: () => ({}),
},
/**
* The validation errors
*/
errors: {
type: Object,
default: () => ({}),
},
/**
* Selected filter values
*/
filters: {
type: Object,
default: () => ({}),
},
/**
* The disabled rows are defining which rows are not being able to interact with
*/
disabledRows: {
type: Object,
default: () => ({}),
},
/**
* Data model of pagination
*/
pagination: {
type: Object,
default: DEFAULT_GRID_PAGINATION,
},
/**
* Determines the row height
*/
rowHeight: {
type: Number,
default: ROW_HEIGHT.SMALL,
},
/**
* The map of selected rows
*/
selectedRows: {
type: Object,
default: () => ({}),
},
/**
* The map of rows excluded from selection
*/
excludedFromSelectionRows: {
type: Object,
default: () => ({}),
},
/**
* Determines if the component is multiple choice
*/
multiselect: {
type: Boolean,
default: true,
},
/**
* Determines if data is loaded asynchronously
*/
isPrefetchingData: {
type: Boolean,
default: false,
},
/**
* Determines if layout is resolved
*/
isLayoutResolved: {
type: Boolean,
default: false,
},
/**
* Determinate if the component is being able to edit
*/
isEditable: {
type: Boolean,
default: false,
},
/**
* Determines if selecting row column is visible
*/
isSelectColumn: {
type: Boolean,
default: false,
},
/**
* Determines if filters are visible
*/
isBasicFilter: {
type: Boolean,
default: false,
},
/**
* Determines if every row should be selected
*/
isSelectedAll: {
type: Boolean,
default: false,
},
/**
* Determinate if action column is visible
*/
isActionColumn: {
type: Boolean,
default: true,
},
/**
* The data model of sorted column
*/
sortOrder: {
type: Object,
default: () => ({}),
},
/**
* The data model of extended table layout components
*/
extendedComponents: {
type: Object,
default: () => ({}),
},
},
As well as the Grid component is listening for events:
@sort-column="onSortColumn"
@filter="onFilterChange"
@cell-value="onCellValueChange"
@focus-cell="onFocusCell"
@row-action="onRowAction"
@remove-column="onRemoveColumn"
@swap-columns="onSwapColumns"
@rows-select="onRowsSelect"
@excluded-rows-select="onExcludedRowsSelect"
@select-all="onSelectAllRows"
@resolved="onResolvedLayout"
Important!!!
Custom layout may have all logic defined within it selfs, no need for subscribing to any events and props. In the future we may define the default interface* for layouts.
- Grid layout should be added to query params as
layout=TABLE - Currently Grid columns order is saved into cookies per user with key:
[USER_ID]GRID_CONFIG:column1,column2,columnX, we need to extend this config with[USER_ID]GRID_CONFIG:LAYOUT/column1,column2,columnXwhere LAYOUT = TABLE, etc.
There will be defined new method: gridCookies injected directly to the app with followed methods:
set(layout = GRID_LAYOUT.TABLE, value)get(layout = GRID_LAYOUT.TABLE)remove(layout = GRID_LAYOUT.TABLE)insertAtIndex(layout = GRID_LAYOUT.TABLE, index, value)removeAtIndex(layout = GRID_LAYOUT.TABLE, index)changePosition(layout = GRID_LAYOUT.TABLE, from, to)
BREAKING CHANGES
getGridDataandpostGridDatawill not acceptrouteargument - no need to pass it. The plugin under the hood is generating cookie key automatically