diff --git a/src/components/datagrid/_data_grid_header_row.scss b/src/components/datagrid/_data_grid_header_row.scss index 658ec05c6ae..09d1a09d56c 100644 --- a/src/components/datagrid/_data_grid_header_row.scss +++ b/src/components/datagrid/_data_grid_header_row.scss @@ -39,10 +39,19 @@ // We only truncate if the cell is not a control column. &:not(.euiDataGridHeaderCell--controlColumn) { + .euiDataGridHeaderCell__content { @include euiTextTruncate; overflow: hidden; white-space: nowrap; + flex-grow: 1; + } + + .euiDataGridHeaderCell__popover { + flex-grow: 0; + flex-basis: auto; + width: auto; + padding-left: $euiSizeXS; } } } diff --git a/src/components/datagrid/data_grid_header_cell.tsx b/src/components/datagrid/data_grid_header_cell.tsx index 1b4995dd2c8..71ab0c6a9bd 100644 --- a/src/components/datagrid/data_grid_header_cell.tsx +++ b/src/components/datagrid/data_grid_header_cell.tsx @@ -11,6 +11,9 @@ import classnames from 'classnames'; import { EuiDataGridHeaderRowPropsSpecificProps } from './data_grid_header_row'; import { keyCodes } from '../../services'; import { EuiDataGridColumnResizer } from './data_grid_column_resizer'; +import { EuiPopover } from '../popover/popover'; +import { EuiListGroup } from '../list_group/list_group'; +import { EuiIcon } from '../icon/icon'; import { EuiScreenReaderOnly } from '../accessibility'; import tabbable from 'tabbable'; import { EuiDataGridColumn } from './data_grid_types'; @@ -90,6 +93,7 @@ export const EuiDataGridHeaderCell: FunctionComponent< const isFocused = focusedCell != null && focusedCell[0] === index && focusedCell[1] === -1; const [isCellEntered, setIsCellEntered] = useState(false); + const [isPopoverOpen, setIsPopoverOpen] = useState(false); useEffect(() => { if (headerRef.current) { @@ -213,6 +217,47 @@ export const EuiDataGridHeaderCell: FunctionComponent< } }, [headerIsInteractive, isFocused, setIsCellEntered, setFocusedCell, index]); + console.log(schema); + + const columnOptions = [ + { + label: 'Hide column', + href: '#/display/list-group', + iconType: 'eyeClosed', + size: 'xs', + color: 'text', + }, + { + label: 'Sort schema asc', + href: '#/display/list-group', + isActive: true, + iconType: 'sortUp', + size: 'xs', + color: 'text', + }, + { + label: 'Sort schema desc', + href: '#/display/list-group', + iconType: 'sortDown', + size: 'xs', + color: 'text', + }, + { + label: 'Move left', + href: '#/display/list-group', + iconType: 'sortLeft', + size: 'xs', + color: 'text', + }, + { + label: 'Move right', + href: '#/display/list-group', + iconType: 'sortRight', + size: 'xs', + color: 'text', + }, + ]; + return (
{sortString}
)} + setIsPopoverOpen(true)}> + + + } + isOpen={isPopoverOpen} + closePopover={() => setIsPopoverOpen(false)}> +
+ +
+
); };