CODEWITHSUNDEEP
javascriptreactjsreact-virtualized
smuggledPancakes
smuggledPancakes

Reputation: 10323

Ternary operator on autoHeight for VirtualizedTable

I am stuck on how to make a Virtualized Table using the Autosizer to shrink to the smallest possible height until a certain maximum threshold.

Is there a way to convert my autoHeight to use a conditional value?

autoheight={height<500}

Here is my render function:

 render(): ?React$Element<any> {
    const { columns, selectedItems, rulesList } = this.state;
    const { shouldRender, currentRule, sort } = this.props;

    if (!shouldRender) return <div />;

    return (
      <Grid columns={1} id="rulesTabContent">
        <Grid.Row style={NO_PADDING_BOTTOM}>
          <Grid.Column>
            <VirtualizedTable
              id="rulesTable"
              autoHeight={true}
              height={500}
              rowDef={rowDef => this.rowDef(rowDef, currentRule.id)}
              onRowDoubleClick={this.checkExpanded}
              columns={columns}
              sortVals={sort}
              setSort={this.updateSort}
              sortFn={this.sortFunc}
              getRowHeight={rowHeight}
              noRowsRenderer={this.noRowsRenderer}
              rowCount={rulesList.length}
              setSelectedItems={this.setSelectedItems}
              selectedItems={selectedItems}
              list={rulesList}
            />
          </Grid.Column>
        </Grid.Row>
      </Grid>
    );
  }

Here is the render function of VirtualizedTable, which is used above:

 import {
  AutoSizer,
  Table,
  Column,
  SortIndicator,
  SortDirection
} from "react-virtualized";

.
.
.

render() {
   const {
      list,
      sortVals,
      onRowClick,
      onRowsRendered,
      noRowsRenderer,
      getRowHeight,
      columns,
      onRefresh,
      ...restOfProps
    } = this.props;

    return (
      <AutoSizer disableHeight>
        {({ width }) => (
          <Table
            headerClassName="virtualized-header"
            headerHeight={HEADER_HEIGHT}
            rowHeight={getRowHeight ? this._rowHeight : DEFAULT_ROW_HEIGHT}
            overscanRowCount={OVERSCAN}
            width={width}
            sort={this._sort}
            sortBy={sortVals.by}
            sortDirection={sortVals.direction}
            rowCount={list.size}
            noRowsRenderer={this._noRows}
            rowGetter={this._getRow}
            rowClassName={this._getRowClassName}
            rowRenderer={this._renderRow}
            onRowsRendered={this._onRowsRendered}
            onRowClick={this._onRowClick}
            {...restOfProps}
          >
            {Array.isArray(columns)
              ? columns
              : Object.keys(columns).map(key => columns[key])}
          </Table>
        )}
      </AutoSizer>
    );
  }
}

Upvotes: 1

Views: 278

Answers (2)

Austin Greco
Austin Greco

Reputation: 33544

It's hard to debug without a demo, but maybe something like this?

return (
  <AutoSizer>
    {({ width, height }) => (
      <Table
        height={height}
        ...

-

<VirtualizedTable
  id="rulesTable"
  autoHeight={height < 500}
  height={Math.min(height, 500)}

Upvotes: 1

Gavin Thomas
Gavin Thomas

Reputation: 1867

A little more info, are you looking for this?

style={{height: 'auto', max-height: '500px', overflow: 'scroll'})


this.state = {
autoHeight: {overflowX: 'hidden'},
}

{rulesList.length < 50 ? this.setState({autoHeight: {overFlowX: 'hidden'}}) : this.setState({autoHeight: overFlowX: 'scroll'}) }

From the Devs...

    style={{
    overflowX: 'hidden',
    overflowY: 'hidden'
  }}

So you would need to add a style that looks something like this.

style={this.state.autoHeight}

Heres a closed issue on the topic https://github.com/bvaughn/react-virtualized/issues/488

Upvotes: 0

Related Questions