Rightmost columns not visible in wide tables

[David-dp-]

I have one of these tables that is 1300px wide, and the rightmost columns aren't visible due to the overflow: hidden on the outermost div of the JsonTable render. There is no id nor class on this rendered div, so I can't override this style.

Can you suggest another way?

[David-dp-]

It appears that if I could set freezeHeader:true in table properties, then css class "scrollingtable" would be exposed:

ts-react-json-table/src/table.tsx

Line 29 in fb1d6dc

// return this.settings.freezeHeader ?

I happen to want sticky thead at top:0 anyway.

I tried:

let tableSettings = {freezeHeader: true}
return (
  (!this.state.loading) &&
  <>
    <JsonTable
      settings={tableSettings}

This does expose the scrollingtable className, but there is no noticeable freezeHeader behavior. So I added

.scrollingtable div {
overflow: visible;
}

to my existing

thead th {
position: sticky;
top: 0;
}

The overflow:hidden still overrode my overflow:visible, so I made mine !important

.scrollingtable div {
overflow: visible !important;
}

However, freezeHeader has an unacceptable side-effect of causing all the column header text to be duplicated. It causes a childless th to change to a th with a div child, and that child has two div's with the same text. The duplication seems intentional at

ts-react-json-table/src/table.tsx

Line 173 in fb1d6dc

// let content = this.props.settings.freezeHeader ? <div><div>{this.props.column.label}</div><div>{this.props.column.label}</div></div> : this.props.column.label;

but I don't have a guess why this is desirable.

I have ts-react-json-table@0.1.2

[agracio]

Not sure why its done that way, will have to look into it.

EDIT: This is based off this StackOverflow entry: https://stackoverflow.com/questions/15307135/freezing-fixing-the-top-header-row-of-a-table/25819112#25819112 and does require duplication. Take a look at your CSS there might be something interfering with default freezeHeader behavior.