React-table: Vertical scrollbar visibility

[golan4ik]

[email protected]

When table has a horizontal scroll, the vertical scrollbar is visible only AFTER we scroll horizontally to the end.

Is it possible to place a vertical scroll in such way that it will be visible always without need to scroll to it ?
I know it's related to overflows of '.rt-tbody' and '.rt-table' elements, or maybe add some custom component, but this looks such burden.

[hellovietnam93]

I have the same problem

[binaryj]

I have figured out a work around for this issue.

My setup:
I have a wrapper component that will create a ReactTable and manage the data used to populate the table. I am using the wrapper to pass in different options and to wrap my APIs I am making using axios. One option I can pass to the wrapper is a value representing a fixed height in pixels. I use this value to determine if I need to pass a style with the height set to the component. Once I did this, I noticed that the vertical scrollbar was always hidden all the way to the right due to the way overflows are working with ReactTable. The solution involves a little bit of css overriding and some code in the componentDidMount() and componentDidUpdate() lifecycle functions of my wrapper component along with adding a ref to the ReactTable component.

CSS:

.fixed-height-data-table {
  .rt-table {
    overflow: hidden !important;

    .rt-tbody {
      min-width: 0px !important;
    }
    .rt-thead {
      min-width: 0px !important;
      overflow: hidden !important;
    }
  }
}
.vertical-scrollbar-present {
  width: calc(100% - 15px) !important;
}

Code:
The following code sections are all within my wrapper component.

This just adds the ref prop so we can easily reference this particular ReactTable element.

<ReactTable
   ...{all my other props}
   ref={(element) => { this.dataTableElement = element; }}
/>

This is adding an event listener to fix the horizontal/vertical scrolling. Without this, the horizontal scrollbar is placed on the parent container for the header and body while the vertical scrollbar is placed on the body, which causes the vertical scrollbar to be hidden out of view until you horizontally scroll all the way to the right.

public componentDidMount(): void {
   let thead = ReactDOM.findDOMNode(this.dataTableElement).getElementsByClassName("rt-thead")[0];
   let tbody = ReactDOM.findDOMNode(this.dataTableElement).getElementsByClassName("rt-tbody")[0];

   tbody.addEventListener("scroll", () => {
      thead.scrollLeft = tbody.scrollLeft;
   });
}

This checks after every update to the table data to make sure our vertical-scrollbar-present class is still needed. This class will allow for the additional width to the header that's needed in case of a vertical scrollbar. Without this the header will become unaligned when the scrollbar is present. It is removed when the vertical scrollbar is not present.

public componentDidUpdate(): void {
   let thead = ReactDOM.findDOMNode(this.dataTableElement).getElementsByClassName("rt-thead")[0];
   let tbody = ReactDOM.findDOMNode(this.dataTableElement).getElementsByClassName("rt-tbody")[0];

   if (tbody.scrollHeight > tbody.clientHeight) {
      thead.classList.add("vertical-scrollbar-present");
   }
   else {
      thead.classList.remove("vertical-scrollbar-present");
   }
}

I currently have a table setup with stuff like pagination through an API, column sorting and column resizing, so I know all these features still work just fine with these changes. I'm not sure, however, if this works with a subtable or any other features. These are pretty simple changes that I made, so I wouldn't think these break anything. Hope this helps any one experiencing this issue until it is later reworked/fixed in the ReactTable code itself.

[tannerlinsley]

Thanks for your input! We will consider your suggestions.

[NullIsNot0]

Will this be implemented?

[gary-menzel]

I would say: "Not in the short/medium term" for several (possibly more) reasons:

1. It would then require an additional dependency on ReactDOM. Currently that is not required at all for ReactTable as it is a purely React-only implementation.
2. It can (clearly) be done as a wrapper around ReactTable (as the original poster indicated)
3. There is a background discussion on a completely revised version of ReactTable that may resolve the problem in a more generic way.

[Kafkalasch]

here is a minor fix to binaryj's solution if you are using filters (ReactTable.filterable = true):

