Method render

source/Table/Table.js:359–747

()

  }

  render() {
    const {
      children,
      className,
      disableHeader,
      gridClassName,
      gridStyle,
      headerHeight,
      headerRowRenderer,
      height,
      id,
      noRowsRenderer,
      rowClassName,
      rowStyle,
      scrollToIndex,
      style,
      width,
    } = this.props;
    const {scrollbarWidth} = this.state;

    const availableRowsHeight = disableHeader ? height : height - headerHeight;

    const rowClass =
      typeof rowClassName === 'function'
        ? rowClassName({index: -1})
        : rowClassName;
    const rowStyleObject =
      typeof rowStyle === 'function' ? rowStyle({index: -1}) : rowStyle;

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

      this._cachedColumnStyles[index] = {
        overflow: 'hidden',
        ...flexStyles,
      };
    });

    // Note that we specify :rowCount, :scrollbarWidth, :sortBy, and :sortDirection as properties on Grid even though these have nothing to do with Grid.
    // This is done because Grid is a pure component and won't update unless its properties or state has changed.
    // Any property that should trigger a re-render of Grid then is specified here to avoid a stale display.
    return (
      <div
        aria-label={this.props['aria-label']}
        aria-labelledby={this.props['aria-labelledby']}
        aria-colcount={React.Children.toArray(children).length}
        aria-rowcount={this.props.rowCount}
        className={clsx('ReactVirtualized__Table', className)}
        id={id}
        role="grid"
        style={style}>
        {!disableHeader &&
          headerRowRenderer({