Advanced Drag and Drop

Implement sophisticated drag-and-drop functionality within your grid

Source code

TypeScript

src/components/row-order/rowOrder.ts

import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();

import {
  RowHeaderPlugin,
  rowHeaders,
  RowOrderPlugin,
} from '@revolist/revogrid-pro';

import { currentTheme, useRandomData } from '../composables/useRandomData';
const { createRandomData } = useRandomData();
const { isDark } = currentTheme();

const grid = document.querySelector('revo-grid');
if (grid) {
  grid.source = createRandomData(100);
  // Define columns;
  grid.columns = [
    {
      name: '🆔 ID',
      prop: 'id',
      rowDrag: true,
    },
    {
      name: '🍎 Fruit',
      prop: 'name',
    },
    {
      name: '💰 Price',
      prop: 'price',
    },
  ];
  // Define plugin
  grid.plugins = [RowHeaderPlugin, RowOrderPlugin];
  grid.rowHeaders = rowHeaders({ showHeaderFocusBtn: false, rowDrag: true });

  grid.theme = isDark() ? 'darkCompact' : 'compact';
}

React

src/components/RowHeadersGrid.tsx

import React, { useState, useMemo } from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import { RowHeaderPlugin, rowHeaders, RowOrderPlugin } from '@revolist/revogrid-pro';
import { currentTheme, useRandomData } from '../composables/useRandomData';

const RowHeadersGrid = () => {

  const { createRandomData } = useRandomData();
  const { isDark } = currentTheme();

  const theme = isDark() ? 'darkCompact' : 'compact';
  const [rows] = useState(() => {
    const data = createRandomData(100);
    return data.map((row, index) => ({
      ...row,
      avatar: `https://randomuser.me/api/portraits/men/${(index % 50) + 1}.jpg`
    }));
  });

  const columns = useMemo(
    () => [
      {
        name: 'Avatar',
        prop: 'avatar',
        cellTemplate: (h: any, props: any) => {
          return h('img', {
            style: {
              width: '32px',
              height: '32px',
              borderRadius: '50%',
              objectFit: 'cover'
            },
            src: props.model[props.prop]
          });
        },
        size: 60
      },
      { name: '🆔 ID', prop: 'id' },
      { name: '🍎 Fruit', prop: 'name' },
      { name: '💰 Price', prop: 'price' },
    ],
    []
  );
  const plugins = [RowHeaderPlugin, RowOrderPlugin];
  const rowHeadersConfig = rowHeaders({ showHeaderFocusBtn: false, rowDrag: true });

  return (
    <RevoGrid
      theme={theme}
      columns={columns}
      source={rows}
      plugins={plugins}
      rowHeaders={rowHeadersConfig}
      hideAttribution
    />
  );
};

export default RowHeadersGrid;

Vue

<template>
  <RevoGrid
    class="overflow-hidden"
    :theme="isDark ? 'darkCompact' : 'compact'"
    :columns="columns"
    :source="rows"
    :plugins="plugins"
    :row-headers="rowHeadersConfig"
    range
    hide-attribution
  />
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import RevoGrid from '@revolist/vue3-datagrid';
import {
  RowHeaderPlugin,
  rowHeaders,
  RowOrderPlugin,
} from '@revolist/revogrid-pro';
import { currentThemeVue, useRandomData } from '../composables/useRandomData';


const { createRandomData } = useRandomData();
const { isDark } = currentThemeVue();

const rows = shallowRef(createRandomData(100));
const columns = ref([
  { name: '🆔 ID', prop: 'id' },
  { name: '🍎 Fruit', prop: 'name' },
  { name: '💰 Price', prop: 'price' },
]);
const plugins = [RowHeaderPlugin, RowOrderPlugin];
const rowHeadersConfig = ref(
  rowHeaders({ showHeaderFocusBtn: false, rowDrag: true }),
);
</script>

Angular

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import {
  RowHeaderPlugin,
  rowHeaders,
  RowOrderPlugin,
} from '@revolist/revogrid-pro';
import { currentTheme, useRandomData } from '../composables/useRandomData';

