React Render Custom Header

Tags: #<Tag:0x00007efc72f71ac8> #<Tag:0x00007efc72f71988>
#1

Hi there,

I’m trying to pass a custom header to the React Handson table and I’m facing some issues.

I created a custom component which is rendered in “afterGetColHeader”.

const renderColumnHeader = (column: number, thElement: HTMLTableHeaderCellElement): void => {

  if (column < 0 || column >= columnHelper.length) {

    return;

  }

  const colHeaderElement = thElement.querySelector<HTMLDivElement>('.colHeader');

  if (colHeaderElement) {

    const parentElement = colHeaderElement.parentElement;

    const headerData = columnHelper[column].headerData;

    if (parentElement && headerData) {

      parentElement.removeChild(colHeaderElement);

      const headerContainer = document.createElement('div');

      headerContainer.style.height = `${colHeadersHeight}px`;

      parentElement.appendChild(headerContainer);
      const root = createRoot(headerContainer);
      root.render(<AdvancedTableHeader {...headerData} />);

    }

  }

};

I’m now stuck with the error:

Uncaught TypeError: Cannot read properties of null (reading ‘parentNode’)
at W3.updateCellHeader (index.js:78:151175)
at W3.appendColHeader (index.js:78:150576)
at Array. (index.js:78:141265)
at I0.render (index.js:74:34470)
at W0.render (index.js:78:4242)
at z0.render (index.js:78:5314)
at L2.draw (index.js:78:18530)
at b3.draw (index.js:78:45766)
at S2.refreshAll (index.js:78:79752)
at S2.syncScrollPositions (index.js:78:83451)
at S2.onTableScroll (index.js:78:81641)
at eventManager.addEventListener.passive (index.js:78:80421)
at HTMLDivElement.o10 (index.js:74:5177)
at HTMLDivElement.r (sentry.service.js:5737:16)

and not sure how to procede. Can you help me with this?

Many thanks, Andraz

#2

Hi @andraz.leitgeb

Thank you for sharing your code snippet, however, please note that code review and support for custom solutions are included as part of our Priority or Enterprise Support Plan.

To assist you further, please send an email to support@handsontable.com with your license key, and we’ll be happy to review your code as part of the support service.

Let me know if you have any questions!

#3

Hi Aleksandra,

thanks for the quick reply. I’m using the “non-commercial-and-evaluation” key for this POC, since I’m trying to do a POC of how the custom headers would work in my case. Makes no sense for me to buy this before I can confirm it will be useful for my case.

Thanks for understanding, Andraz

#4

I understand your concerns, but since the code is open source, you can check error messages and dive into the codebase on GitHub. I recommend checking the code of updateCellHeader method at Reference: https://github.com/handsontable/handsontable/blob/3d1a0ea5cd1f69a9e52d2186b585d7e1794e4e6d/handsontable/src/tableView.js#L1394. The error message indicates that element is null so it is either an issue with the component lifecycle or the logic is applied incorrectly.

While we don’t provide code reviews as part of our pre-sales support, I recommend checking out our documentation and you can also explore similar topics on the forum and StackOverflow, which may provide additional insights.

#5

Hi Aleksandra,

I understand, thanks for the pointer, will check out the repo as well.

Wish you a great day, Andraz