render EuiDataGrid only if >0 rows

elastic · May 2, 2023 · 303499d · 303499d
1 parent c271cbb
commit 303499d
Showing 1 changed file with 69 additions and 67 deletions.
diff --git a/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx b/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx
@@ -346,74 +346,76 @@ export const DataGrid: FC<Props> = memo(
  <EuiSpacer size="m" />
  </div>
  )}
- <EuiMutationObserver
- observerOptions={{ subtree: true, attributes: true, childList: true }}
- onMutation={onMutation}
- >
- {(mutationRef) => (
- <div css={cssOverride} ref={mutationRef}>
- <EuiDataGrid
- aria-label={isWithHeader(props) ? props.title : ''}
- columns={columnsWithCharts.map((c) => {
- c.initialWidth = 165;
- return c;
- })}
- columnVisibility={{ visibleColumns, setVisibleColumns }}
- trailingControlColumns={trailingControlColumns}
- gridStyle={euiDataGridStyle}
- rowCount={rowCount}
- renderCellValue={renderCellValue}
- renderCellPopover={renderCellPopover}
- sorting={{ columns: sortingColumns, onSort }}
- toolbarVisibility={{
- ...euiDataGridToolbarSettings,
- ...(chartsButtonVisible
- ? {
- additionalControls: (
- <EuiToolTip
- content={i18n.translate(
- 'xpack.ml.dataGrid.histogramButtonToolTipContent',
- {
- defaultMessage:
- 'Queries run to fetch histogram chart data will use a sample size per shard of {samplerShardSize} documents.',
- values: {
- samplerShardSize: DEFAULT_SAMPLER_SHARD_SIZE,
- },
- }
- )}
- >
- <EuiButtonEmpty
- aria-pressed={chartsVisible === true}
- className={`euiDataGrid__controlBtn${
- chartsVisible === true ? ' euiDataGrid__controlBtn--active' : ''
- }`}
- data-test-subj={`${dataTestSubj}HistogramButton`}
- size="xs"
- iconType="visBarVertical"
- color="text"
- onClick={toggleChartVisibility}
- disabled={chartsVisible === undefined}
+ {rowCount > 0 && (
+ <EuiMutationObserver
+ observerOptions={{ subtree: true, attributes: true, childList: true }}
+ onMutation={onMutation}
+ >
+ {(mutationRef) => (
+ <div css={cssOverride} ref={mutationRef}>
+ <EuiDataGrid
+ aria-label={isWithHeader(props) ? props.title : ''}
+ columns={columnsWithCharts.map((c) => {
+ c.initialWidth = 165;
+ return c;
+ })}
+ columnVisibility={{ visibleColumns, setVisibleColumns }}
+ trailingControlColumns={trailingControlColumns}
+ gridStyle={euiDataGridStyle}
+ rowCount={rowCount}
+ renderCellValue={renderCellValue}
+ renderCellPopover={renderCellPopover}
+ sorting={{ columns: sortingColumns, onSort }}
+ toolbarVisibility={{
+ ...euiDataGridToolbarSettings,
+ ...(chartsButtonVisible
+ ? {
+ additionalControls: (
+ <EuiToolTip
+ content={i18n.translate(
+ 'xpack.ml.dataGrid.histogramButtonToolTipContent',
+ {
+ defaultMessage:
+ 'Queries run to fetch histogram chart data will use a sample size per shard of {samplerShardSize} documents.',
+ values: {
+ samplerShardSize: DEFAULT_SAMPLER_SHARD_SIZE,
+ },
+ }
+ )}
  >
- <FormattedMessage
- id="xpack.ml.dataGrid.histogramButtonText"
- defaultMessage="Histogram charts"
- />
- </EuiButtonEmpty>
- </EuiToolTip>
- ),
- }
- : {}),
- }}
- pagination={{
- ...pagination,
- pageSizeOptions: [5, 10, 25],
- onChangeItemsPerPage,
- onChangePage,
- }}
- />
- </div>
- )}
- </EuiMutationObserver>
+ <EuiButtonEmpty
+ aria-pressed={chartsVisible === true}
+ className={`euiDataGrid__controlBtn${
+ chartsVisible === true ? ' euiDataGrid__controlBtn--active' : ''
+ }`}
+ data-test-subj={`${dataTestSubj}HistogramButton`}
+ size="xs"
+ iconType="visBarVertical"
+ color="text"
+ onClick={toggleChartVisibility}
+ disabled={chartsVisible === undefined}
+ >
+ <FormattedMessage
+ id="xpack.ml.dataGrid.histogramButtonText"
+ defaultMessage="Histogram charts"
+ />
+ </EuiButtonEmpty>
+ </EuiToolTip>
+ ),
+ }
+ : {}),
+ }}
+ pagination={{
+ ...pagination,
+ pageSizeOptions: [5, 10, 25],
+ onChangeItemsPerPage,
+ onChangePage,
+ }}
+ />
+ </div>
+ )}
+ </EuiMutationObserver>
+ )}
  </div>
  );
  },