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>;
}