Row and Column Addition Plugin

Introduction

AddRowColumnPlugin is a plugin designed to extend VTable with dynamic row and column addition capabilities.

This plugin monitors the vTable instance's MOUSEENTER_CELL, MOUSELEAVE_CELL, and MOUSELEAVE_TABLE events!

When the mouse hovers over a table cell, dots and plus signs for adding rows and columns will be displayed; when the mouse leaves the table cell, these indicators will be hidden.

Plugin Configuration

Configuration options for the row and column addition plugin:

export interface AddRowColumnOptions {
  /**
   * Whether to enable column addition
   */
  addColumnEnable?: boolean;
  /**
   * Whether to enable row addition
   */
  addRowEnable?: boolean;
  /**
   * Callback function for adding a column
   */
  addColumnCallback?: (col: number) => void;
  /**
   * Callback function for adding a row
   */
  addRowCallback?: (row: number) => void;
}

Plugin Example

Initialize the plugin object and add it to the vTable configuration's plugins.

const addRowColumn = new AddRowColumnPlugin();
const option = {
  records,
  columns,
  padding: 30,
  plugins: [addRowColumn]
};

To control the content of newly added row data and update data and column information after adding columns, you can use the configuration options provided by the plugin. When initializing the plugin object, provide hook functions for adding rows and columns, and set the values for new rows or column information in these functions.

 const addRowColumn = new AddRowColumnPlugin({
    addColumnCallback: col => {
      columns.splice(addColIndex, 0, {
          field: ``,
          title: `New Column ${col}`,
          width: 100
        });
      this.table.updateColumns(columns);
      const newRecords = tableInstance.records.map(record => {
        if (Array.isArray(record)) {
          record.splice(col - 1, 0, '');
        }
        return record;
      });
      tableInstance.setRecords(newRecords);
    },
    addRowCallback: row => {
      tableInstance.addRecord([], row - tableInstance.columnHeaderLevelCount);
    }
  });

Runnable example: