Skip to content

Commit

Permalink
feat(data-table): Added styles to support column sorting.
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 299146937
  • Loading branch information
@abhiomkar
abhiomkar authored and Copybara-Service committed Mar 5, 2020
1 parent 98b8434 commit 17b9699
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 3 deletions.
71 changes: 71 additions & 0 deletions packages/mdc-data-table/README.md
View file
Expand Up @@ -200,6 +200,75 @@ MDC Data Table component auto instantiates `MDCCheckbox` for header row checkbox
</div>
```

### Data table with column sorting

```html
<div class="mdc-data-table">
<table class="mdc-data-table__table" aria-label="Dessert calories">
<thead>
<tr>
<th
class="mdc-data-table__header-cell mdc-data-table__header-cell--with-sort"
role="columnheader"
scope="col"
>
<div class="mdc-data-table__header-cell-wrapper">
<div class="mdc-data-table__header-cell-label">
Dessert
</div>
<button class="mdc-icon-button material-icons mdc-data-table__sort-icon-button">arrow_downward</button>
</div>
</th>
<th
class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric mdc-data-table__header-cell--with-sort mdc-data-table__header-cell--sorted"
role="columnheader"
scope="col"
aria-sort="ascending"
>
<div class="mdc-data-table__header-cell-wrapper">
<button class="mdc-icon-button material-icons mdc-data-table__sort-icon-button">arrow_downward</button>
<div class="mdc-data-table__header-cell-label">
Carbs (g)
</div>
</div>
</th>
<th
class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric mdc-data-table__header-cell--with-sort"
role="columnheader"
scope="col"
>
<div class="mdc-data-table__header-cell-wrapper">
<button class="mdc-icon-button material-icons mdc-data-table__sort-icon-button">arrow_downward</button>
<div class="mdc-data-table__header-cell-label">
Protein (g)
</div>
</div>
</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">
<td class="mdc-data-table__cell">Frozen yogurt</td>
<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>
</tbody>
</table>
</div>
```

## Style Customization

### CSS Classes
Expand Down Expand Up @@ -243,6 +312,8 @@ Mixin | Description
`cell-padding($leading-padding, $trailing-padding)` | Sets leading & trailing padding for all cells.
`column-widths($width-list)` | Sets the custom widths for each table column.
`density($density-scale)` | Sets density scale to data table. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`. Use corresponding density mixins of child components (such as Checkbox) to apply density scales which will be rendered inside data table as content.
`sort-icon-color($color)` | Sets the color of sort icon button when it is in idle state (icon showed on header cell focus).
`sort-icon-active-color($color)` | Sets the color of sort icon button when it is activated (sorted).

## Accessibility

Expand Down
80 changes: 78 additions & 2 deletions packages/mdc-data-table/_mixins.scss
View file
Expand Up @@ -22,11 +22,12 @@

@use "sass:list";
@use "@material/animation/functions";
@use "@material/checkbox/mixins" as checkbox-mixins;
@use "@material/density/functions" as density-functions;
@use "@material/elevation/mixins";
@use "@material/feature-targeting/functions" as feature-targeting-functions;
@use "@material/feature-targeting/mixins" as feature-targeting-mixins;
@use "@material/checkbox/mixins" as checkbox-mixins;
@use "@material/density/functions" as density-functions;
@use "@material/icon-button/mixins" as icon-button-mixins;
@use "@material/rtl/mixins" as rtl-mixins;
@use "@material/shape/mixins" as shape-mixins;
@use "@material/theme/mixins" as theme-mixins;
Expand All @@ -37,6 +38,7 @@
@mixin core-styles($query: feature-targeting-functions.all()) {
$feat-structure: feature-targeting-functions.create-target($query, structure);
$feat-typography: feature-targeting-functions.create-target($query, typography);
$feat-animation: feature-targeting-functions.create-target($query, animation);

// postcss-bem-linter: define data-table

Expand Down Expand Up @@ -65,6 +67,8 @@
$trailing-padding: variables.$cell-trailing-padding,
$query: $query
);
@include sort-icon-color(variables.$sort-icon-color, $query: $query);
@include sort-icon-active-color(variables.$sort-icon-active-color, $query: $query);
}

@include feature-targeting-mixins.targets($feat-structure) {
Expand Down Expand Up @@ -123,6 +127,7 @@
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
outline: none;

@include rtl-mixins.rtl {
/* @noflip */
Expand All @@ -143,6 +148,77 @@
}
}
}

