Improve column sizing
Co-authored-by: Chris Henn <chris.henn@influxdata.com> Co-authored-by: Andrew Watkins <andrew.watkinz@gmail.com>pull/10616/head
parent
7cad3357c4
commit
5e6f7d7484
|
@ -1,9 +1,12 @@
|
||||||
import React, {PureComponent} from 'react'
|
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 {ErrorHandling} from 'src/shared/decorators/errors'
|
||||||
import {ScriptResult} from 'src/types'
|
import {ScriptResult} from 'src/types'
|
||||||
|
|
||||||
|
const TIME_COLUMN_WIDTH = 170
|
||||||
|
|
||||||
@ErrorHandling
|
@ErrorHandling
|
||||||
export default class TimeMachineTable extends PureComponent<ScriptResult> {
|
export default class TimeMachineTable extends PureComponent<ScriptResult> {
|
||||||
public render() {
|
public render() {
|
||||||
|
@ -13,22 +16,34 @@ export default class TimeMachineTable extends PureComponent<ScriptResult> {
|
||||||
<div style={{flex: '1 1 auto'}}>
|
<div style={{flex: '1 1 auto'}}>
|
||||||
<AutoSizer>
|
<AutoSizer>
|
||||||
{({height, width}) => (
|
{({height, width}) => (
|
||||||
<Grid
|
<ColumnSizer
|
||||||
className="table-graph--scroll-window"
|
|
||||||
cellRenderer={this.cellRenderer}
|
|
||||||
columnCount={data[0].length}
|
|
||||||
columnWidth={100}
|
|
||||||
height={height}
|
|
||||||
rowCount={data.length}
|
|
||||||
rowHeight={30}
|
|
||||||
width={width}
|
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>
|
</AutoSizer>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private get columnCount(): number {
|
||||||
|
return _.get(this.props.data, '0', []).length
|
||||||
|
}
|
||||||
|
|
||||||
private cellRenderer = ({
|
private cellRenderer = ({
|
||||||
columnIndex,
|
columnIndex,
|
||||||
key,
|
key,
|
||||||
|
|
Loading…
Reference in New Issue