diff --git a/packages/grafana-ui/src/components/Table/FilterableTableCell.tsx b/packages/grafana-ui/src/components/Table/FilterableTableCell.tsx index fa1962d5ba2..b15d98a8d13 100644 --- a/packages/grafana-ui/src/components/Table/FilterableTableCell.tsx +++ b/packages/grafana-ui/src/components/Table/FilterableTableCell.tsx @@ -1,10 +1,9 @@ import React, { FC, useCallback, useState } from 'react'; import { TableCellProps } from 'react-table'; import { GrafanaTheme } from '@grafana/data'; -import { css, cx } from 'emotion'; +import { css } from 'emotion'; import { stylesFactory, useTheme } from '../../themes'; -import { TableStyles } from './styles'; import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, TableFilterActionCallback } from './types'; import { Icon, Tooltip } from '..'; import { Props, renderCell } from './TableCell'; @@ -35,15 +34,10 @@ export const FilterableTableCell: FC = ({ [cell, field, onCellFilterAdded] ); const theme = useTheme(); - const styles = getFilterableTableCellStyles(theme, tableStyles); + const styles = getFilterableTableCellStyles(theme); return ( -
+
{renderCell(cell, field, tableStyles)} {showFilters && cell.value && (
@@ -63,15 +57,7 @@ export const FilterableTableCell: FC = ({ ); }; -const getFilterableTableCellStyles = stylesFactory((theme: GrafanaTheme, tableStyles: TableStyles) => ({ - tableCellWrapper: cx( - tableStyles.tableCellWrapper, - css` - display: inline-flex; - justify-content: space-between; - align-items: center; - ` - ), +const getFilterableTableCellStyles = stylesFactory((theme: GrafanaTheme) => ({ filterWrapper: css` label: filterWrapper; display: inline-flex; diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts index 8617145c0f4..87b08c76d9d 100644 --- a/packages/grafana-ui/src/components/Table/styles.ts +++ b/packages/grafana-ui/src/components/Table/styles.ts @@ -89,6 +89,8 @@ export const getTableStyles = stylesFactory( `, tableCellWrapper: css` border-right: 1px solid ${borderColor}; + display: inline-flex; + align-items: center; height: 100%; &:last-child { @@ -107,6 +109,7 @@ export const getTableStyles = stylesFactory( text-overflow: ellipsis; white-space: nowrap; overflow: hidden; + flex: 1; `, overflow: css` overflow: hidden;