Skip to content

Commit

Permalink
[EuiDataGrid] Give rows actual positions/dimensions (#5555)
Browse files Browse the repository at this point in the history 
* Pass positioning and height/width to portalled rows

+ adjust scrolling workaround to obtain offsetTop from row parent instead of cell, now that individual cells have a top: 0

* Update snapshots

* Fix scrolling workaround to use row offsetTop

- now that cells are relative to the row parent, their offsetTop is 0

* Simplify row CSS

- Remove `@include euiDataGridRowCell` mixin and target the row directly

- Remove isStripableRow cell logic and instead use CSS nth-child for alternating stripes

- Swap stripes and highlight CSS so that highlight takes precendence over stripes without an !important

- Remove background color on individual cells to allow row colors to show through (NB: grid body is already set to the correct background color as well)

* Add unit tests for row manager

- skipping the mutation observer for now

* Account for #5562

- cells no longer have a set background color (to allow row color to bleed through), and we were previously relying on the grid body's bg color to be white

* Fix row widths bugging out due to stale containerRef reference

- using CSS `left`/`right` and `relative` on the inner grid parent solves the issue instead, as the row is now always correct width

* Add `data-gridrow-index` attr for users to more easily hook into rows

* Fix rows to add `--striped` class instead of CSS :nth-child

- which does not work well due to children changing on virtualization

+ set additional visible row index data attribute for extra detail

+ use dataset

* Fix striped footer rows

- was previously not working on prod, and now it does

* [PR feedback] Convert getRow args to an object
  • Loading branch information
Constance authored Feb 10, 2022
1 parent 7f59a7d commit c1f5de4
Show file tree
Hide file tree
Showing 15 changed files with 229 additions and 101 deletions.
80 changes: 40 additions & 40 deletions src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1141,7 +1141,7 @@ Array [
data-gridcell-visible-row-index="0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:0px;height:34px;width:100px"
style="position:absolute;left:0;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -1173,7 +1173,7 @@ Array [
data-gridcell-visible-row-index="0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:0px;height:34px;width:100px"
style="position:absolute;left:100px;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand All @@ -1197,15 +1197,15 @@ Array [
</div>
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
data-gridcell-column-id="A"
data-gridcell-column-index="0"
data-gridcell-id="0,1"
data-gridcell-row-index="1"
data-gridcell-visible-row-index="1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:34px;height:34px;width:100px"
style="position:absolute;left:0;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand All @@ -1229,15 +1229,15 @@ Array [
</div>
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
data-gridcell-column-id="B"
data-gridcell-column-index="1"
data-gridcell-id="1,1"
data-gridcell-row-index="1"
data-gridcell-visible-row-index="1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:34px;height:34px;width:100px"
style="position:absolute;left:100px;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -1269,7 +1269,7 @@ Array [
data-gridcell-visible-row-index="2"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:68px;height:34px;width:100px"
style="position:absolute;left:0;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -1301,7 +1301,7 @@ Array [
data-gridcell-visible-row-index="2"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:68px;height:34px;width:100px"
style="position:absolute;left:100px;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -1603,7 +1603,7 @@ Array [
data-gridcell-visible-row-index="0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:0px;height:34px;width:50px"
style="position:absolute;left:0;top:0;height:34px;width:50px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -1654,7 +1654,7 @@ Array [
data-gridcell-visible-row-index="0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:50px;top:0px;height:34px;width:100px"
style="position:absolute;left:50px;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -1686,7 +1686,7 @@ Array [
data-gridcell-visible-row-index="0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:150px;top:0px;height:34px;width:100px"
style="position:absolute;left:150px;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -1718,7 +1718,7 @@ Array [
data-gridcell-visible-row-index="0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:250px;top:0px;height:34px;width:50px"
style="position:absolute;left:250px;top:0;height:34px;width:50px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -1761,15 +1761,15 @@ Array [
/>
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
class="euiDataGridRowCell euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
data-gridcell-column-id="leading"
data-gridcell-column-index="0"
data-gridcell-id="0,1"
data-gridcell-row-index="1"
data-gridcell-visible-row-index="1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:34px;height:34px;width:50px"
style="position:absolute;left:0;top:0;height:34px;width:50px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -1812,15 +1812,15 @@ Array [
/>
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe"
class="euiDataGridRowCell"
data-gridcell-column-id="A"
data-gridcell-column-index="1"
data-gridcell-id="1,1"
data-gridcell-row-index="1"
data-gridcell-visible-row-index="1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:50px;top:34px;height:34px;width:100px"
style="position:absolute;left:50px;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand All @@ -1844,15 +1844,15 @@ Array [
</div>
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe"
class="euiDataGridRowCell"
data-gridcell-column-id="B"
data-gridcell-column-index="2"
data-gridcell-id="2,1"
data-gridcell-row-index="1"
data-gridcell-visible-row-index="1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:150px;top:34px;height:34px;width:100px"
style="position:absolute;left:150px;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand All @@ -1876,15 +1876,15 @@ Array [
</div>
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
class="euiDataGridRowCell euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
data-gridcell-column-id="trailing"
data-gridcell-column-index="3"
data-gridcell-id="3,1"
data-gridcell-row-index="1"
data-gridcell-visible-row-index="1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:250px;top:34px;height:34px;width:50px"
style="position:absolute;left:250px;top:0;height:34px;width:50px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -1935,7 +1935,7 @@ Array [
data-gridcell-visible-row-index="2"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:68px;height:34px;width:50px"
style="position:absolute;left:0;top:0;height:34px;width:50px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -1986,7 +1986,7 @@ Array [
data-gridcell-visible-row-index="2"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:50px;top:68px;height:34px;width:100px"
style="position:absolute;left:50px;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -2018,7 +2018,7 @@ Array [
data-gridcell-visible-row-index="2"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:150px;top:68px;height:34px;width:100px"
style="position:absolute;left:150px;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -2050,7 +2050,7 @@ Array [
data-gridcell-visible-row-index="2"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:250px;top:68px;height:34px;width:50px"
style="position:absolute;left:250px;top:0;height:34px;width:50px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -2332,7 +2332,7 @@ Array [
data-gridcell-visible-row-index="0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:0px;height:34px;width:100px"
style="position:absolute;left:0;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -2364,7 +2364,7 @@ Array [
data-gridcell-visible-row-index="0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:0px;height:34px;width:100px"
style="position:absolute;left:100px;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand All @@ -2388,15 +2388,15 @@ Array [
</div>
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
data-gridcell-column-id="A"
data-gridcell-column-index="0"
data-gridcell-id="0,1"
data-gridcell-row-index="1"
data-gridcell-visible-row-index="1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:34px;height:34px;width:100px"
style="position:absolute;left:0;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand All @@ -2420,15 +2420,15 @@ Array [
</div>
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
data-gridcell-column-id="B"
data-gridcell-column-index="1"
data-gridcell-id="1,1"
data-gridcell-row-index="1"
data-gridcell-visible-row-index="1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:34px;height:34px;width:100px"
style="position:absolute;left:100px;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -2460,7 +2460,7 @@ Array [
data-gridcell-visible-row-index="2"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:68px;height:34px;width:100px"
style="position:absolute;left:0;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -2492,7 +2492,7 @@ Array [
data-gridcell-visible-row-index="2"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:68px;height:34px;width:100px"
style="position:absolute;left:100px;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -2753,7 +2753,7 @@ Array [
data-gridcell-visible-row-index="0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:0px;height:34px;width:100px"
style="position:absolute;left:0;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -2785,7 +2785,7 @@ Array [
data-gridcell-visible-row-index="0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:0px;height:34px;width:100px"
style="position:absolute;left:100px;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand All @@ -2809,15 +2809,15 @@ Array [
</div>
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
data-gridcell-column-id="A"
data-gridcell-column-index="0"
data-gridcell-id="0,1"
data-gridcell-row-index="1"
data-gridcell-visible-row-index="1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:34px;height:34px;width:100px"
style="position:absolute;left:0;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand All @@ -2841,15 +2841,15 @@ Array [
</div>
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
data-gridcell-column-id="B"
data-gridcell-column-index="1"
data-gridcell-id="1,1"
data-gridcell-row-index="1"
data-gridcell-visible-row-index="1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:34px;height:34px;width:100px"
style="position:absolute;left:100px;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -2881,7 +2881,7 @@ Array [
data-gridcell-visible-row-index="2"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:68px;height:34px;width:100px"
style="position:absolute;left:0;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -2913,7 +2913,7 @@ Array [
data-gridcell-visible-row-index="2"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:68px;height:34px;width:100px"
style="position:absolute;left:100px;top:0;height:34px;width:100px"
tabindex="-1"
>
<div
Expand Down
Loading

0 comments on commit c1f5de4

Please sign in to comment.