How to use handsontable - 10 common examples

reset() {
    const lastSelectedColumn = this.hot.getPlugin('filters').getSelectedColumn();
    const visualIndex = lastSelectedColumn && lastSelectedColumn.visualIndex;
    const columnType = this.hot.getDataType.apply(this.hot, this.hot.getSelectedLast() || [0, visualIndex]);
    const items = getOptionsList(columnType);

    arrayEach(this.getInputElements(), (element) => element.hide());
    this.getSelectElement().setItems(items);
    super.reset();
    // Select element as default 'None'
    this.getSelectElement().setValue(items[0]);
  }

onBeforeRemoveRow(index, amount) {
    this.removedRows.length = 0;

    if (index !== false) {
      // Collect physical row index.
      rangeEach(index, index + amount - 1, (removedIndex) => {
        this.removedRows.push(this.hot.runHooks('modifyRow', removedIndex, this.pluginName));
      });
    }
  }

let hotInitializer = (wrapper) => {
      if (!this._element) {
        return;
      }
      if (this.itemsBox) {
        this.itemsBox.destroy();
      }

      addClass(wrapper, 'htUIMultipleSelectHot');
      // Construct and initialise a new Handsontable
      this.itemsBox = new this.hot.constructor(wrapper, {
        data: this.items,
        columns: [
          {data: 'checked', type: 'checkbox', label: {property: 'visualValue', position: 'after'}}
        ],
        beforeRenderer: (TD, row, col, prop, value, cellProperties) => {
          TD.title = cellProperties.instance.getDataAtRowProp(row, cellProperties.label.property);
        },
        autoWrapCol: true,
        colWidths: 187,
        height: 110,
        width: 187,
        copyPaste: false,
        disableVisualSelection: 'area',
        fillHandle: false,

var hotInitializer = function hotInitializer(wrapper) {
        if (!_this3._element) {
          return;
        }
        if (_this3.itemsBox) {
          _this3.itemsBox.destroy();
        }

        addClass(wrapper, 'htUIMultipleSelectHot');
        // Construct and initialise a new Handsontable
        _this3.itemsBox = new _this3.hot.constructor(wrapper, {
          data: _this3.items,
          columns: [{ data: 'checked', type: 'checkbox', label: { property: 'visualValue', position: 'after' } }],
          beforeRenderer: function beforeRenderer(TD, row, col, prop, value, cellProperties) {
            TD.title = cellProperties.instance.getDataAtRowProp(row, cellProperties.label.property);
          },
          autoWrapCol: true,
          colWidths: 187,
          height: 110,
          width: 187,
          copyPaste: false,
          disableVisualSelection: 'area',
          fillHandle: false,
          fragmentSelection: 'cell',
          tabMoves: { row: 1, col: 0 },

constructor() {
    this.data = Handsontable.helper['createSpreadsheetData'](100, 12); // tslint:disable-line:no-string-literal
    this.options = {
      height: 396,
      colHeaders: true,
      rowHeaders: true,
      stretchH: 'all',
      columnSorting: true,
      contextMenu: true
    };
  }
}

c.sortFunction=function (sortOrder) {
                    // Handsontable's object iteration helper
                    let objectEach = Handsontable.helper.objectEach;
                    let unitsRatios = {
                        'TiB': 1024*1024*1024*1024,
                        'GiB': 1024*1024*1024,
                        'MiB': 1024*1024,
                        'KiB': 1024,
                        'B': 1,
                    };
                    let parseUnit = function(value, unit, ratio) {
                        if (isNil(value)) return value;
                        if (isNaN(value) && value.indexOf(' ' + unit) > -1) {
                            value = parseFloat(value.replace(unit, '')) * ratio;
                        }
                        return value;
                    };

visualcol: visualIndex,
        prop: columnSettings.data,
        row: null,
        visualRow: null,
      };

      getSourceItems.call(cellProperties, columnSettings.source, (items) => {
        // Prepare the items with key and value properties to be handled by intersectValues transparently
        const visibleValues = items.map(item => ({
          key: item[columnSettings.keyProperty],
          value: item[columnSettings.valueProperty],
        }));
        callback(visibleValues);
      });
    } else {
      const visibleValues = Handsontable.helper.arrayMap(
        this.hot.getDataAtCol(visualIndex),
        v => toEmptyString(v),
      );
      callback(visibleValues);
    }
  }

componentDidMount() {
    const { userId } = this.props;
    if (!userId) return;
    const self = this;
    // この画面だけで使う日付のカラムを追加
    hotConf.columns.unshift({
      title: `日付(${constants.DATEFMT})`,
      data: 'date',
      type: 'date',
      dateFormat: constants.DATEFMT,
      colWidths: 70,
    });
    this.hot = new Handsontable(this.hotDom, Object.assign({}, hotConf, {
      userId,
      isActiveNotifi: false,
      renderAllRows: true,
      height: 300,
      colWidths: Math.round(window.innerWidth / hotConf.columns.length),
      minRows: 10,
      data: [],
      afterRender() { self.syncStateByRender(); },
    }));
  }

if (row === 0 || row === 1) {
                cellProperties.renderer = firstRowRenderer; // uses function directly
            } else if (col === 0) {
                cellProperties.renderer = Handsontable.renderers.TextRenderer;
            } else {
                cellProperties.renderer = Handsontable.renderers.NumericRenderer;
                if ($("#tableview").data("relative_areas") === true) {
                    cellProperties.format = "0.00000";
                }
            }
            return cellProperties;
        },
    };
    const container = $("#tableview");
    container.empty();
    const table = new Handsontable(container[0], settings);
    load_data(table, data, errors);
    return table;
}

function setupTable() {
    const container = document.getElementById("studyLinesTable");
    const columns = Config.columns(access);
    // Handsontable.hooks.add("afterInit", onLineTableLoad);
    const table = new Handsontable(container, {
        "afterChange": Config.handleChange(access, container),
        "afterInit": onLineTableLoad,
        "afterGetColHeader": Config.disableMenuFirstColumn,
        "allowInsertRow": false,
        "allowInsertColumn": false,
        "allowRemoveRow": false,
        "allowRemoveColumn": false,
        "beforeColumnMove": Config.disableMoveFirstColumn,
        "beforeStretchingColumnWidth": Config.disableResizeFirstColumn,
        "colHeaders": columns.map((c) => c.header),
        "columns": columns,
        "data": access.lines(),
        // TODO: add additional menu items, filtering, etc.
        "dropdownMenu": ["alignment"],
        "filters": true,
        // freeze the first column