Skip to content

[Discover][Flyout] Update overview fields table with new prop headerVisibility set to false #260692

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tfcmarques merged 2 commits into from
Apr 2, 2026
Merged

[Discover][Flyout] Update overview fields table with new prop headerVisibility set to false #260692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8d83b32
add header visibility prop
tfcmarques Apr 1, 2026
c6bf24b
remove unnecessary custom bottom padding on traces table + allow cell…
tfcmarques Apr 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ...orm/plugins/shared/unified_doc_viewer/public/components/content_framework/table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,7 @@ export function ContentFrameworkTable({
customRenderCellValue={cellValueRenderer}
customRenderCellPopover={cellPopoverRenderer}
gridStyle={{ stripes: false, rowHover: 'none', header: 'shade' }}
headerVisibility={false}
/>
</div>
);
Expand Down
19 changes: 19 additions & 0 deletions ...tform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table_grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ export interface TableGridProps {
customRenderCellValue?: RenderCellValue;
customRenderCellPopover?: React.JSXElementConstructor<EuiDataGridCellPopoverElementProps>;
gridStyle?: EuiDataGridStyle;
headerVisibility?: boolean;
hideFilteringOnComputedColumns?: boolean;
}

Expand Down Expand Up @@ -107,6 +108,7 @@ export function TableGrid({
customRenderCellValue,
customRenderCellPopover,
gridStyle,
headerVisibility,
hideFilteringOnComputedColumns,
}: TableGridProps) {
const styles = useMemoCss(componentStyles);
Expand Down Expand Up @@ -299,6 +301,7 @@ export function TableGrid({
className="kbnDocViewer__fieldsGrid"
css={styles.fieldsGrid}
columns={gridColumns}
headerVisibility={headerVisibility}
toolbarVisibility={false}
rowCount={rows.length}
renderCellValue={customRenderCellValue ? customRenderCellValue : renderCellValue}
Expand All @@ -321,6 +324,22 @@ const componentStyles = {
borderTop: 'none',
},

'&.euiDataGrid--noHeader': {
overflow: 'visible',
},

'&.euiDataGrid--noHeader .euiDataGrid__content': {
overflow: 'visible',
},

'&.euiDataGrid--noHeader .euiDataGrid__virtualized': {
overflow: 'visible !important',
},

'&.euiDataGrid--noHeader .euiDataGridRow:first-of-type .euiDataGridRowCell': {
borderBlockStart: 'none',
},
Comment on lines +327 to +341
Copy link
Copy Markdown
Contributor Author

@tfcmarques tfcmarques Apr 1, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was added due to an odd interaction when no header is visible in the table. The actions popover toolbar doesn't overflow, so it would be clipped. Also, the first row has a top border, which is unnecessary in our use case.

I'm wondering if we should open an enhancement/bug issue on EUI regarding this, at least for the action toolbar being clipped 🤔

Copy link
Copy Markdown
Contributor

@cauemarcondes cauemarcondes Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you could show it to them and ask their input on this.

Copy link
Copy Markdown
Contributor

@davismcphee davismcphee Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, I'd rather not keep these overrides around permanently if it can be fixed in EUI.


'&.euiDataGrid--headerUnderline .euiDataGridHeader': {
borderBottom: euiTheme.border.thin,
},
Expand Down
13 changes: 2 additions & 11 deletions ...ared/unified_doc_viewer/public/components/observability/traces/components/about/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,8 @@ import {
USER_AGENT_NAME,
USER_AGENT_VERSION,
} from '@kbn/apm-types';
import { EuiPanel, useEuiTheme } from '@elastic/eui';
import { EuiPanel } from '@elastic/eui';
import { Duration } from '@kbn/apm-ui-shared';
import { css } from '@emotion/react';
import { ContentFrameworkTable } from '../../../../content_framework';
import { isTransaction } from '../../helpers';
import {
Expand Down Expand Up @@ -72,7 +71,6 @@ export interface AboutProps
}

export const About = ({ hit, dataView, filter, onAddColumn, onRemoveColumn }: AboutProps) => {
const { euiTheme } = useEuiTheme();
const isSpan = !isTransaction(hit);
const flattenedHit = getFlattenedTraceDocumentOverview(hit);
const traceRootSpan = useFetchTraceRootSpanContext();
Expand Down Expand Up @@ -104,14 +102,7 @@ export const About = ({ hit, dataView, filter, onAddColumn, onRemoveColumn }: Ab
};

return (
<EuiPanel
hasBorder={true}
hasShadow={false}
paddingSize="s"
css={css`
padding-bottom: ${euiTheme.base / 4}px;
`}
>
<EuiPanel hasBorder={true} hasShadow={false} paddingSize="s">
<ContentFrameworkTable
fieldNames={isSpan ? spanFieldNames : transactionFieldNames}
id={'aboutTable'}
Expand Down
Loading