I'm using Handsontable for my first time with React18 (Vite6), and the fisrt thing I recreated was the example they provided in their installation docs.

I've noticed this example has the line licenseKey="non-commercial-and-evaluation" passed as a prop to their main component called HotTable, like this:

<HotTable
  data={[
    ["", "Tesla", "Volvo", "Toyota", "Ford"],
    ["2019", 10, 11, 12, 13],
    ["2020", 20, 11, 14, 13],
    ["2021", 30, 15, 12, 13]
  ]}
  rowHeaders={true}
  colHeaders={true}
  height="auto"
  autoWrapRow={true}
  autoWrapCol={true}
  licenseKey="non-commercial-and-evaluation"
/>

At first, it didn't rendered anything. Just a blank page, but as I removed the licenseKey prop, it started to render the table with a message saying "The license key for Handsontable is missing.":

Now, the question is, do I need a license key to use Handsontable, or did I do any other thing wrong?

Edit: StackBlitz link and GitHub repo link.

I'm using Handsontable for my first time with React18 (Vite6), and the fisrt thing I recreated was the example they provided in their installation docs.

I've noticed this example has the line licenseKey="non-commercial-and-evaluation" passed as a prop to their main component called HotTable, like this:

<HotTable
  data={[
    ["", "Tesla", "Volvo", "Toyota", "Ford"],
    ["2019", 10, 11, 12, 13],
    ["2020", 20, 11, 14, 13],
    ["2021", 30, 15, 12, 13]
  ]}
  rowHeaders={true}
  colHeaders={true}
  height="auto"
  autoWrapRow={true}
  autoWrapCol={true}
  licenseKey="non-commercial-and-evaluation"
/>

At first, it didn't rendered anything. Just a blank page, but as I removed the licenseKey prop, it started to render the table with a message saying "The license key for Handsontable is missing.":

Now, the question is, do I need a license key to use Handsontable, or did I do any other thing wrong?

Edit: StackBlitz link and GitHub repo link.

• reactjs
• vite
• handsontable

• Please provide a minimum, reproducible example with just the essential code to reproduce the issue. This will make it easier for others to help. – Mohammad Masoudi Commented Jan 18 at 8:17
• @MohammadMasoudi Well, this is the most important part of the code I wrote. Others parts of it is just Vite's React template code. If you need anything else, please comment and I'll edit the question and add codes to it. – Ali Almasi Commented Jan 18 at 8:28
• If possible, create a simplified version of your project on StackBlitz for easier debugging. – Mohammad Masoudi Commented Jan 18 at 8:45
• @MohammadMasoudi stackblitz/~/github/AliAlmasi/hands-on-table – Ali Almasi Commented Jan 18 at 9:07

2 Answers 2

One option is that you can hide the message with a simple css code:

.hot-display-license-info {
    display: none;
}

But since this is not the answer I'm looking for, I'm not interested to go this way, but for others this may help them.

Be careful, as you're going to see a warning in the console (so this might not be a good thing to use in production)

Handsontable can be used for free for non-commercial and evaluation purposes. If you intend to use it for a commercial project before going live, you'd need to purchase a license. You can read more about it at https://handsontable/docs/javascript-data-grid/software-license/ and ask [email protected] to specify if you qualify for the non-commercial use if that is unclear.