.mdc-data-table__sort-icon-button {
@include icon-button-mixins.density(
$density-scale: variables.$sort-icon-density-scale,
$query: $query);

@include feature-targeting-mixins.targets($feat-structure) {
@include rtl-mixins.reflexive-box(margin, left, 4px);
}

.mdc-data-table__header-cell--numeric & {
@include feature-targeting-mixins.targets($feat-structure) {
@include rtl-mixins.reflexive-box(margin, right, 4px);
}
}

@include feature-targeting-mixins.targets($feat-animation) {
transition: functions.standard(transform, $duration: 150ms);
}

.mdc-data-table__header-cell--sorted-descending & {
@include feature-targeting-mixins.targets($feat-structure) {
transform: rotate(-180deg);
}
}

@include feature-targeting-mixins.targets($feat-structure) {
opacity: 0;
}

.mdc-data-table__header-cell:hover &,
.mdc-data-table__header-cell--sorted & {
@include feature-targeting-mixins.targets($feat-structure) {
opacity: 1;
}
}
}

.mdc-data-table__header-cell-wrapper {
@include feature-targeting-mixins.targets($feat-structure) {
display: inline-flex;
align-items: center;
}
}

.mdc-data-table__header-cell--with-sort {
@include feature-targeting-mixins.targets($feat-structure) {
cursor: pointer;
}
}
}

/// Sets the color of sort icon button when it is in idle state.
/// (icon showed on header cell focus)
/// @param {String} $color - Color of sort icon button
@mixin sort-icon-color($color, $query: mdc-feature-all()) {
$feat-color: feature-targeting-functions.create-target($query, color);

.mdc-data-table__sort-icon-button {
@include icon-button-mixins.ink-color($color, $query: $query);
}
}

/// Sets the color of sort icon button when it is activated (sorted).
/// @param {String} $color - Color of sort icon button
@mixin sort-icon-active-color($color, $query: mdc-feature-all()) {
$feat-color: feature-targeting-functions.create-target($query, color);

.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button {
@include icon-button-mixins.ink-color($color, $query: $query);
}
}

@mixin fill-color($color, $query: feature-targeting-functions.all()) {
Expand Down
5 changes: 4 additions & 1 deletion packages/mdc-data-table/_variables.scss
View file
Expand Up @@ -27,7 +27,6 @@ $fill-color: surface !default;
$header-row-fill-color: inherit !default;
$row-fill-color: inherit !default;
$selected-row-fill-color: rgba(theme-variables.prop-value(primary), .04) !default;

$checked-icon-color: primary !default;
$divider-color: rgba(theme-variables.prop-value(on-surface), .12) !default;
$divider-size: 1px !default;
Expand All @@ -37,6 +36,10 @@ $checkbox-touch-dimension: 48px !default;
$header-row-text-color: rgba(theme-variables.prop-value(on-surface), .87) !default;
$row-text-color: rgba(theme-variables.prop-value(on-surface), .87) !default;

$sort-icon-color: rgba(theme-variables.prop-value(on-surface), .6) !default;
$sort-icon-active-color: rgba(theme-variables.prop-value(on-surface), .87) !default;
$sort-icon-density-scale: -5 !default;

$shape-radius: medium !default;
$stroke-size: 1px !default;
$stroke-color: rgba(theme-variables.prop-value(on-surface), .12) !default;
Expand Down
1 change: 1 addition & 0 deletions packages/mdc-data-table/package.json
View file
Expand Up @@ -24,6 +24,7 @@
"@material/dom": "^5.1.0",
"@material/elevation": "^5.1.0",
"@material/feature-targeting": "^5.1.0",
"@material/icon-button": "^5.1.0",
"@material/rtl": "^5.1.0",
"@material/shape": "^5.1.0",
"@material/theme": "^5.1.0",
Expand Down
2 changes: 2 additions & 0 deletions packages/mdc-data-table/test/feature-targeting-any.test.scss
View file
Expand Up @@ -23,6 +23,8 @@
@include data-table.cell-padding(0, $query: $query);
@include data-table.column-widths(0, $query: $query);
@include data-table.density(0, $query: $query);
@include data-table.sort-icon-color(red, $query: $query);
@include data-table.sort-icon-active-color(red, $query: $query);
}
}

Expand Down

0 comments on commit 17b9699

Please sign in to comment.