Html5Table alignment when scrollbar appears

[realdreamer]

When the content is more than table height, scrollbar appears for the table body, then it breaks the alignment with table-header and table-body. You can see this issue in the document example itself. https://window-table.netlify.com/#blazing-fast-

[grgp]

@realdreamer I've also found this issue as well.

If you simply need a quick and dirty hack to align the header columns, though, you can set the HeaderRow component to have a overflow-y: scroll; style.

[pupudu]

Hi @realdreamer
Thanks for reporting this issue.
I didn't see this issue coming as MacOs scrollbars don't occupy extra width from the table. I played with the table on Windows and acknowledge the issue. So far, the easiest way to fix this is by using @grgp s workaround. That is a simple and powerful solution.

Another possibility is to change the width of the header based on the size of the scrollbar. For example, if the scrollbar is 8px wide, the header size would be 100%-8px. I will make a PR and send it to you guys to review.

Thanks for getting involved

[TheOrphan]

Or you can add to your CSS file

// mention on https://window-table.netlify.com/docz-guides-styling-styling-with-class-names
// this default classname for table header row
.table-header-row { 
    width : calc( 100% - 8px); // if 8px is your scroll width 
}

[TheOrphan]

Well, I'm trying to set width -8px only if the table has a scrollbar.

// for SSR need useEffect to get the document
useEffect(() => {
    let tableHeader = getElementsByClassName(document.body, "table-header-row");
    let tableBody = getElementsByClassName(document.body, "table-body");
    if (tableBody[1]) {
      if (tableBody[1].childNodes[0]) {
        const rowHeight = tableBody[1].childNodes[0].offsetHeight;
        const rows = arrayData.length; 
        const bodyHeight = rowHeight * rows; // expected total body height
        const scrolly = scroll.y; // height of table
        if (bodyHeight > scrolly) {
          tableHeader[1].style.width = "calc(100% + -8px)"; //-8px is scroll width
        }
      }
    }
  }, [arrayData, columns]); // add more second arguments for rechecking if the table has a scrollbar or not

// IE compatible for getting ClassName
function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp("(^| )" + classname + "( |$)");
    var els = node.getElementsByTagName("*");
    for (var i = 0, j = els.length; i < j; i++ ) {
      if (re.test(els[i].className)) { 
          a.push(els[i]);
      }
    }
    return a;
}

[realdreamer]

@Joiel I liked the above one, but I'm little concerned about using direct class names instead of using ref. I tried to pass ref on table header and table body component. But, no help, incase if you've any idea please let me know.

[realdreamer]

@Joiel @pupudu - Thank you for your input guys 👍 . But, I'm looking to solve it in a better way and also wanna fix the scrollbar issue on the header only if the body have scrollbar.

I tried the below approach, but I'm having a problem with the two table-body elements - one is actually the dummy with the hidden state and another one with the actual data.

const tableRef = useRef(null);
const tableHeaderRef = useRef(null);
const tableBodyRef = useRef(null);

useEffect(() => {
    const tableEl = tableRef.current;
    const tableHeaderEl = tableHeaderRef.current;
    const tableBodyEl = tableBodyRef.current;

    if (tableEl && tableHeaderEl && tableBodyEl) {
      const containerHeight = tableEl?.getBoundingClientRect().height;
      const headerHeight = tableHeaderEl?.getBoundingClientRect().height;
      const bodyHeight = tableBodyEl?.getBoundingClientRect().height;

      if (containerHeight < (headerHeight + bodyHeight)) {
        const scrollbarWidth = tableHeaderEl.offsetWidth - tableBodyEl.offsetWidth;
        tableHeaderEl.parentElement.style.width = `calc(100% - ${scrollbarWidth}px)`;
      }
    }
  }, [data, tableRef, tableHeaderRef, tableBodyRef]);

<WindowTable
        Header={props => <thead {...props} ref={tableHeaderRef} />}
        Body={props => <tbody {...props} ref={tableBodyRef} />}
        Cell={CellComponent}
        classNamePrefix={classNamePrefix}
        columns={columns}
        data={data}
        id="chart-data-table"
        Row={RowComponent}
        width="100%"
      />

[pupudu]

@realdreamer @grgp @Joiel
Thanks for getting involved. I just published version 0.10.5-alpha.1 with an inbuilt fix for the issue. The solution is working pretty well in the website examples. But I would like to get your input to verify it's working for you before we publish v0.10.5.

With this, temporary solutions like forced scrollbars in header and using css classes to change header size will slightly break the UI. The solution for those problems would be to simply remove those temporary workarounds.

Let me know your thoughts. Cheers 👍

[realdreamer]

@pupudu I'm still facing the issues with scrollbar even with 0.10.5-alpha.1 version

[pupudu]

@realdreamer That's sad. Could you give a bit more information about the issue pls?

1. Do you see the same issue in the website example?
2. Or is it in one of your own use cases?

In either case, it would cool if you could attach a screenshot, (and/or) provide a sandbox to reproduce the issue.

Many thanks,

[tomgallagher]

I can see this scroll bar problem as fixed when content is more than table height, but offset when content is less than table height. Matching the sandbox.

I'm on Windows / Chrome, 0.10.5-alpha.1 version

[gabrielbezerra81]

I solved this by adding what @Joiel said and adding a margin to last td of each row in table-body if the the tableData has less than 10 lines. I pass "marginSmallTableData" class as prop to custom Td.

.table-header-row { width: calc(100% - 12px) !important; }

.marginSmallTableData.td:last-child { margin-right: 12px; }

[andrew-mclachlan]

I too am seeing this issue. It sometimes works but sometimes does not. I think updating the CSS for the header row is probably the easiest work around.

[andrew-mclachlan]

Basically seeing that the resize width is 0 calc(100% - 0px) despite the fact that the div containing the table rows has a scroll bar added. I can see that the widths are adjusted to be the same which implies that we haven't detected the difference in width for some reason.