Skip to content

Commit

Permalink
fix(data-table): Fixed horizontal scrolling issue with pagination con…
Browse files Browse the repository at this point in the history 
…trols

When data table is set to fixed width or set to width of parent, horizontal scrollbar is shown to entire table component including pagination bar. This makes the pagination bar being clipped when scroll to the right. This PR fixes horizontal scrolling issue where scrollbar appears below table and above pagination bar.

BREAKING CHANGE: Added a wrapper element to data table's table element to fix horizontal scrolling issue when pagination controls are added.

PiperOrigin-RevId: 312342190
  • Loading branch information
@abhiomkar
abhiomkar committed May 20, 2020
1 parent 113e05a commit b065a4d
Show file tree
Hide file tree
Showing 2 changed files with 207 additions and 154 deletions.
267 changes: 136 additions & 131 deletions packages/mdc-data-table/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,36 +63,38 @@ Please refer to the [WAI-ARIA Authoring Practices for table](https://www.w3.org/

```html
<div class="mdc-data-table">
<table class="mdc-data-table__table" aria-label="Dessert calories">
<thead>
<tr class="mdc-data-table__header-row">
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Dessert</th>
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader" scope="col">Carbs (g)</th>
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader" scope="col">Protein (g)</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Comments</th>
</tr>
</thead>
<tbody class="mdc-data-table__content">
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.0</td>
<td class="mdc-data-table__cell">Super tasty</td>
</tr>
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.33333333333</td>
<td class="mdc-data-table__cell">I like ice cream more</td>
</tr>
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Eclair</th>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">6.0</td>
<td class="mdc-data-table__cell">New filing flavor</td>
</tr>
</tbody>
</table>
<div class="mdc-data-table__table-container">
<table class="mdc-data-table__table" aria-label="Dessert calories">
<thead>
<tr class="mdc-data-table__header-row">
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Dessert</th>
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader" scope="col">Carbs (g)</th>
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader" scope="col">Protein (g)</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Comments</th>
</tr>
</thead>
<tbody class="mdc-data-table__content">
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.0</td>
<td class="mdc-data-table__cell">Super tasty</td>
</tr>
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.33333333333</td>
<td class="mdc-data-table__cell">I like ice cream more</td>
</tr>
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Eclair</th>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">6.0</td>
<td class="mdc-data-table__cell">New filing flavor</td>
</tr>
</tbody>
</table>
</div>
</div>
```

Expand All @@ -102,112 +104,114 @@ Please refer to the [WAI-ARIA Authoring Practices for table](https://www.w3.org/

```html
<div class="mdc-data-table">
<table class="mdc-data-table__table" aria-label="Dessert calories">
<thead>
<tr class="mdc-data-table__header-row">
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox" role="columnheader" scope="col">
<div class="mdc-checkbox mdc-data-table__header-row-checkbox mdc-checkbox--selected">
<input type="checkbox" class="mdc-checkbox__native-control" aria-label="Toggle all rows"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
<div class="mdc-data-table__table-container">
<table class="mdc-data-table__table" aria-label="Dessert calories">
<thead>
<tr class="mdc-data-table__header-row">
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox" role="columnheader" scope="col">
<div class="mdc-checkbox mdc-data-table__header-row-checkbox mdc-checkbox--selected">
<input type="checkbox" class="mdc-checkbox__native-control" aria-label="Toggle all rows"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Signal name</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Status</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Severity</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Stage</th>
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader" scope="col">Time</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Roles</th>
</tr>
</thead>
<tbody class="mdc-data-table__content">
<tr data-row-id="u0" class="mdc-data-table__row">
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
<div class="mdc-checkbox mdc-data-table__row-checkbox">
<input type="checkbox" class="mdc-checkbox__native-control" aria-labelledby="u0"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Signal name</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Status</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Severity</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Stage</th>
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader" scope="col">Time</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Roles</th>
</tr>
</thead>
<tbody class="mdc-data-table__content">
<tr data-row-id="u0" class="mdc-data-table__row">
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
<div class="mdc-checkbox mdc-data-table__row-checkbox">
<input type="checkbox" class="mdc-checkbox__native-control" aria-labelledby="u0"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
</td>
<th class="mdc-data-table__cell" scope="row" id="u0">Arcus watch slowdown</th>
<td class="mdc-data-table__cell">Online</td>
<td class="mdc-data-table__cell">Medium</td>
<td class="mdc-data-table__cell">Triaged</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
<td class="mdc-data-table__cell">Allison Brie</td>
</tr>
<tr data-row-id="u1" class="mdc-data-table__row mdc-data-table__row--selected" aria-selected="true">
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
<div class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected">
<input type="checkbox" class="mdc-checkbox__native-control" checked aria-labelledby="u1"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</td>
<th class="mdc-data-table__cell" scope="row" id="u0">Arcus watch slowdown</th>
<td class="mdc-data-table__cell">Online</td>
<td class="mdc-data-table__cell">Medium</td>
<td class="mdc-data-table__cell">Triaged</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
<td class="mdc-data-table__cell">Allison Brie</td>
</tr>
<tr data-row-id="u1" class="mdc-data-table__row mdc-data-table__row--selected" aria-selected="true">
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
<div class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected">
<input type="checkbox" class="mdc-checkbox__native-control" checked aria-labelledby="u1"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
</td>
<th class="mdc-data-table__cell" scope="row" id="u1">monarch: prod shared ares-managed-features-provider-heavy</th>
<td class="mdc-data-table__cell">Offline</td>
<td class="mdc-data-table__cell">Huge</td>
<td class="mdc-data-table__cell">Triaged</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
<td class="mdc-data-table__cell">Brie Larson</td>
</tr>
<tr data-row-id="u2" class="mdc-data-table__row mdc-data-table__row--selected" aria-selected="true">
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
<div class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected">
<input type="checkbox" class="mdc-checkbox__native-control" checked aria-labelledby="u2"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</td>
<th class="mdc-data-table__cell" scope="row" id="u1">monarch: prod shared ares-managed-features-provider-heavy</th>
<td class="mdc-data-table__cell">Offline</td>
<td class="mdc-data-table__cell">Huge</td>
<td class="mdc-data-table__cell">Triaged</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
<td class="mdc-data-table__cell">Brie Larson</td>
</tr>
<tr data-row-id="u2" class="mdc-data-table__row mdc-data-table__row--selected" aria-selected="true">
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
<div class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected">
<input type="checkbox" class="mdc-checkbox__native-control" checked aria-labelledby="u2"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
</td>
<th class="mdc-data-table__cell" scope="row" id="u2">monarch: prod shared ares-managed-features-provider-heavy</th>
<td class="mdc-data-table__cell">Online</td>
<td class="mdc-data-table__cell">Minor</td>
<td class="mdc-data-table__cell">Not triaged</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
<td class="mdc-data-table__cell">Jeremy Lake</td>
</tr>
<tr data-row-id="u3" class="mdc-data-table__row">
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
<div class="mdc-checkbox mdc-data-table__row-checkbox">
<input type="checkbox" class="mdc-checkbox__native-control" aria-labelledby="u3"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</td>
<th class="mdc-data-table__cell" scope="row" id="u2">monarch: prod shared ares-managed-features-provider-heavy</th>
<td class="mdc-data-table__cell">Online</td>
<td class="mdc-data-table__cell">Minor</td>
<td class="mdc-data-table__cell">Not triaged</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
<td class="mdc-data-table__cell">Jeremy Lake</td>
</tr>
<tr data-row-id="u3" class="mdc-data-table__row">
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
<div class="mdc-checkbox mdc-data-table__row-checkbox">
<input type="checkbox" class="mdc-checkbox__native-control" aria-labelledby="u3"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
</td>
<th class="mdc-data-table__cell" scope="row" id="u3">Arcus watch slowdown</th>
<td class="mdc-data-table__cell">Online</td>
<td class="mdc-data-table__cell">Negligible</td>
<td class="mdc-data-table__cell">Triaged</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
<td class="mdc-data-table__cell">Angelina Cheng</td>
</tr>
</tbody>
</table>
</td>
<th class="mdc-data-table__cell" scope="row" id="u3">Arcus watch slowdown</th>
<td class="mdc-data-table__cell">Online</td>
<td class="mdc-data-table__cell">Negligible</td>
<td class="mdc-data-table__cell">Triaged</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
<td class="mdc-data-table__cell">Angelina Cheng</td>
</tr>
</tbody>
</table>
</div>
</div>
```

Expand All @@ -218,6 +222,7 @@ Please refer to the [WAI-ARIA Authoring Practices for table](https://www.w3.org/
CSS Class | Description
--- | ---
`mdc-data-table` | Mandatory. The root DOM element containing `table` and other supporting elements.
`mdc-data-table__table-container` | Mandatory. Container of Table element. Used for horizontal overflowing of table content.
`mdc-data-table__table` | Mandatory. Table element. Added to `table` HTML tag.
`mdc-data-table__header-row` | Mandatory. Table header row element. Added to `thead > tr` HTML tag.
`mdc-data-table__header-cell` | Mandatory. Table header cell element. Added to `thead > tr > th` HTML tag.
Expand Down
Loading

0 comments on commit b065a4d

Please sign in to comment.