How to use the handsontable function in handsontable

To help you get started, we’ve selected a few handsontable examples, based on popular ways it is used in public projects.

github hand-dot / taskontable / src / containers / Activity.js View on Github external
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(); },
    }));
  }
github JBEI / edd / typescript / src / GCMS_Workbench.ts View on Github external
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;
}
github JBEI / edd / typescript / src / Study-Lines.ts View on Github external
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
github dxe / adb / frontend / external / vue-handsontable-official / helpers.js View on Github external
export function hotInit(vueInstance) {
  const settingsMapper = new SettingsMapper();
  const unmappedSettings = [
    vueInstance.settings ? vueInstance.settings : vueInstance._props,
  ];

  if (vueInstance.settings) {
    unmappedSettings.push(vueInstance._props)
  }

  vueInstance.table = new Handsontable(vueInstance.$el, settingsMapper.prepare(...unmappedSettings));
}
github youseries / ureport / ureport2-js / src / table / ReportTable.js View on Github external
constructor(container,callback){
        this.container=container;
        this.hot=new Handsontable(container,{
            startCols:1,
            startRows:1,
            fillHandle:{
                autoInsertRow:false
            },
            colHeaders:true,
            rowHeaders:true,
            autoColumnSize:false,
            autoRowSize:false,
            manualColumnResize:true,
            manualRowResize:true,
            maxColsNumber:700,
            outsideClickDeselects:false
        });
        this.buildMenu();
        this.hot.addHook("afterRenderer",afterRenderer);
github handsontable / vue-handsontable-official / src / HotTable.vue View on Github external
newSettings.columns = this.columnSettings ? this.columnSettings : newSettings.columns;

        if (globalEditorVNode) {
          newSettings.editor = this.getEditorClass(globalEditorVNode, this);

          globalEditorVNode.child.$destroy();
        }

        if (globalRendererVNode) {
          newSettings.renderer = this.getRendererWrapper(globalRendererVNode, this);

          globalRendererVNode.child.$destroy();
        }

        this.hotInstance = new Handsontable(this.$el, newSettings);

        preventInternalEditWatch(this);
      },
      getGlobalRendererVNode: function (): VNode | null {
github sourcefuse / sheet-sync / src / main.js View on Github external
columnSorting: {
    indicator: true,
  },
  autoColumnSize: {
    samplingRatio: 23,
  },
  contextMenu: true,
  licenseKey: 'non-commercial-and-evaluation',
  customBorders: true,
  colWidths: ['7%', '16%', '38%', '39%'],
  className: 'sheet',
};

const hotElement = document.querySelector('#hot');

const hot = new Handsontable(hotElement, hotSettings);

document.getElementById('seed-data').addEventListener('click', () => {
  hot.populateFromArray(data.length, 0, [[
    faker.random.boolean(),
    faker.random.number(),
    faker.internet.email(),
    faker.name.findName(),
  ]]);
});

/**
 * Record user's activity as pubunb's state
 */

hot.addHook('afterSelectionEnd', (row, col, row2, col2) => {
  pubnub.setState(
github tabixio / tabix / src / components / Handsontable / HotTable.jsx View on Github external
componentDidMount() {
        const newSettings = this.settingsMapper.getSettings(this.props);

        this.hotInstance = new Handsontable(document.getElementById(this.id), newSettings);
    }