[EUI Datagrid] Adds rowHeightOptions property

[VladLasitsa]

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]

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

[kibanamachine]

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

[kibanamachine]

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

[kibanamachine]

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

[kertal]

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

[chandlerprall]

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]

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

[kibanamachine]

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

[chandlerprall]

Cell actions' appearance/creation shifts content

datagrid_height_truncation.mov

[kibanamachine]

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]

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

[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

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

[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

[kibanamachine]

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

[kibanamachine]

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

[kibanamachine]

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

[kibanamachine]

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

[miukimiu]

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.

[kibanamachine]

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

[kibanamachine]

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

[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]

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