Skip to content

Horizontal table scrolling #604

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
paulbrom wants to merge 2 commits into from
+37 −19
Closed

Horizontal table scrolling #604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
91f3b9d
Support for horizontal table scrolling
paulbrom Mar 3, 2017
4326e62
Fix unit test
paulbrom Mar 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions source/Table/Table.jest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -819,6 +819,7 @@ describe('Table', () => {
expect(onScrollCalls).toEqual([{
clientHeight: 80,
scrollHeight: 1000,
scrollLeft: 0,
scrollTop: 0
}])
})
Expand All @@ -838,6 +839,7 @@ describe('Table', () => {
expect(onScrollCalls[1]).toEqual({
clientHeight: 80,
scrollHeight: 1000,
scrollLeft: 0,
scrollTop: 100
})
})
Expand Down
54 changes: 35 additions & 19 deletions source/Table/Table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,9 +209,11 @@ export default class Table extends PureComponent {
super(props)

this.state = {
scrollbarWidth: 0
scrollbarWidth: 0,
headerRowTranslateX: 0
}

this._everScrolledX = false
this._createColumn = this._createColumn.bind(this)
this._createRow = this._createRow.bind(this)
this._onScroll = this._onScroll.bind(this)
Expand Down Expand Up @@ -268,7 +270,7 @@ export default class Table extends PureComponent {
style,
width
} = this.props
const { scrollbarWidth } = this.state
const { scrollbarWidth, headerRowTranslateX } = this.state

const availableRowsHeight = disableHeader ? height : height - headerHeight

Expand All @@ -277,7 +279,9 @@ export default class Table extends PureComponent {

// Precompute and cache column styles before rendering rows and columns to speed things up
this._cachedColumnStyles = []
let totalColumnWidth = 0
React.Children.toArray(children).forEach((column, index) => {
totalColumnWidth += column.props.width
const flexStyles = this._getFlexStyleForColumn(column, column.props.style)

this._cachedColumnStyles[index] = {
Expand All @@ -303,7 +307,8 @@ export default class Table extends PureComponent {
height: headerHeight,
overflow: 'hidden',
paddingRight: scrollbarWidth,
width: width
width: width,
transform: `translate(${headerRowTranslateX}px, 0px)`
}}
>
{this._getRenderedHeaderRow()}
Expand All @@ -315,7 +320,7 @@ export default class Table extends PureComponent {
autoContainerWidth
className={cn('ReactVirtualized__Table__Grid', gridClassName)}
cellRenderer={this._createRow}
columnWidth={width}
columnWidth={totalColumnWidth}

@bvaughn bvaughn Mar 4, 2017 •
edited
Loading

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should prob be Math.max(width, totalColumnWidth) no? Since Table columns are supposed to grow to fit. (Would you ever want your row filling up only part of the width of your table?)

@bvaughn bvaughn Mar 4, 2017

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Otherwise tables may end up looking like the demo site does now (with this branch):
screen shot 2017-03-04 at 9 37 21 am

@paulbrom paulbrom Mar 6, 2017

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, you are right. We'll change that on our side.

columnCount={1}
height={availableRowsHeight}
id={undefined}
Expand All @@ -325,10 +330,7 @@ export default class Table extends PureComponent {
ref={this._setRef}
scrollbarWidth={scrollbarWidth}
scrollToRow={scrollToIndex}
style={{
...gridStyle,
overflowX: 'hidden'
}}
style={gridStyle}
/>
</div>
)
Expand Down Expand Up @@ -461,22 +463,27 @@ export default class Table extends PureComponent {
const rowStyleObject = typeof rowStyle === 'function' ? rowStyle({ index }) : rowStyle
const rowData = rowGetter({ index })

let rowWidth = 0
const columns = React.Children.toArray(children).map(
(column, columnIndex) => this._createColumn({
column,
columnIndex,
isScrolling,
parent,
rowData,
rowIndex: index,
scrollbarWidth
})
(column, columnIndex) => {
rowWidth += column.props.width
return this._createColumn({
column,
columnIndex,
isScrolling,
parent,
rowData,
rowIndex: index,
scrollbarWidth
})
}
)

const className = cn('ReactVirtualized__Table__row', rowClass)
const flattenedStyle = {
...style,
...rowStyleObject,
width: rowWidth,
height: this._getRowHeight(index),
overflow: 'hidden',
paddingRight: scrollbarWidth
Expand Down Expand Up @@ -538,10 +545,19 @@ export default class Table extends PureComponent {
: rowHeight
}

_onScroll ({ clientHeight, scrollHeight, scrollTop }) {
_onScroll ({ clientHeight, scrollHeight, scrollLeft, scrollTop }) {
const { onScroll } = this.props

onScroll({ clientHeight, scrollHeight, scrollTop })
onScroll({ clientHeight, scrollHeight, scrollLeft, scrollTop })

// if horizontal scroll, adjust table header translation so it will "scroll" with the grid
if ((scrollLeft > 0) || this._everScrolledX) {
this._everScrolledX = true

this.setState({
headerRowTranslateX: -scrollLeft
})
}
}

_onSectionRendered ({ rowOverscanStartIndex, rowOverscanStopIndex, rowStartIndex, rowStopIndex }) {
Expand Down