[EUI Datagrid] Adds rowHeightOptions property by VladLasitsa · Pull Request #4853 · elastic/eui

VladLasitsa · 2021-06-03T12:22:27Z

Summary

Adds possibility to set default Height for all rows and define initial heights for each row. ALso so that content will be expanded by row height we should provide rowHeightsOptions property for datagrid.

API:

{
  defaultHeight: 40, // height which will be applied for all rows except described in initialHeights. Also can be defined as lineCount
  rowHeights: {
    1: 120, // for row which have index 1 we set 120 pixel
    3: { lineCount: 4 }, // for row which have index 3 we allow to show 3 lines after that we truncate
    4: { height: 40 } // for row which have index 4 we set 40 pixel
  }
}

For example here I set default height for each row = 60 and for second row lineCount = 5

Issues which we have:

Pagination. Should re-render cells where was changed heights. Found a solution, added new condition in shouldComponentUpdate (https://github.com/elastic/eui/pull/4853/files#diff-9d40afa057c929171c16c51ab0a6c842bea939f4328129246a2f2e772257c3bbR301-R310)
Sorting. We do not compute the rowMap for every sort relative to the first position of the elements.

kibanamachine · 2021-06-03T12:47:03Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4853/

kibanamachine · 2021-06-03T18:17:26Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4853/

kibanamachine · 2021-06-04T08:09:53Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4853/

src/components/datagrid/data_grid_cell.tsx

kibanamachine · 2021-06-08T12:11:59Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4853/

chandlerprall

EDIT: comment at #4853 (comment) supersedes this

Looks like a great PoC, thank you for exploring! I'm kinda surprised how straight forward it was to get to even this point. Things we'll need to consider/answer to move forward:

computedStylesForGridCell is called any time EuiDataGrid renders, and outside any lifecycle
getNumberFromPx - we'll likely want to try to support non-px values
Would be great to avoid the extra div in data_grid_cell , and is there a way to extend browser support of this method beyond chrome/webkit?
defaultHeight conflicts with the density setting, though this is probably fine as-is

src/components/datagrid/data_grid_types.ts

src/components/datagrid/data_grid_body.tsx

kertal

think cells should vertically align top, shouldn't they? @chandlerprall

chandlerprall · 2021-06-09T13:39:56Z

Spoke with @elastic/kibana-app, let's change the line height configuration to accept either a pixel value or the desired line count. This should remove the need for computing the style & doing other calculations.

We want to support:

rows with no configured height (only choice today)
rows with line counts
rows with pixel heights - these cells might not be able to provide indication of truncation

For the API, I envision something like:

      rowHeightOptions={{
        defaultHeight: 40, // 40 pixels
        initialHeights: {
          1: { lineCount: 3 }, // 3 lines
          4: 140, // 140 pixels
          5: { height: 80 }, // 80 pixels
          6: { height: '1rem' }, // 1 rem
        },
      }}

kibanamachine · 2021-06-11T16:39:26Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4853/

kibanamachine · 2021-06-14T15:29:41Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4853/

chandlerprall

Cell actions' appearance/creation shifts content

datagrid_height_truncation.mov

src/components/datagrid/data_grid_types.ts

src/components/datagrid/data_grid_body.tsx

kibanamachine · 2021-06-14T17:02:38Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4853/

kertal

@chandlerprall
Not 100% sure of it, but shouldn't also the expansion (+ custom cell actions) be vertical aligned top? Would subjectively look better when there's e.g. a single line text displayed next to a multi line cell

kibanamachine · 2021-06-14T17:30:34Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4853/

chandlerprall · 2021-06-14T18:16:58Z

Not 100% sure of it, but shouldn't also the expansion (+ custom cell actions) be vertical aligned top? Would subjectively look better when there's e.g. a single line text displayed next to a multi line cell

Yep! I didn't call it out as you already had, and it was part of the our discussion last week.

src/components/datagrid/row_height_utils.ts

src/components/datagrid/data_grid_cell.tsx

chandlerprall

datagrid_example.js needs to include EuiDataGridRowHeightsOptions in the Props list:
- include EuiDataGridRowHeightsOptions in the import on lines 21-35
- pass EuiDataGridRowHeightsOptions to the props object on lines 365-382

CHANGELOG.md

src/components/datagrid/data_grid_types.ts

src-docs/src/views/datagrid/datagrid_height_options_example.js

src-docs/src/views/datagrid/row_height_options.js

src/components/common.ts

src/components/datagrid/row_height_utils.ts

kibanamachine · 2021-06-25T14:24:58Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4853/

kibanamachine · 2021-06-25T14:55:57Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4853/

chandlerprall

Taking this out of draft, asking @miukimiu for a review on the SCSS changes

src/components/datagrid/row_height_utils.ts

kibanamachine · 2021-06-29T17:33:38Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4853/

kibanamachine · 2021-06-29T19:01:04Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4853/

elizabetdev

Thanks, @VladLasitsa for helping with this. It looks great! 🎉

I tested in Chrome, Safari, Edge, and Firefox and it works as expected. I just noticed a few things that are not blockers but you can definitely improve the code/examples.

src/components/datagrid/_data_grid_data_row.scss

src/components/datagrid/data_grid.tsx

src-docs/src/views/datagrid/row_height_options.js

kibanamachine · 2021-07-05T15:13:36Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4853/

kibanamachine · 2021-07-05T15:49:41Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4853/

…equirements

chandlerprall

🚀 I pushed a changelog conflict resolution & removed the AtLeastOne utility type from common.ts as it's no longer used. Everything looks good, I'll merge when CI passes.

kibanamachine · 2021-07-06T20:21:51Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4853/

Adds rowHeightOptions

369cf15

Add documentation

9e610d8

Fix eslint

6fd0fc5

dimaanj reviewed Jun 4, 2021

View reviewed changes

src/components/datagrid/data_grid_cell.tsx Outdated Show resolved Hide resolved

chandlerprall mentioned this pull request Jun 4, 2021

[EuiDataGrid] Support double-click action on columns #4861

Closed

Some work

583835b

fix eslint

3bd3fbf

chandlerprall reviewed Jun 8, 2021

View reviewed changes

dimaanj reviewed Jun 9, 2021

View reviewed changes

src/components/datagrid/data_grid_types.ts Outdated Show resolved Hide resolved

src/components/datagrid/data_grid_body.tsx Outdated Show resolved Hide resolved

kertal reviewed Jun 9, 2021

View reviewed changes

Add lineCount as property for rowHeightOptions

b249223

increase performance

b298e50

chandlerprall suggested changes Jun 14, 2021

View reviewed changes

Fix some remarks

da06a02

Fix eslint

69f16f3

kertal reviewed Jun 14, 2021

View reviewed changes

alexwizp reviewed Jun 14, 2021

View reviewed changes

src/components/datagrid/row_height_utils.ts Show resolved Hide resolved

alexwizp reviewed Jun 14, 2021

View reviewed changes

src/components/datagrid/row_height_utils.ts Outdated Show resolved Hide resolved

alexwizp reviewed Jun 14, 2021

View reviewed changes

src/components/datagrid/row_height_utils.ts Outdated Show resolved Hide resolved

alexwizp reviewed Jun 14, 2021

View reviewed changes

src/components/datagrid/data_grid_cell.tsx Outdated Show resolved Hide resolved

chandlerprall suggested changes Jun 24, 2021

View reviewed changes

Fix some remarks

e41ccda

Fix tests

689a5a6

shaunmcgough mentioned this pull request Jun 29, 2021

[Discover] [Meta] Multi-line New Table elastic/kibana#103667

Closed

chandlerprall added 2 commits June 29, 2021 11:07

Merge branch 'master' into set_height_for_row

3354ce4

changelog update

c9318da

chandlerprall suggested changes Jun 29, 2021

View reviewed changes

src/components/datagrid/row_height_utils.ts Outdated Show resolved Hide resolved

chandlerprall marked this pull request as ready for review June 29, 2021 17:24

chandlerprall requested a review from elizabetdev June 29, 2021 17:24

Update row_height_utils.ts

ac900b4

kertal mentioned this pull request Jun 30, 2021

[EuiDataGrid] Add global custom cell height #4829

Closed

10 tasks

elizabetdev approved these changes Jul 1, 2021

View reviewed changes

src/components/datagrid/_data_grid_data_row.scss Outdated Show resolved Hide resolved

src/components/datagrid/data_grid.tsx Show resolved Hide resolved

src-docs/src/views/datagrid/row_height_options.js Show resolved Hide resolved

VladLasitsa added 2 commits July 5, 2021 13:25

Merge remote-tracking branch 'upstream/master' into set_height_for_row

60d8973

Fix documentation

6a15a0d

Fix eslint

531bd76

chandlerprall added 2 commits July 6, 2021 13:52

Removed unused AtLeastOnce util type, re-phrased minimum row height r…

b632984

…equirements

Merge branch 'master' into set_height_for_row

6af2eb6

chandlerprall approved these changes Jul 6, 2021

View reviewed changes

chandlerprall merged commit b7fbdf1 into elastic:master Jul 6, 2021

This was referenced Jul 8, 2021

[EuiDataGrid] Auto-fit rows to content #4634

Closed

Upgrade EUI to v35.0.0 elastic/kibana#105127

Merged

cchaos mentioned this pull request Jul 16, 2021

[EuiDataGrid] regression in displaying Arrays and Objects in expand behavior #4957

Closed

ryankeairns mentioned this pull request Aug 18, 2021

[Discover] Document explorer rollout by default elastic/kibana#85965

Closed

41 tasks

Conversation

VladLasitsa commented Jun 3, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

kibanamachine commented Jun 3, 2021

Uh oh!

kibanamachine commented Jun 3, 2021

Uh oh!

kibanamachine commented Jun 4, 2021

Uh oh!

Uh oh!

kibanamachine commented Jun 8, 2021

Uh oh!

chandlerprall left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kertal left a comment

Choose a reason for hiding this comment

Uh oh!

chandlerprall commented Jun 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kibanamachine commented Jun 11, 2021

Uh oh!

kibanamachine commented Jun 14, 2021

Uh oh!

chandlerprall left a comment

Choose a reason for hiding this comment

Cell actions' appearance/creation shifts content

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kibanamachine commented Jun 14, 2021

Uh oh!

kertal left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Jun 14, 2021

Uh oh!

chandlerprall commented Jun 14, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chandlerprall left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kibanamachine commented Jun 25, 2021

Uh oh!

kibanamachine commented Jun 25, 2021

Uh oh!

chandlerprall left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kibanamachine commented Jun 29, 2021

Uh oh!

kibanamachine commented Jun 29, 2021

Uh oh!

elizabetdev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kibanamachine commented Jul 5, 2021

VladLasitsa commented Jun 3, 2021 •

edited

Loading

chandlerprall left a comment •

edited

Loading

chandlerprall commented Jun 9, 2021 •

edited

Loading