Height of resize line on DataTable

[hennievw]

When you provide a header area for a DataTable and you resize a column, the line that it renders to indicate the size overlaps the header area. Is there any way to only limit it to the actual column/rows area?

[qwadrox]

@hennievw
You can write some ugly javascript code maybe:

https://stackblitz.com/edit/brwhrx?file=src%2FApp.jsx

const resizeResizer = (event) => {
    const innerTableHeight = document.getElementsByClassName(
      'p-datatable-wrapper'
    )[0]?.offsetHeight;

    if (innerTableHeight) {
      // Create a new style element
      const style = document.createElement('style');
      style.type = 'text/css';

      // Define the new CSS rule with the additional height
      const newHeightRule = `
            .p-column-resizer-helper {
                height: ${innerTableHeight}px !important;
                bottom: 0 !important;
                top: unset !important;
            }
        `;

      // Append the rule to the style element
      style.appendChild(document.createTextNode(newHeightRule));

      // Append the style element to the head of the document
      document.head.appendChild(style);
    }
  };

Or if you have a defined number of rows in advance, maybe you can play with the CSS:

.mytable > [class~='p-column-resizer-helper'] {
  height: 90% !important;
  bottom: 0 !important;
  top: unset !important;
}

This is whats happening internally: const onColumnResize = (event) => {
It sets the height of the resizer based on the primary div of the table.

[hennievw]

Thanks for the response