最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

reactjs - 'HotTable' component not rendering while passing "non-commercial-and-evaluation" as

programmeradmin5浏览0评论

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.

Share Improve this question edited Jan 18 at 10:54 Ali Almasi asked Jan 18 at 6:35 Ali AlmasiAli Almasi 251 silver badge10 bronze badges 4
  • 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
Add a comment  | 

2 Answers 2

Reset to default 0

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.

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论