Grid
- Usage
- Columns
- Renderers
- Styling
- Drag and Drop
- Inline Editing
Grid supports drag-and-drop actions. This feature might be used, for example, to reorder rows and to drag rows between grids.
Drop Mode
The drop mode of a grid determines where a drop can happen. Vaadin offers four different drop modes, which are described in the table here:
Drop Mode | Description |
---|---|
Drops can occur on the grid as a whole, not on top of rows or between individual rows. Use this mode when the order isn’t important. | |
Drops can happen between rows. Use this mode when the order is important. | |
Drops can take place on top of rows. This is useful when creating relationships between items or moving an item into another item, such as placing a file inside a folder. | |
On Top or Between | Drops can occur on top of rows or between them. |
Row Reordering
You can drag rows to reorder them. This can be a useful and impressive feature for users. Try dragging with your mouse one of the rows of data in the example here to another place in the list.
new tab
@customElement('grid-row-reordering')
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
@state()
private items: Person[] = [];
@state()
private draggedItem: Person | undefined;
protected override async firstUpdated() {
const { people } = await getPeople();
this.items = people;
}
protected override render() {
return html`
<vaadin-grid
.items="${this.items}"
rows-draggable
.dropMode=${this.draggedItem ? 'between' : undefined}
@grid-dragstart="${(event: GridDragStartEvent<Person>) => {
this.draggedItem = event.detail.draggedItems[0];
}}"
@grid-dragend="${() => {
this.draggedItem = undefined;
}}"
@grid-drop="${(event: GridDropEvent<Person>) => {
const { dropTargetItem, dropLocation } = event.detail;
// Only act when dropping on another item
if (this.draggedItem && dropTargetItem !== this.draggedItem) {
// Remove the item from its previous position
const draggedItemIndex = this.items.indexOf(this.draggedItem);
this.items.splice(draggedItemIndex, 1);
// Re-insert the item at its new position
const dropIndex =
this.items.indexOf(dropTargetItem) + (dropLocation === 'below' ? 1 : 0);
this.items.splice(dropIndex, 0, this.draggedItem);
// Re-assign the array to refresh the grid
this.items = [...this.items];
}
}}"
>
<vaadin-grid-column
header="Image"
flex-grow="0"
auto-width
${columnBodyRenderer(this.avatarRenderer, [])}
></vaadin-grid-column>
<vaadin-grid-column path="firstName"></vaadin-grid-column>
<vaadin-grid-column path="lastName"></vaadin-grid-column>
<vaadin-grid-column path="email"></vaadin-grid-column>
</vaadin-grid>
`;
}
private avatarRenderer: GridColumnBodyLitRenderer<Person> = (person) => html`
<vaadin-avatar
img="${person.pictureUrl}"
name="${person.firstName} ${person.lastName}"
></vaadin-avatar>
`;
}
Drag Rows between Grids
Rows can be dragged from one grid to another. You might use this feature to move, copy or link items from different datasets.
In the example here, there are two grids of data. Maybe they represent people to speak at two different presentations at the same conference. One grid lists the first panel of speakers and the other the second panel. Try dragging people from one to the other, as if you were reassigning them to speak at a different panel.
new tab
@state()
private draggedItem: Person | undefined;
@state()
private grid1Items: Person[] = [];
@state()
private grid2Items: Person[] = [];
protected override async firstUpdated() {
const { people } = await getPeople({ count: 10 });
this.grid1Items = people.slice(0, 5);
this.grid2Items = people.slice(5);
}
private startDraggingItem = (event: GridDragStartEvent<Person>) => {
this.draggedItem = event.detail.draggedItems[0];
};
private clearDraggedItem = () => {
this.draggedItem = undefined;
};
protected override render() {
return html`
<div class="grids-container">
<vaadin-grid
.items="${this.grid1Items}"
rows-draggable
.dropMode=${this.draggedItem ? 'on-grid' : undefined}
@grid-dragstart="${this.startDraggingItem}"
@grid-dragend="${this.clearDraggedItem}"
@grid-drop="${() => {
const draggedPerson = this.draggedItem!;
const draggedItemIndex = this.grid2Items.indexOf(draggedPerson);
if (draggedItemIndex >= 0) {
// Remove the item from its previous position
this.grid2Items.splice(draggedItemIndex, 1);
// Re-assign the array to refresh the grid
this.grid2Items = [...this.grid2Items];
// Re-assign the array to refresh the grid
this.grid1Items = [...this.grid1Items, draggedPerson];
}
}}"
>
<vaadin-grid-column
header="Full name"
${columnBodyRenderer<Person>(
(person) => html`${person.firstName} ${person.lastName}`,
[]
)}
></vaadin-grid-column>
<vaadin-grid-column path="profession"></vaadin-grid-column>
</vaadin-grid>
<vaadin-grid
.items="${this.grid2Items}"
rows-draggable
.dropMode=${this.draggedItem ? 'on-grid' : undefined}
@grid-dragstart="${this.startDraggingItem}"
@grid-dragend="${this.clearDraggedItem}"
@grid-drop="${() => {
const draggedPerson = this.draggedItem!;
const draggedItemIndex = this.grid1Items.indexOf(draggedPerson);
if (draggedItemIndex >= 0) {
// Remove the item from its previous position
this.grid1Items.splice(draggedItemIndex, 1);
// Re-assign the array to refresh the grid
this.grid1Items = [...this.grid1Items];
// Re-assign the array to refresh the grid
this.grid2Items = [...this.grid2Items, draggedPerson];
}
}}"
>
<vaadin-grid-column
header="Full name"
${columnBodyRenderer<Person>(
(person) => html`${person.firstName} ${person.lastName}`,
[]
)}
></vaadin-grid-column>
<vaadin-grid-column path="profession"></vaadin-grid-column>
</vaadin-grid>
</div>
`;
}
Drag & Drop Filters
Drag-and-drop filters determine which rows are draggable and which rows are valid drop targets. These filters function on a per-row basis.
new tab
@customElement('grid-drag-drop-filters')
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
@query('vaadin-grid')
private grid!: Grid<Person>;
@state()
private draggedItem: Person | undefined;
@state()
private items: Person[] = [];
@state()
private managers: Person[] = [];
@state()
private expandedItems: Person[] = [];
protected override async firstUpdated() {
const { people } = await getPeople();
this.items = people;
this.managers = this.items.filter((item) => item.manager);
// Avoid using this method
this.grid.clearCache();
}
private dataProvider = (
params: GridDataProviderParams<Person>,
callback: GridDataProviderCallback<Person>
) => {
const { page, pageSize, parentItem } = params;
const startIndex = page * pageSize;
const endIndex = startIndex + pageSize;
/*
We cannot change the underlying data in this demo so this dataProvider uses
a local field to fetch its values. This allows us to keep a reference to the
modified list instead of loading a new list every time the dataProvider gets
called. In a real application, you should always access your data source
here and avoid using grid.clearCache() whenever possible.
*/
const result = parentItem
? this.items.filter((item) => item.managerId === parentItem.id)
: this.managers.slice(startIndex, endIndex);
callback(result, result.length);
};
protected override render() {
return html`
<vaadin-grid
.dataProvider="${this.dataProvider}"
.itemIdPath="${'id'}"
.itemHasChildrenPath="${'manager'}"
.expandedItems="${this.expandedItems}"
@expanded-items-changed="${(event: GridExpandedItemsChangedEvent<Person>) => {
this.expandedItems = event.detail.value;
}}"
rows-draggable
drop-mode="on-top"
@grid-dragstart="${(event: GridDragStartEvent<Person>) => {
this.draggedItem = event.detail.draggedItems[0];
}}"
@grid-dragend="${() => {
this.draggedItem = undefined;
}}"
@grid-drop="${(event: GridDropEvent<Person>) => {
const manager = event.detail.dropTargetItem;
if (this.draggedItem) {
// In a real application, when using a data provider, you should
// change the persisted data instead of updating a field
this.draggedItem.managerId = manager.id;
// Avoid using this method
this.grid.clearCache();
}
}}"
.dragFilter="${(model: GridItemModel<Person>) => {
const item = model.item;
return !item.manager; // Only drag non-managers
}}"
.dropFilter="${(model: GridItemModel<Person>) => {
const item = model.item;
return (
item.manager && // Can only drop on a supervisor
item.id !== this.draggedItem?.managerId // Disallow dropping on the same manager
);
}}"
>
<vaadin-grid-tree-column path="firstName"></vaadin-grid-tree-column>
<vaadin-grid-column path="lastName"></vaadin-grid-column>
<vaadin-grid-column path="email"></vaadin-grid-column>
</vaadin-grid>
`;
}
}