How to load data to, and save data from a Handsontable to a MySQL database?

23 Views Asked by At

I am developing a web app where users can enter data into a spreadsheet like like UI and click on a submit button, and the data gets stored in a mysql database table.

I built the project with vite and have the basic UI ready. However, I am having trouble getting started with the backend implementation.My main.js file looks like this

import './style.css';
import HyperFormula from 'hyperformula';

document.querySelector('#app').innerHTML = `
<div id="example1" class="hot "></div>
<button class="btn">SUBMIT</button>
`;

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';
import { registerAllModules } from 'handsontable/registry';

registerAllModules();

const fakeDataset = [
  {
    id: 1,
    name: 'John',
    secondName: 'Doe',
    age: 30,
    location: 'New York',
  },
];

const hyperformulaInstance = HyperFormula.buildEmpty({
  // to use an external HyperFormula instance,
  // initialize it with the `'internal-use-in-handsontable'` license key
  licenseKey: 'internal-use-in-handsontable',
});

const container = document.querySelector('#example1');
const hot = new Handsontable(container, {
  //data: fakeDataset, commenting this out will load mockup data
  startCols: 9, //number of empty columns
  startRows: 100, //numbver of empty rows
  height: 500, //hight in pixels
  colHeaders: [
    'Date of Service',
    'Claimant Number',
    'Service Type',
    'Quantity per Claimant',
    'Pay Rate each',
    'Pay Rate extended',
    'Zip code',
    'Mobile',
    'E-mail',
  ], //can pass true to get default A,B,C column headers
  columns: [
    {
      type: 'date',
      dateFormat: 'MM/DD/YYYY',
      correctFormat: true,
      defaultDate: '01/01/1900',
      // datePicker additional options
      // (see https://github.com/dbushell/Pikaday#configuration)
      datePickerConfig: {
        // First day of the week (0: Sunday, 1: Monday, etc)
        firstDay: 0,
        showWeekNumber: true,
        /*disableDayFn(date) {
          // Disable Sunday and Saturday
          return date.getDay() === 0 || date.getDay() === 6;
        }*/ //this is to disable Sundays and Saturdays
      },
    },
    {
      type: 'text',
      allowInvalid: false,
    },
    {
      type: 'dropdown',
      source: ['a', 'b', 'c', 'd', 'e', 'f'],
      allowInvalid: false,
    },
    {
      type: 'numeric',
      allowInvalid: false,
    },
    {
      type: 'numeric',
      allowInvalid: false,
    },
    {
      type: 'numeric',
      source: 'PROD(D:E)',
      allowInvalid: false,
    },
  ],
  rowHeaders: true, //this enables the 1, 2, 3 row headers
  contextMenu: true, //this is a menu that will allow to add/remove row/column if you open it up with RMB on any cell
  autoWrapRow: true, //this allows to move to another row with arrows when you are in the last cell
  autoWrapCol: true, //this allows to move to another row with arrows when you are in the last cell
  licenseKey: 'non-commercial-and-evaluation', //this is only for evaluation, after the purchase you will replace that with your own key
});

document.querySelector('.save').addEventListener('click', () => {
  let alteredDataset = hot.getData();
  console.log(alteredDataset);
  //this is the place to send it back to the server
});

This is how it looks on the browser.

enter image description here

I want to implement a functionality where users can enter data into the data grid and click on the submit button to store the data into a mysql database table with the same fields. I am new to node.js and am confused as to how to get started.

0

There are 0 best solutions below