public componentDidMount(): void {
        let theads = ReactDOM.findDOMNode(this.dataTableElement).getElementsByClassName("rt-thead");
        let tbody = ReactDOM.findDOMNode(this.dataTableElement).getElementsByClassName("rt-tbody")[0];

        tbody.addEventListener("scroll", () => {
            for (let i = 0; i < theads.length; i++) {
                theads.item(i).scrollLeft = tbody.scrollLeft;
            }
        });
    }

    public componentDidUpdate(): void {
        let theads = ReactDOM.findDOMNode(this.dataTableElement).getElementsByClassName("rt-thead");
        let tbody = ReactDOM.findDOMNode(this.dataTableElement).getElementsByClassName("rt-tbody")[0];

        if (tbody.scrollHeight > tbody.clientHeight) {
            for (let i = 0; i < theads.length; i++) {
                theads.item(i).classList.add("vertical-scrollbar-present");
            }
        }
        else {
            for (let i = 0; i < theads.length; i++) {
                theads.item(i).classList.remove("vertical-scrollbar-present");
            }
        }
    }

You just need to make sure, you take care of every "rt-thead" element and not just the first one.

[Anirie]

React-table @ 6.7.1
I used binaryj's solution together with the filter-fix.

Now the following issue occurres: When I scroll to the right, the layout (boarderlines, backgroundcolour, etc.) of my rows are not drawn till the end of the table.
I took an react-table example and modified it. Here is the code for reproduction:
https://codesandbox.io/embed/mo3q2q8l18

And a screenshot:

Do you have an idea what goes wrong?
Thank you for your help.

[fernandocvlopes]

Hello @Anirie, Did you find a solution? I did as you and binarij suggested and I got the same issue as you.
Thank you!

[Anirie]

Hello @fernandocvlopes , unfortunately I didn't get an answer and by now I couldn't find a solution on my own. Please tell me if you found a solution to the problem.Thanks!

[wwjd228]

Hi @Anirie @fernandocvlopes, you need to check the width of ".ReactTable .rt-tbody .rt-tr-group"
I use your demo code and set the width to 1500px in ".ReactTable .rt-tbody .rt-tr-group", then the issue is gone.

[Anirie]

Hi @wwjd228,
thank you for your hint. I can see that the issue is gone for this particular table, but if I change, for example, the column widths of the table, it's all the same as before. I think I have to calculate the value for the width and don't set it to a fixed value ( 1500px) but I don't know how.

[wwjd228]

Hi @Anirie
The demo table is in "div, /div", it belong to block.
Just try "display:block; margin-left:auto; margin-right: auto;" (that provided by [https://stackoverflow.com/questions/1359025/css-layout-dynamic-width-div]) can also fit the table.
I modify the demo code to below:
.ReactTable .rt-tbody .rt-tr-group{
border-bottom: solid 1px rgba(0, 0, 0, 0.14) !important;
display:block; margin-left:auto; margin-right: auto;
}
Then is also fit the table without set it to fixed value.

[gslvpavan89]

simply adding below code solved issue
.ReactTable .rt-tbody{
overflow: initial !important;
}

[Anirie]

Hi everyone,
Thank you for your answers.

@gslvpavan89 Your suggestion removes all the scrollbars, therfore its not a suitable solution for my usecase.

@wwjd228
you are right, modifying my demo code as you suggested works fine, but if I try to use your code snippet for my application it breaks everything:

[zenimdoyal]

.ReactTable .rt-body{
overflow:overlay;
}
This puts the scroll bar on top of the table and does not disrupt the columns.

[simonterrywatson]

Hi @Anirie

I had the same issue with this as you, but I found a solution. The problem arises because of the following.

The original solution works because it causes the width of the rt-header and rt-body containers to be limited to the size of the rt-table element and moves overflow responsibility from the rt-table element to the rt-body element. This ensures that the right hand scrollbar is always present.

The rt-td elements overflow and thus the horizontal scrollbar is used to bring the overflowing content into view.

However, the rt-tr elements end up being the same width as the rt-body and rt-header containers and these rt-tr elements are where the styling sits.

The trick is to _move_ the min-width (which is set dynamically as column headers are resized) from the rt-body and rt-header to the rt-tr elements instead.

I added the following to the JSX to achieve this. This is an addition to the rest of the solution.

...
getTrProps={ state => ({ style: { minWidth: state.rowMinWidth } }) }
getTheadTrProps={ state => ({ style: { minWidth: state.rowMinWidth } }) }
....
/>

This is only possible because react-table provides such fine grained ability to customise, which is great.

Hope that helps.

[northeda]

@zenimdoyal's CSS rule worked for me, but I had to tweak the CSS class name slightly:

.rt-body -> .rt-tbody

.ReactTable .rt-tbody {
    overflow: overlay;
}

You might also try overflow: initial; if overlay does not work for you.

[ankita2110]

Can we use only property of getTrProps getTheadProps of react table to solve the above issue.