@Component({
  selector: 'row-header-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      [theme]="theme"
      [columns]="columns"
      [source]="rows"
      [plugins]="plugins"
      [rowHeaders]="rowHeadersConfig"
      [hideAttribution]="true"
      style="height: 400px; width: 600px"
    ></revo-grid>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class RowHeaderGridComponent implements OnInit {
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
  rows = useRandomData().createRandomData(100);

  columns = [
    { name: '🆔 ID', prop: 'id' },
    { name: '🍎 Fruit', prop: 'name' },
    { name: '💰 Price', prop: 'price' },
  ];

  plugins = [RowHeaderPlugin, RowOrderPlugin];

  rowHeadersConfig = rowHeaders({ showHeaderFocusBtn: false, rowDrag: true });

  ngOnInit() {
    // Any additional setup if needed
  }
}

Why it matters

Reorder plugin in RevoGrid may appear simple at first glance, but it’s quite a complex and powerful feature. It supports multi-item reordering, allowing users to move multiple rows or columns at once while preserving the integrity of the dataset. Leveraging proxyItems for efficient handling of the full dataset, the plugin ensures that filter positioning remains correct even after reordering, maintaining a seamless user experience.

Beyond its core functionality, plugin plays a crucial role in supporting other plugins within RevoGrid. It facilitates data transfer across different operations and plugins, extending the overall capabilities of the grid.

This makes it an essential component for managing dynamic datasets in RevoGrid Pro.

Key Features

• Custom Drag-and-Drop Behavior: Tailor the drag-and-drop interactions to fit your application’s specific needs. You can configure how rows are moved, allowing for both simple and complex drag-and-drop operations.

• Enhanced Interactivity: Improve the overall usability of your grid. With responsive drag-and-drop functionality, users can quickly reorganize data, making it easier to manage and visualize information.

• Multi-Row Dragging: Users can drag and drop multiple rows at once, simplifying bulk operations. This is particularly useful for scenarios where users need to rearrange large datasets quickly.

• Flexible Dimensions: Allow dragging in any direction—vertically or horizontally—supporting both pinned and classic rows. This flexibility enables users to interact with the grid in a way that feels natural to them.

• Custom Classes During Dragging: Apply custom styles during drag operations to provide visual feedback. This feature helps users understand what they are dragging and where they can drop it, enhancing the overall experience.

• Drag Handle Customization: Implement your own drag handles and apply them to custom cells without limitations. This means you can design specific elements within your rows to serve as drag handles, making it clear to users which parts of the UI are draggable.

• Extendable Event Source: Enhance functionality by extending the drag event source. You can create custom events and interactions that suit your application’s specific requirements, allowing for a more tailored user experience.

How to use

To enable drag and drop functionality for specific columns, first, import the RowOrderPlugin from @revolist/revogrid-pro and then simply add the rowDrag property to the column configuration:

import { RowOrderPlugin } from '@revolist/revogrid-pro';
grid.columns = [
  { name: '🆔 ID', prop: 'id', rowDrag: true },
];

// or in row headers
grid.rowHeaders = { rowDrag: true };

// don't forget to add the plugin
grid.plugins = [RowOrderPlugin];

Row Order Hints

The additionalData.rowOrder configuration allows you to customize what text appears in the drag hint tooltip. By setting the prop property, you can specify which column’s value should be displayed while dragging:

  grid.additionalData = {
    rowOrder: {
      prop: 'name',
    },
  };

User-Centric Benefits

By leveraging the advanced drag-and-drop capabilities, users will experience:

• Increased Efficiency: Streamline workflows by allowing users to quickly rearrange rows, making data management less cumbersome.
• Improved Data Visualization: Users can reorganize data in a way that makes the most sense to them, leading to better insights and understanding.
• Intuitive Interface: A well-implemented drag-and-drop feature provides an intuitive interface, reducing the learning curve for new users.
• Customization Flexibility: Allowing for custom drag handles and styles gives users the ability to tailor their experience according to their preferences.

Advanced drag-and-drop functionality empowers users to interact with their data in a more dynamic and intuitive way. By customizing the behavior and appearance of drag-and-drop actions, you can significantly enhance the user experience within your grid application. Embrace these capabilities to create a more engaging and efficient interface that meets your users’ needs.