[EuiDataGrid] Enhance `renderCustomGridBody` to better support consumer virtualization #8028

logeekal · 2024-09-18T10:29:10Z

Summary

This PR tries to provide more control to the users of DataGrid when they pass renderCustomGridBody prop. Below are the changes done.

Changes

headerRow and footerRow are now passed to renderCustomBody component for the user of data grid to render. This was done so that if users are rendering rows in a custom manner, those customization can also be applied to header and footer rows. For example, I was trying to use a virtualized table component where there was option to scroll the table horizontally, since headerRow was already rendered by EUI, I did not have option to contain it within a section same as table and hence scrolling was different in headerRow and the actual table.
More memoizations in packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx here

Existing Issues

Below issues exist in custom body render and currently, I do not have a good way to resolve these but these are also low priority.

Width of the grid with static height doesn't/can't take scrollbar width into account when customRenderBody. Currently customRenderBody function does not have any way to recalculate the width of data grid. ( DataGrid width is more than a container with customBodyRender #8038)
Ability to pass maxWidth to the cell content in order to restrict that to the width of the header.

QA

https://eui.elastic.co/pr_8028/#/tabular-content/data-grid-advanced#custom-body-renderer

Below is the demo on how virtualization with Event Renderer looks like.

render_custom_body_eui_PR_demo.mp4

General checklist

Browser QA - N/A
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~[ ] Checked Code Sandbox works for any docs examples~~
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)
Designer checklist - N/A

packages/eui/src/components/datagrid/body/cell/data_grid_cell.tsx

packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx

cee-chen · 2024-10-08T03:11:24Z

packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx

-        customGridBodyProps?.className
-      )}
-    >
-      {headerRow}


FYI, the fact that we're no longer automatically rendering the header and footer row for custom grid bodies will need to constitute a breaking change. I'm not against it, but there are at least 2 current custom grid usages in Kibana that will need to be updated when this change is made, or production usage will break.

yes I noted below occurences and I will be changing those as well in addition to couple of tests. So it should be okay.

https://github.com/elastic/kibana/blob/faa74d23aa625fca7ace0313386fac4f3134e9c7/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx#L683-L686

https://github.com/elastic/kibana/blob/faa74d23aa625fca7ace0313386fac4f3134e9c7/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx#L354-L357

Note
But I will need your help in how can I merge these EUI Changes for 8.16 and if it is possible or not.

I should be able to get this into Kibana by 8.16 FF if I merge this in and do a release today. Does that work for you?

Woohoo.. Thanks @cee-chen for merging it.

cee-chen · 2024-10-08T03:14:17Z

packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx

