Custom Column Headers

Tags: #<Tag:0x00007efc65621de0> #<Tag:0x00007efc65621ca0>
#1

Hey,

Handsontable: 12.4

Hope all is well. I have a question around the best recommended way to render custom headers for columns.

We have a bunch of tables in our applications now which is great. We have been altering the appearance to match our style guide and for the most part this is going well. We have a few performance issues with the afterGetColHeaders, which is the current method we’re using to add custom filter, sort, select all, pinned columns etc…

And example of what we’re rendering to the DOM

const filterButton = document.createElement('div')
filterButton.onclick = () => {
    render(<SomeReactComponent />)
}
TH.appendChild(filterButton)

This get’s called a lot, do you have recommendations to how we can improve this. I’m assuming it’s related to auto-resize and because that gets called so many times we have to re-render the columns.

Before we dive deeper into this I was just wondering if you had any guidance on this?

Things that we’re thinking about are:

  • Setting a width for our columns and disabling auto resize
  • Keeping track of columns which have rendered header stuff already

Thanks, James

afterGetColHeader called when updating state external to the component
#2

Hi James,

There does not seem to be much space for improvement within the logic of your afterGetColHeader but maybe there’s something you can do based on the general performance guide from https://handsontable.com/docs/javascript-data-grid/performance/

I also recommend checking this guide https://handsontable.com/docs/javascript-data-grid/batch-operations/ for batching operations.

#3

Cheers, will take a look :slight_smile:

#4