Our blazing fast Grid component built with pure JavaScript


Post by marko »

Is there an example how to use a function to render the tbar html? I tried but it just gets renders as a string.

I want to render a react component inside the tbar. If there's a better way to handle that please let me know.

I also tried to render it as a separate custom component, without using the toolbar, but I need to update it when rows are selected and I wasn't able to achieve that. If I set the selected rows in local state the grid's selected rows get reset after the first row is selected. I couldn't figure out why.


Post by Animal »

It's not HTML. It is a child component.

What exactly do you need to do? Reconfigure the tbar in some way?


Post by saki »

If your tbar is in a higher-level component (grid, scheduler, etc) then you can use this syntax:

        tbar : {
            items:[{
                type:'widget',
                html:<YourWidget />
            }]
        },

If your toolbar is standalone see please viewtopic.php?p=116806#p116806 for advices.


Post by marko »

I would prefer to use a standalone toolbar to have more flexibility but I need it to show only when there are rows selected and hide when no rows are selected (there are some other things that need to happen as well when rows are selected/deselected).
If I set local state in the onSelectionChange listener for some reason, when I select a row for the first time, the listener gets called again right away with an empty array as the selection and then the local state doesn't update anymore when I select or deselect rows.

Not sure why it happens. The wrapper component gets re-rendered when the local state is set but I don't know why the selection is reset. Any ideas?


Post by Animal »

A toolbar hiding and showing and the resulting layout jumps is going to be very disorientating for a user. I'd advise disabling/enabling.


Post by marko »

Ok, I tracked it down to the store config. I wrapped it in useMemo and now it works and the selection doesn't get reset.

Last edited by marko on Mon Jan 23, 2023 1:32 pm, edited 1 time in total.

Post by marko »

Animal, thanks for the input. It's the way our current table UI works and we like it that way so for now we will keep that behaviour :)


Post Reply