+        rowHeightUtils,
+      });
+
+      const headerRowProps = useMemo(() => {


Just to check, were the props not correctly getting memoized by these lines? 😬

eui/packages/eui/src/components/datagrid/body/header/use_data_grid_header.tsx

Lines 23 to 25 in 4534175

const headerRow = useMemo(() => {

return <EuiDataGridHeaderRow ref={setHeaderRowRef} {...props} />;

}, [props]);

Yes, this was the strange one. Although props were exactly the same ( same identity ) but when passed into useDataGridHeader as an object, identify to props object recieved in useDataGridHeader was changing. Possibly because I think it was creating a new object everytime to pass as props.

This was causing headerRow to be recreated and renderCustomBody to be completely render again.

Gotcha, thanks so much for explaining!

cee-chen · 2024-10-08T03:14:42Z

Hey Jatin, apologies for dropping the ball on this PR! I'll spend tomorrow pushing up some docs changes (probably merging the two examples so there's just one), and then update the changelog to highlight that this PR contains a breaking change. Other than that I think this is good to go.

- which allows conditionally rendering the prop - errors otherwise + tweak displayName

- give this example its own folder, it's gotten complex enough at this point - also give it its own custom toggles and tabs, since codesandbox doesn't generate a link with relative imports

- these are all definitively passed

github-actions · 2024-10-08T22:53:00Z

This PR contains breaking changes. The opener of this pull request is asked to perform the following due diligence steps below, to assist EUI in our next Kibana upgrade:

If this PR contains prop/API changes:
- Search through Kibana for <EuiComponent usages (example search)
- In the PR description or in a PR comment, include a count or list with the number of component usages in Kibana that will need to be updated (if that amount is "none", include that information as well)
If this PR contains CSS changes:
- Search through Kibana for the changed EUI selectors, e.g. .euiComponent (example search)
- In the PR description or in a PR comment, include a count or list with the number of custom CSS overrides in Kibana that will need to be updated (if that amount is "none", include that information as well)
🔍 Tip: When searching through Kibana, consider excluding **/target, **/*.snap, **/*.storyshot files to reduce noise and only look at source code usages
⚠️ For extremely risky changes, the EUI team should potentially consider the following precautions:
- Using a pre-release release candidate to test Kibana CI ahead of time
- Using kibana-a-la-carte for manual QA, and to give other Kibana teams a staging server to quickly test against

Log | Bot Usage

elasticmachine · 2024-10-08T23:21:16Z

💚 Build Succeeded

Buildkite Build
Commit: 3049f3b

History

💚 Build #2868 succeeded ed08096
💔 Build #2863 failed 0190346
💔 Build #2835 failed 86930be
💔 Build #2832 failed 276acfe
💔 Build #2830 failed 24195bf
💚 Build #2826 succeeded cc48ba4

cc @cee-chen

cee-chen · 2024-10-09T00:03:48Z

I was going to push up some Storybook VRT screenshots, but my local Docker is running into issues 🥲 to avoid holding up this PR further, I'm going to go ahead and merge it in and follow up with Storybook later. Thanks so much for this PR Jatin!

logeekal · 2024-10-09T13:03:37Z

Thanks @cee-chen for pushing it so quickly and creating a PR in Kibana. I do not see any DataGrid issues in your Kibana PR so please let me know if something pops up.

Additionally, I see couple of minor issues with Try this out in codesandbox

It only appears on Cell Components tab.
It does not export complete code in CodeSandbox but only partial.

Thanks.

cee-chen · 2024-10-09T20:22:45Z

Nice catch on the docs! Unfortunately our CodeSandbox integration is pretty limited in how it allows importing multiple local files - hence the semi-broken behavior here. I believe we'll be switching to a different setup with live code in our new EUI+ docs, so this won't be an issue for much longer.

My preference would be to leave it without a fully working CodeSandbox example for now as I think having discrete examples of custom grid bodies instead of 1 long and hard to read file is going to be easier for devs to follow along and copy into their setups, if needed.

logeekal · 2024-10-10T05:08:12Z

Makes sense. thanks @cee-chen

`v96.1.0`⏩`v97.0.0` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v97.0.0`](https://github.com/elastic/eui/releases/v97.0.0) **Breaking changes** - EuiDataGrid's custom grid body (rendered via `renderCustomGridBody`) no longer automatically renders the column header row or footer rows. It instead now passes the `headerRow` and `footerRow` React elements, which require manual rendering. ([#8028](elastic/eui#8028)) - This change was made to allow consumers to sync header/footer rows with their own custom virtualization libraries. - To facilitate this, a `gridWidth` prop is now also passed to custom grid body renderers. **Bug fixes** - Fixed inputs not taking the whole width when passing `fullWidth` as `true` to EuiDatePickerRange component ([#8061](elastic/eui#8061)) **Accessibility** - Improved accessibility of `EuiExternalLinkIcon` by clarifying text for Screen Reader users. ([#8065](elastic/eui#8065)) --------- Co-authored-by: Elastic Machine <[email protected]>

`v96.1.0`⏩`v97.0.0` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v97.0.0`](https://github.com/elastic/eui/releases/v97.0.0) **Breaking changes** - EuiDataGrid's custom grid body (rendered via `renderCustomGridBody`) no longer automatically renders the column header row or footer rows. It instead now passes the `headerRow` and `footerRow` React elements, which require manual rendering. ([elastic#8028](elastic/eui#8028)) - This change was made to allow consumers to sync header/footer rows with their own custom virtualization libraries. - To facilitate this, a `gridWidth` prop is now also passed to custom grid body renderers. **Bug fixes** - Fixed inputs not taking the whole width when passing `fullWidth` as `true` to EuiDatePickerRange component ([elastic#8061](elastic/eui#8061)) **Accessibility** - Improved accessibility of `EuiExternalLinkIcon` by clarifying text for Screen Reader users. ([elastic#8065](elastic/eui#8065)) --------- Co-authored-by: Elastic Machine <[email protected]> (cherry picked from commit cd60c66)

logeekal mentioned this pull request Sep 18, 2024

[EuiDataGrid] Add Row Summary #8002

Open

cee-chen reviewed Sep 19, 2024

View reviewed changes

packages/eui/src/components/datagrid/body/cell/data_grid_cell.tsx Outdated Show resolved Hide resolved

logeekal added 6 commits September 26, 2024 17:05

fix: render custom body fixes

1960321

update docs

a2dfd9f

fix: RC

d827156

fix : errors RC

0c2b45f

fix: more errors RC

00e76e9

fix: more errors for RC

6e9474a

logeekal force-pushed the fix/render_custom_body_support_virtualiztion branch from 6b4fcdd to 6e9474a Compare September 27, 2024 09:46

logeekal added 7 commits September 27, 2024 11:54

fix: remove console log

6b8f85a

add: changelog

cc48ba4

optimizations and examples

d8a26eb

example grid working

24195bf

fix: remove width hack

276acfe

housekeeping

4534175

tsdoc

86930be

logeekal marked this pull request as ready for review September 30, 2024 15:51

logeekal requested a review from a team as a code owner September 30, 2024 15:51

logeekal commented Oct 2, 2024

View reviewed changes

packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx Show resolved Hide resolved

cee-chen added 2 commits October 7, 2024 19:35

Merge branch 'main' into fix/render_custom_body_support_virtualiztion

d72cb77

Fix failing snapshot

0190346

cee-chen reviewed Oct 8, 2024

View reviewed changes

fix: cypress tests

ed08096

cee-chen self-assigned this Oct 8, 2024

cee-chen added 4 commits October 8, 2024 15:44

Fix custom body to be rendered as a component

3a5ac9c

- which allows conditionally rendering the prop - errors otherwise + tweak displayName

[docs] merge both custom render and overhaul example

a242eb0

- give this example its own folder, it's gotten complex enough at this point - also give it its own custom toggles and tabs, since codesandbox doesn't generate a link with relative imports

changelog

9092bca

Remove unnecessarily optional types

65cd6f5

- these are all definitively passed

changelog

3049f3b

cee-chen added breaking change data grid labels Oct 8, 2024

cee-chen changed the title ~~[Fix] Datagrid Custom Body Render general fixes~~ [EuiDataGrid] Enhance renderCustomGridBody to better support consumer virtualization Oct 8, 2024

cee-chen approved these changes Oct 9, 2024

View reviewed changes

cee-chen merged commit 9ab356e into elastic:main Oct 9, 2024
5 checks passed

cee-chen mentioned this pull request Oct 9, 2024

Upgrade EUI to v97.0.0 elastic/kibana#195525

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiDataGrid] Enhance `renderCustomGridBody` to better support consumer virtualization #8028

