[GH #6466] React How to render a custom component in a cell?

Tags: #<Tag:0x00007efc6055ad08> #<Tag:0x00007efc6055abc8>
#1

We are evaluating HandOnTable within our company.

Please look at this working sample app on Stackblitz: A Sample React App

For each cell under the column “Product Line Manager”, we want to render a custom react component.
This custom react component basically renders a “typeahead” input box that allows the user to pick a username (that comes from the API) and select it and display in the cell.
So, Basically, this functionality is very similar to the “typeahead” functionality of Google’s “search box”.

Please see the attached png image for the mockup screenshot. How can this be accomplished in the sample app above?

ProductLineManager

#2

Hi @achowdhary

Here’s a a tutorial on how to construct a custom cell component https://handsontable.com/docs/8.0.0/frameworks-wrapper-for-react-hot-column.html
There are also some examples (sandbox online demos).

#3

Hi @aleksandra_budnik,

We are doing a POC/evaluation for use of your product within our company inside our React app.

I have updated the App on StackBlitz at URL: Sample App

I am trying to simulate an API that fetches the rows. Although the 23 rows come from Example.json, in the final App, the number of rows which will come from the API is unknown and is dynamic.

Our requirement is to have three fixed rows at the bottom (which I have colored) with the calculations as shown in FixFormulas.js. Supply is a constant integer (a prop that comes from the Parent - App.js). The Demand row sums all the respective columns and the Delta row subtracts the column sum from the RUNNING Supply. So, the calculation is working correctly.

However, there are the following two performance issues:

  1. This app takes about 5-7 seconds to load (or reload/refresh) on chrome/firefox. Why so much delay?

  2. TRY THIS: For row1, Column Q1, change the value from “10” to “20” and hit return. It takes 7-8 seconds for cursor to move to the next row after which the calculations for the Demand and Delta rows are updated. Why such a HUGE delay on chrome and firefox?

  3. Earlier, we found that Safari is OK but both Chrome and Firefox have these performance issues. Firefox being worse than chrome. Can you also investigate this more?

I believe that cell highlighting code also causes some performance issues in addition to the calculations.

Can you please provide some solutions to resolve the two performance issues on Chrome and Firefox?

Maybe there is a different way of doing the calculations or highlighting or something else that can be done to resolve the performance issues?

Thanks for your help!

#4

Thank you for introducing the project to me.

Could you send me a version where I’d be able to debug the code? I think that the performance issue comes from the use of custom renderers or too many hooks but without seeing the code that is only a presumption.

#5

Aleksandra,

Sorry, forgot to send you the ‘EDIT’ URL. Here it is:

https://stackblitz.com/edit/react-tfjvoc?file=src%2FTable.js

#6

That is exactly what I’ve experienced. Once we comment out formulas: true table’s performance is near to perfect. Gladly, we are almost over with our new formula plugin https://github.com/handsontable/handsontable/issues/6466 that as it is works smoothly.

I will update you once it’s done.

#7

Aleksandra,

We like your product, however, formula support is key for us. Also, we are under a tight schedule.

I see that you have been developing the new formula plugin since Nov, 2019. What is your timeframe for releasing it for GA (General Availability)? Is it days, weeks or months?

#8

Hyper Formula is already a working project. We just haven’t prepared it as a plugin to Handsontable. Nevertheless, you can use it in your project and check if it works faster for you as long as the license type works for you https://github.com/handsontable/hyperformula/blob/master/LICENSE.txt

Repository link https://github.com/handsontable/hyperformula

ps. I will be delighted to help you with that experiment.

#9

Hi @aleksandra_budnik,

Please note that currently we are only evaluating your product. So, we don’t yet have to purchase a license for HOT/Hyperformula engine at this stage right?

Also, if we are satisfied with the performance of HOT with the new HyperFormula engine, we would then purchase two licenses for your product for use in our IT app that is used on our Corporate Intranet. However, can you please shed some light on the licensing terms/costs on purchasing both HOT and HyperFormula together? Specifically,

  1. Will the same license key cover both HOT and the HyperFormula engine? How much will this cost per license?
  2. If not, then what are the licensing terms/costs for each of the two products in order to use them together?

In any case, at this “experimental” stage, we are more interested in seeing if the above Sample App works well with the new HyperFormula engine. So, can you please provide a new version of the above app with the new Hyperformula engine or specify the steps to incorporate and use it in the above App?

Please also note that we are in USA/California because of which we cannot have an interactive back and forth chat on this forum with you, as you are in Poland.

#10

Hi @achowdhary

Here https://we.tl/t-1ESgPy8bT6 is a basic Handsontable project that uses your settings and has working hyper formula attached. I’ve added two methods to check if it works correctly and effect is promising. To run the project one needs to

  1. use npm i
  2. use parcel to run parcel save index.html

Answering your licensing questions, I would recommend to wait for the HyperFormula to be served as a plugin to Handsontable. If you decide that you want to push the project into production I will schedule the call with our Sales Team to discuss licensing. Both, Handsontable and HyperFormula quoting is currently based on type of use so it would benefit you better if HyperFormula became a part of Handsontable.