Our blazing fast Grid component built with pure JavaScript


Post by zaclangley »

So we are doing our due diligence to your table and we seem to be unable to add our own custom editors. When adding our custom editors to the table the interaction registers on the cell container, but not the components inside the cell.

Do you have any advice on that issue? It's no the custom renderers, those work fine. I need to register user interaction with components nested inside the table cell

We have a date editor that we need to use, but it only registers a click on the container and not the data editor inside

Post by johan.isaksson »

Hi,

It is hard to guess whats wrong, please submit a runnable test case that we can inspect and we might be able to assist you. Keep it as simple as possible, preferable based on one of our demos.
Best regards,
Johan Isaksson

Post by zaclangley »

Okay for in your Columns Properties for the Grid component, you have ' renderer'.
It takes in HTML like so:
{
	...
 	renderer: ({value}) => {
 		return `<div>
				${value}
				<button onclick="console.log('button clicked')"> A Button </button>
 				</div>`
 }
It has full functionality with basic HTML.

I want to be able to do this:
{
	...
 	renderer: ({value}) => {
 		return `
 		        <div className={styles.CellExpanded}>
            			<div className={styles.CellExpanded}>
                			<div className={styles.Name}>{value}</div>
                			<button 
                				onClick={() => {console.log('button clicked'); }} 
                				className={styles.dropdownMenu}>
                				{menuHolder}			
                			</button>
           			</div>
            			<div 
            				className={styles.Bar}>
            				<HoursBar 
            					availableHours={32} 
            					scheduledHours={4}/>
            				</div>
        			</div>
        		}
        		
This uses React JSX to render the cell.
This is not allowed and all that is printed to the cell is [object Object].
Is there a property or set up for the table that allows JSX elements?
All I really need to be able to do is render JSX and use callback functions.

Post by johan.isaksson »

Hi,

Unfortunately rendering using JSX is not that easy, but we are working on supporting it in our React wrapper. Will probably not be included in the next release (1.2) but might make it into 1.3.

I have created a ticket so that you can track progress: https://app.assembla.com/spaces/bryntum/tickets/7334.
Best regards,
Johan Isaksson

Post by jstano »

I was able to do this and get it working, but I'm not sure if it will cause any problems. Does this seem a reasonable thing to do?
{
                  text: 'Custom Renderer',
                  renderer: ({value, cellElement}) => {
                     const buttonHtml = ReactDOM.hydrate(<button style={{backgroundColor: 'blue'}} onClick={() => {
                        this.helloClicked(value);
                     }}>{value}</button>, cellElement);
                     return buttonHtml;
                  },
                  field: 'custom',
                  htmlEncode: false
               },

Post by johan.isaksson »

I have personally never used `hydrate`, but from reading about it it seems to be more or less equivalent to `render`. While your approach will render buttons they will each be in their own react root (easily spotted in react devtools for chrome). That will make it harder to share state and probably also impact performance.

Also when scrolling our grid cells are reused, but the react component will not be released. Over time it will build up and eat memory/performance. In a small grid this approach might work fine, but in a bigger solution I think we need to support portals or at least releasing the components when a cell gets recycled.

Our plan is for renderers to accept JSX like this:
renderer   : ({value, record}) => <Button key={record.id} text={record.team} onClick={() => this.handleButtonClick(record)}/>
We have more customers requesting this feature, I hope we will able to prioritise it after the next release.
Best regards,
Johan Isaksson

Post by jstano »

Do you have a rough timeframe for the 1.2/1.3 releases? I'm not looking for anything definite, just a rough estimate.

Thanks,

Jeff

Post by johan.isaksson »

We hope to release 1.2 next week, after that the upcoming holidays will interfere and it is hard at this point to estimate when 1.3 will be done.

But you could keep track of the ticket above. When its status is changed to resolved the changes will be available in nightlies
Best regards,
Johan Isaksson

Post Reply