renderTableHead()

in packages/eui/src/components/basic_table/basic_table.tsx [736:858]


  renderTableHead() {
    const { columns, selection } = this.props;

    const headers: ReactNode[] = [];

    if (selection) {
      headers.push(
        <EuiTableHeaderCellCheckbox
          key="_selection_column_h"
          append={this.renderCopyChar(-1)}
        >
          {this.renderSelectAll(false)}
        </EuiTableHeaderCellCheckbox>
      );
    }

    columns.forEach((column: EuiBasicTableColumn<T>, index: number) => {
      const {
        field,
        width,
        name,
        nameTooltip,
        align,
        dataType,
        sortable,
        mobileOptions,
        readOnly,
        description,
      } = column as EuiTableFieldDataColumnType<T>;

      const columnAlign = align || this.getAlignForDataType(dataType);

      const sharedProps = {
        width,
        tooltipProps: nameTooltip,
        description,
        mobileOptions,
        align: columnAlign,
        append: this.renderCopyChar(index),
      };

      // actions column
      if ((column as EuiTableActionsColumnType<T>).actions) {
        headers.push(
          <EuiTableHeaderCell
            {...sharedProps}
            key={`_actions_h_${index}`}
            align="right"
          >
            {name}
          </EuiTableHeaderCell>
        );
        return;
      }

      // computed column
      if (!(column as EuiTableFieldDataColumnType<T>).field) {
        const sorting: SortOptions = {};
        // computed columns are only sortable if their `sortable` is a function
        if (this.props.sorting && typeof sortable === 'function') {
          const sortDirection = this.resolveColumnSortDirection(column);
          sorting.isSorted = !!sortDirection;
          sorting.isSortAscending = sortDirection
            ? SortDirection.isAsc(sortDirection)
            : undefined;
          sorting.onSort = this.resolveColumnOnSort(column);
          sorting.readOnly = this.props.sorting.readOnly || readOnly;
        }
        headers.push(
          <EuiTableHeaderCell
            {...sharedProps}
            key={`_computed_column_h_${index}`}
            data-test-subj={`tableHeaderCell_${
              typeof name === 'string' ? name : ''
            }_${index}`}
            {...sorting}
          >
            {name}
          </EuiTableHeaderCell>
        );
        return;
      }

      // field data column
      const sorting: SortOptions = {};
      if (this.props.sorting) {
        if (
          this.props.sorting.sort &&
          !!this.props.sorting.enableAllColumns &&
          (column as EuiTableFieldDataColumnType<T>).sortable == null
        ) {
          column = {
            ...(column as EuiTableFieldDataColumnType<T>),
            sortable: true,
          };
        }

        const { sortable } = column as EuiTableFieldDataColumnType<T>;

        if (sortable) {
          const sortDirection = this.resolveColumnSortDirection(column);
          sorting.isSorted = !!sortDirection;
          sorting.isSortAscending = sortDirection
            ? SortDirection.isAsc(sortDirection)
            : undefined;
          sorting.onSort = this.resolveColumnOnSort(column);
          sorting.readOnly = this.props.sorting.readOnly || readOnly;
        }
      }
      headers.push(
        <EuiTableHeaderCell
          {...sharedProps}
          key={`_data_h_${String(field)}_${index}`}
          data-test-subj={`tableHeaderCell_${String(field)}_${index}`}
          {...sorting}
        >
          {name}
        </EuiTableHeaderCell>
      );
    });

    return <EuiTableHeader>{headers}</EuiTableHeader>;
  }