github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 10:40:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

[UnifiedDataTable] Add gridStyle override support (#166994)

Browse source
This commit is contained in:
Paulo Henrique 2023-09-26 14:42:10 -07:00 • committed by GitHub
parent 22029b50e8
commit a338dd8b38
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

33
packages/kbn-unified-data-table/src/components/data_table.test.tsx
View file

@ -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();
});
});
});

8
packages/kbn-unified-data-table/src/components/data_table.tsx
View file

@ -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<string, string>;
/**
* 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}
/>