Row Order

Module Extensions

AdditionalData (Extended from @revolist/revogrid)

interface AdditionalData {
  /**
       * Additional data property rowOrder
       *
       * @example
       * ```typescript
       * const grid = document.createElement('revo-grid');
       * grid.plugins = [RowOrderPlugin];
       * grid.additionalData = {
       *   rowOrder: {
       *     prop: 'name', // column prop, used for drag and drop text information
       *   },
       * };
       * ```
       */
      rowOrder?: RowOrderPluginConfig
}

---

ColumnRegular (Extended from @revolist/revogrid)

interface ColumnRegular {
  /**
       * Column prop, used for drag and drop text information
       */
      rowDrag?: RowDrag
}

---

HTMLRevoGridElementEventMap (Extended from global)

interface HTMLRevoGridElementEventMap {
  [ORDER_CHANGED_EVENT]: RowOrderChange;
  [DRAG_START_EVENT]: RowDragStartEvent
}

Plugin API

RowOrderPlugin

The RowOrderPlugin is a sophisticated plugin for the RevoGrid framework, providing users with the ability to reorder rows through an intuitive drag-and-drop interface. This plugin enhances user interactivity by allowing smooth row rearrangement while maintaining data integrity and grid performance.

Key Features:

• Row Drag and Drop: Users can drag one or multiple rows and reposition them within the grid.
• Auto-scroll Support: Automatically scrolls the grid, viewport, or container when rows are dragged near the edges, ensuring a seamless drag-and-drop experience.
• Row Highlighting: Highlights rows that are being dragged or trimmed, providing visual feedback.
• Multiple Row Handling: Supports dragging and selecting multiple rows, enhancing batch operations.
• Event Integration: Listens to and dispatches various drag-related events, such as DRAG_START_EVENT, DRAG_END_EVENT, ORDER_CHANGED_EVENT, and more, allowing for extensive customization and integration with other components.
• Trimmed Row Management: Manages trimmed rows by automatically clearing and updating them as necessary during drag operations.

Usage:

• Integrate RowOrderPlugin into a RevoGrid instance to enable advanced row reordering capabilities.
• Customize behavior and appearance through configuration options and event listeners.

Example

import { RowOrderPlugin } from '@revolist/revogrid-pro'

const grid = document.createElement('revo-grid');
grid.plugins = [RowOrderPlugin];

This plugin is ideal for applications requiring dynamic, user-driven row management, such as task prioritization tools, data manipulation applications, or any scenario where row order is significant.

class RowOrderPlugin {
  /**
     * Drop trigger event
     */
  onMouseOut(_: MouseEvent): void;

  /**
     * Final event
     */
  onMouseUp(e: MouseEvent): void;

  /**
     * Initial event when drag begins
     */
  dragStart(;

  /**
     * Initial row move
     */
  move(e: MouseEvent);

  clearOrder(): void;

  /**
     * Start grid reordering
     */
  orderStart(e: MouseEvent): void;

  /**
     * Clearing local subscription
     */
  clearSubscriptions();

  clearHighlight();
}

---

draggableRender

export function draggableRender(
  h: HyperFunc<VNode>,
  data: DragEventsData,
  _?: any
);

---

OrderHandler

class OrderHandler {
  renderAutoscroll(_: MouseEvent, parent: HTMLElement | null): void;

  autoscroll(y: number, dataContainerHeight: number): void;

  start(e: MouseEvent,;

  stop(): void;

  moveTip(;

  showHandler(y: number, gridHeight: number): void;

  render(h: HyperFunc<VNode>, pluginId: string);
}

---

getTopRelative

Get coordinate relative to the grid

export function getTopRelative(
  absoluteY: number,;

---

getRow

Calculate cell based on x, y position

export function getRow(y: number, e: EventData): PositionItem;

---

getCell

Calculate cell based on x, y position

export function getCell(;

---

EventData

export type EventData =  {
  el: HTMLElement;
  elScroll: Element;
  elRect: DOMRect;
  gridRect: DOMRect;
  yOffset: number;
  dataItem: DragEventsData;
  type: DimensionRows;
  rows: DimensionSettingsState;
  cols: DimensionSettingsState;
};

---

default

class RowOrderService {
  /** Drag finished, calculate and apply changes */
  endOrder(e: MouseEvent, data: EventData): void;

  start(e: MouseEvent): void;

  /** Drag started, reserve initial cell for farther use */
  startOrder(cell: Cell);

  move(e: MouseEvent, data: EventData): PositionItem | null;

  /** Drag stopped, probably cursor outside of document area */
  clear(): void;
}

---

RowOrderChangedDetail

export type RowOrderChangedDetail =  {
  from: number;
  to: number;
  type: DimensionRows;
};

---

RowDragStartEvent (Extended from row-order.types.ts)

interface RowDragStartEvent {
  model: CellTemplateProp
}

---

RowOrderPluginConfig

interface RowOrderPluginConfig {
  prop?: ColumnProp
}

---

RowOrderServiceConfig

interface RowOrderServiceConfig {
  dimension: PluginProviders['dimension'];
  orderStart(e: MouseEvent): void;
  positionChanged(e: MouseEvent, detail: RowOrderChangedDetail): void
}

---

DragEventsData (Extended from row-order.types.ts)

interface DragEventsData {
  text?: string | number
}

---

RowOrderChange (Extended from row-order.types.ts)

interface RowOrderChange {
  // ; // models
    originalEvent: MouseEvent
}

---

LocalSubscription

export type LocalSubscription =  {
  target: Element | Document;
  callback(...params: any[]): void;
};

---

StaticData

export type StaticData =  {
  dataItem: CellTemplateProp;
  dataEl: HTMLElement;
  scrollEl: Element;
  gridEl: HTMLElement;
  items: Map<number, DataType>;
};