render()

in src/draft-components/gridv2/grid.tsx [167:254]
86 lines of code
9 McCabe index (conditional complexity)

  render() {
    const {
      columns = [],
      description,
      editable,
      gridType = 'table',
      headerActionsMenu,
      rowSelection,
      selectedRows,
      sortedCells = [],
      sortedColumn,
      sortState
    } = this;
    const rowSelectionState = this.getSelectionState();
    const activeCellId = this.activeCell.join('-');
    const colOffset = rowSelection === RowSelectionPattern.Checkbox ? 1 : 0;

    return <table role={gridType} class="grid" aria-labelledby={this.labelledBy} aria-readonly={editable ? null : 'true'} onKeyDown={this.onCellKeydown.bind(this)}>
      {description ? <caption>{description}</caption> : null}
      <thead role="rowgroup" class="grid-header">
        <tr role="row" class="row">
          {rowSelection !== RowSelectionPattern.None ?
            <th
              role="columnheader"
              aria-labelledby="select-all-header"
              class={{'checkbox-cell': true, 'indeterminate': rowSelectionState === 'indeterminate'}}
            >
              <span class="visuallyHidden" id="select-all-header">select row</span>
              <input
                type="checkbox"
                aria-label="select all rows"
                checked={!!rowSelectionState}
                tabIndex={this.gridType === 'grid' ? activeCellId === '0-0' ? 0 : -1 : null}
                ref={(el) => {
                  if (rowSelectionState === 'indeterminate') {
                    el.indeterminate = true;
                  }
                  if (activeCellId === '0-0') {
                    this.focusRef = el;
                  }
                }}
                onChange={(event) => this.onSelectAll((event.target as HTMLInputElement).checked)} />
              <span class="selection-indicator"></span>
            </th>
          : null}
          {columns.map((column, index) => {
            const headerIndex = index + colOffset;
            return renderHeaderCell({
              column,
              colIndex: headerIndex,
              actionsMenu: headerActionsMenu,
              isActiveCell: activeCellId === `${headerIndex}-0`,
              isSortedColumn: sortedColumn === headerIndex,
              setFocusRef: (el) => this.focusRef = el,
              sortDirection: sortState,
              onSort: this.onSortColumn.bind(this),
              onFilter: this.onFilterInput.bind(this)
            });
          })}
        </tr>
      </thead>
      <tbody role="rowgroup" class="grid-body">
        {sortedCells.map((cells = [], index) => {
          const isSelected = !!selectedRows.get(cells);
          let rowOptions: RowOptions = {
            cells,
            index: index + 1,
            isSelected,
            selection: rowSelection,
            renderCell: this.renderCell.bind(this),
            renderCheckboxCell: this.renderCheckboxCell.bind(this),
            onSelectionChange: this.onRowSelect.bind(this)
          };

          if (this.rowSelection === RowSelectionPattern.Aria) {
            const isActiveRow = this.activeCell[1] === index + 1;
            rowOptions = {
              ...rowOptions,
              isActiveRow,
              setFocusRef: (el) => this.focusRef = el,
              onRowKeyDown: this.onRowKeyDown.bind(this)
            }
          }
          return renderRow(rowOptions);
        })}
      </tbody>
    </table>;
  }