diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx index 7ca0888230749..6aa101cc558b4 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.test.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.test.tsx @@ -432,4 +432,37 @@ describe('UnifiedDataTable', () => { expect(tourStep).toEqual('test-expand'); }); }); + + describe('gridStyleOverride', () => { + it('should render the grid with the default style if no gridStyleOverride is provided', async () => { + const component = await getComponent({ + ...getProps(), + }); + + const grid = findTestSubject(component, 'docTable'); + + expect(grid.hasClass('euiDataGrid--bordersHorizontal')).toBeTruthy(); + expect(grid.hasClass('euiDataGrid--fontSizeSmall')).toBeTruthy(); + expect(grid.hasClass('euiDataGrid--paddingLarge')).toBeTruthy(); + expect(grid.hasClass('euiDataGrid--rowHoverHighlight')).toBeTruthy(); + expect(grid.hasClass('euiDataGrid--headerUnderline')).toBeTruthy(); + expect(grid.hasClass('euiDataGrid--stripes')).toBeTruthy(); + }); + it('should render the grid with style override if gridStyleOverride is provided', async () => { + const component = await getComponent({ + ...getProps(), + gridStyleOverride: { + stripes: false, + rowHover: 'none', + border: 'none', + }, + }); + + const grid = findTestSubject(component, 'docTable'); + + expect(grid.hasClass('euiDataGrid--stripes')).toBeFalsy(); + expect(grid.hasClass('euiDataGrid--rowHoverHighlight')).toBeFalsy(); + expect(grid.hasClass('euiDataGrid--bordersNone')).toBeTruthy(); + }); + }); }); diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index e5f5e5dbbba39..a9d749e46169d 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -27,6 +27,7 @@ import { EuiDataGridControlColumn, EuiDataGridCustomBodyProps, EuiDataGridCellValueElementProps, + EuiDataGridStyle, } from '@elastic/eui'; import type { DataView } from '@kbn/data-views-plugin/public'; import { @@ -282,6 +283,10 @@ export interface UnifiedDataTableProps { * Optional key/value pairs to set guided onboarding steps ids for a data table components included to guided tour. */ componentsTourSteps?: Record; + /** + * Optional gridStyle override. + */ + gridStyleOverride?: EuiDataGridStyle; } export const EuiDataGridMemoized = React.memo(EuiDataGrid); @@ -335,6 +340,7 @@ export const UnifiedDataTable = ({ externalCustomRenderers, consumer = 'discover', componentsTourSteps, + gridStyleOverride, }: UnifiedDataTableProps) => { const { fieldFormats, toastNotifications, dataViewFieldEditor, uiSettings, storage, data } = services; @@ -789,7 +795,7 @@ export const UnifiedDataTable = ({ toolbarVisibility={toolbarVisibility} rowHeightsOptions={rowHeightsOptions} inMemory={inMemory} - gridStyle={GRID_STYLE} + gridStyle={gridStyleOverride ?? GRID_STYLE} renderCustomGridBody={renderCustomGridBody} trailingControlColumns={trailingControlColumns} />