Skip to content
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

[UnifiedDataTable] Add gridStyle override support #166994

Merged
merged 9 commits into from
Sep 26, 2023
Merged

[UnifiedDataTable] Add gridStyle override support #166994

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
328261f
adding gridStyle override option
opauloh Sep 21, 2023
9dc9914
adding gridStyle override tests
opauloh Sep 21, 2023
d644b97
Simplify override logic
opauloh Sep 23, 2023
f41f01c
Merge branch 'main' into unified-datatable/add-style-override-support
opauloh Sep 23, 2023
6b21435
simplify logic
opauloh Sep 23, 2023
ce1877a
rename prop
opauloh Sep 23, 2023
eb2d562
update tests to reflect prop name change
opauloh Sep 23, 2023
57cb6ba
updating memoization
opauloh Sep 25, 2023
b4b89aa
Merge branch 'main' into unified-datatable/add-style-override-support
opauloh Sep 26, 2023
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
33 changes: 33 additions & 0 deletions packages/kbn-unified-data-table/src/components/data_table.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 7 additions & 1 deletion packages/kbn-unified-data-table/src/components/data_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
EuiDataGridControlColumn,
EuiDataGridCustomBodyProps,
EuiDataGridCellValueElementProps,
EuiDataGridStyle,
} from '@elastic/eui';
import type { DataView } from '@kbn/data-views-plugin/public';
import {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -335,6 +340,7 @@ export const UnifiedDataTable = ({
externalCustomRenderers,
consumer = 'discover',
componentsTourSteps,
gridStyleOverride,
}: UnifiedDataTableProps) => {
const { fieldFormats, toastNotifications, dataViewFieldEditor, uiSettings, storage, data } =
services;
Expand Down Expand Up @@ -789,7 +795,7 @@ export const UnifiedDataTable = ({
toolbarVisibility={toolbarVisibility}
rowHeightsOptions={rowHeightsOptions}
inMemory={inMemory}
gridStyle={GRID_STYLE}
gridStyle={gridStyleOverride ?? GRID_STYLE}
renderCustomGridBody={renderCustomGridBody}
trailingControlColumns={trailingControlColumns}
/>
Expand Down
Loading