Improve column sizing

Co-authored-by: Chris Henn <chris.henn@influxdata.com>
Co-authored-by: Andrew Watkins <andrew.watkinz@gmail.com>
pull/10616/head
Andrew Watkins 2018-05-24 13:18:31 -07:00
parent 7cad3357c4
commit 5e6f7d7484
1 changed files with 25 additions and 10 deletions

View File

@ -1,9 +1,12 @@
import React, {PureComponent} from 'react'
import {Grid, GridCellProps, AutoSizer} from 'react-virtualized'
import _ from 'lodash'
import {Grid, GridCellProps, AutoSizer, ColumnSizer} from 'react-virtualized'
import {ErrorHandling} from 'src/shared/decorators/errors'
import {ScriptResult} from 'src/types'
const TIME_COLUMN_WIDTH = 170
@ErrorHandling
export default class TimeMachineTable extends PureComponent<ScriptResult> {
public render() {
@ -13,22 +16,34 @@ export default class TimeMachineTable extends PureComponent<ScriptResult> {
<div style={{flex: '1 1 auto'}}>
<AutoSizer>
{({height, width}) => (
<Grid
className="table-graph--scroll-window"
cellRenderer={this.cellRenderer}
columnCount={data[0].length}
columnWidth={100}
height={height}
rowCount={data.length}
rowHeight={30}
<ColumnSizer
width={width}
/>
columnMinWidth={TIME_COLUMN_WIDTH}
columnCount={this.columnCount}
>
{({adjustedWidth, getColumnWidth}) => (
<Grid
className="table-graph--scroll-window"
cellRenderer={this.cellRenderer}
columnCount={this.columnCount}
columnWidth={getColumnWidth}
height={height}
rowCount={data.length}
rowHeight={30}
width={adjustedWidth}
/>
)}
</ColumnSizer>
)}
</AutoSizer>
</div>
)
}
private get columnCount(): number {
return _.get(this.props.data, '0', []).length
}
private cellRenderer = ({
columnIndex,
key,