[EuiDataGrid] Enhance `renderCustomGridBody` to better support consumer virtualization #8028

logeekal commented Sep 18, 2024 •

edited by cee-chen

Loading

cee-chen Oct 8, 2024

logeekal Oct 8, 2024

cee-chen Oct 8, 2024

logeekal Oct 9, 2024

cee-chen Oct 8, 2024

logeekal Oct 8, 2024

cee-chen Oct 8, 2024

cee-chen commented Oct 8, 2024

github-actions bot commented Oct 8, 2024 •

edited by cee-chen

Loading

elasticmachine commented Oct 8, 2024

cee-chen commented Oct 9, 2024

logeekal commented Oct 9, 2024

cee-chen commented Oct 9, 2024 •

edited

Loading

logeekal commented Oct 10, 2024

	const headerRow = useMemo(() => {
	return <EuiDataGridHeaderRow ref={setHeaderRowRef} {...props} />;
	}, [props]);

[EuiDataGrid] Enhance renderCustomGridBody to better support consumer virtualization #8028

[EuiDataGrid] Enhance renderCustomGridBody to better support consumer virtualization #8028

Conversation

logeekal commented Sep 18, 2024 • edited by cee-chen Loading

Summary

Changes

Existing Issues

QA

General checklist

cee-chen Oct 8, 2024

Choose a reason for hiding this comment

logeekal Oct 8, 2024

Choose a reason for hiding this comment

cee-chen Oct 8, 2024

Choose a reason for hiding this comment

logeekal Oct 9, 2024

Choose a reason for hiding this comment

cee-chen Oct 8, 2024

Choose a reason for hiding this comment

logeekal Oct 8, 2024

Choose a reason for hiding this comment

cee-chen Oct 8, 2024

Choose a reason for hiding this comment

cee-chen commented Oct 8, 2024

github-actions bot commented Oct 8, 2024 • edited by cee-chen Loading

elasticmachine commented Oct 8, 2024

💚 Build Succeeded

History

cee-chen commented Oct 9, 2024

logeekal commented Oct 9, 2024

cee-chen commented Oct 9, 2024 • edited Loading

logeekal commented Oct 10, 2024

[EuiDataGrid] Enhance `renderCustomGridBody` to better support consumer virtualization #8028

[EuiDataGrid] Enhance `renderCustomGridBody` to better support consumer virtualization #8028

logeekal commented Sep 18, 2024 •

edited by cee-chen

Loading

github-actions bot commented Oct 8, 2024 •

edited by cee-chen

Loading

cee-chen commented Oct 9, 2024 •

edited

Loading