feat(table): support sticky headers, footers, and columns #11483

andrewseguin · 2018-05-23T21:42:58Z

jelbourn · 2018-05-24T17:11:06Z

src/cdk/table/cell.ts

@@ -59,6 +66,26 @@ export class CdkColumnDef {
 }
 _name: string;

+ /** Whether this column should be sticky positioned on the left of the row */
+ @Input('stickyLeft')


We typically use either start/end or before/after so that the term applies for RTL as well

jelbourn · 2018-05-24T17:56:16Z

src/cdk/table/has-sticky-state.ts

+ * sticky value.
+ * @docs-private
+ */
+export interface HasStickyState {


What do you think of CanStick?

jelbourn · 2018-05-24T17:57:01Z

src/cdk/table/has-sticky-state.ts

+
+ checkStickyChanged(): boolean;
+
+ resetStickyChanged(): void;


Needs descriptions for these other members

jelbourn · 2018-05-24T17:58:15Z

src/cdk/table/has-sticky-state.ts

+ * @docs-private
+ */
+export interface HasStickyState {
+ /** State of whether the sticky input has changed since it was last checked. */


Omit "State of"

jelbourn · 2018-05-24T18:10:32Z

src/cdk/table/row.ts

 if (!this._columnsDiffer) {
+ const columns = (changes['columns'] && changes['columns'].currentValue) || [];


When would columns not be defined?

If the sticky input changes, then changes: SimpleChanges will not have the columns property (since it didn't change). Prior to this change, the only time ngOnChange was called was when the columns changed; now this is not the only case.

jelbourn · 2018-05-24T21:24:03Z

src/cdk/table/table.ts

+ * the data source provides a new set of data or when a column definition changes its sticky
+ * input. May be called manually for cases where the cell content changes outside of these events.
+ */
+ updateStickyColumnStyles() {


You have another method with the same name that's internal; they should have different names if they're doing different things

Thanks, didn't catch that. Kept this as update (it removes/adds) and the internal one as add (it only adds)

jelbourn · 2018-05-24T21:27:53Z

src/cdk/table/table.ts

+ return acc || d.checkStickyChanged();
+ };
+
+ if (this._headerRowDefs.reduce(stickyCheckReducer, false)) {


Is this not just a some?

const hasStickyStateChanged = (d: HasStickyState) => d.checkStickyChanged(); if (this._headerRowDefs.some(hasStickyStateChanged)) { ... }

No, and I'll add a comment explaining why. The check needs to occur on every definition since it also resets its dirty state

jelbourn · 2018-05-24T21:28:30Z

src/cdk/table/has-sticky-state.ts

+ _hasStickyChanged: boolean = false;
+
+ /** Whether the sticky value has changed since this was last called. */
+ checkStickyChanged(): boolean {


hasStickyStateChanged?

jelbourn · 2018-05-24T21:29:58Z

src/cdk/table/table.spec.ts

+ });
+ }
+
+ describe('on flex layout', () => {


on "display: flex" table style"

jelbourn · 2018-05-24T21:33:45Z

src/lib/table/cell.ts

@@ -71,6 +71,12 @@ export class MatFooterCellDef extends CdkFooterCellDef {
 export class MatColumnDef extends CdkColumnDef {
 /** Unique name for this column. */
 @Input('matColumnDef') name: string;
+
+ /** Whether this column should be sticky positioned on the left of the right */
+ @Input() stickyLeft: boolean;


The vast, vast majority of cases are doing to want to stick to the start(left) side. Optimizing for the common case, I think we should just make the start/left position sticky and the other one stickyEnd.

We should talk separately about whether this should be something like cdkColumnSticky

SGTM, I agree the vast majority wants to just use sticky and mean it to be the start.

Based on angular#11483 (comment). Adds a custom tslint rule to enforce that we put getters before setters.

andrewseguin · 2018-05-29T17:54:26Z

Heads up - looks like RTL support is lacking. Left and right are absolute positions and the logic should reverse the column sticky position directions

Based on #11483 (comment). Adds a custom tslint rule to enforce that we put getters before setters.

ngbot · 2018-05-29T20:20:24Z

Hi @andrewseguin! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

jelbourn

This PR should capture RTL as well, unless you want to retarget it to a branch

jelbourn · 2018-05-29T20:50:48Z

src/cdk/table/cell.ts

@@ -59,6 +66,26 @@ export class CdkColumnDef {
 }
 _name: string;

+ /** Whether this column should be sticky positioned on the start of the row */
+ @Input('sticky')


The argument to @Input() is unnecessary when it matches the property name (here and below)

cc @crisbeto might be another fun lint check :)
(also, at some point we should probably think about upstreaming these to codelyzer)

jelbourn · 2018-05-29T20:53:39Z

src/cdk/table/can-stick.ts

+/**
+ * Mixin to provide a directive with a function that checks if the sticky input has been
+ * changed since the last time the function was called. Essentially adds a dirty-check to the
+ * sticky value.


Include something in the description here that explains why the actual sticky property isn't included in the mixin

jelbourn · 2018-05-29T20:54:49Z

src/cdk/table/sticky-styler.ts

+ * @param stickCellCSS The CSS class that will be applied to every row/cell that has
+ * sticky positioning applied.
+ */
+ constructor(private isNativeHtmlTable: boolean, private stickCellCSS: string) { }


stickCellCSS -> stickCellCss

andrewseguin · 2018-05-29T22:18:46Z

Added two commits:

Add support for RTL (directionality changes should influence sticky column positioning)
Move sticky setter/getter to the mixin

jelbourn

So, I started thinking about this in terms of how tree-shakable the code is. Let's chat on Thursday.

jelbourn · 2018-05-30T00:20:33Z

src/cdk/table/sticky-styler.ts

+ const cellWidths: number[] = this._getCellWidths(rows[0]);
+ const startPositions = this._getStickyStartColumnPositions(cellWidths, stickyStartStates);
+ const endPositions = this._getStickyEndColumnPositions(cellWidths, stickyEndStates);
+ const isLtr = this.direction === 'ltr';


You should invert this; it's better to explicitly check for RTL instead of LTR. We've had cases where the check was like this and dir ended up being empty- the component then assumed it was in RTL.

amcdnl

Looks good overall.

amcdnl · 2018-06-04T16:37:03Z

src/cdk/table/sticky-styler.ts

+ const endPositions = this._getStickyEndColumnPositions(cellWidths, stickyEndStates);
+ const isRtl = this.direction === 'rtl';
+
+ for (let row of rows) {


Why let vs `const?

amcdnl · 2018-06-04T16:38:16Z

src/cdk/table/sticky-styler.ts

+ return;
+ }
+
+ const numCells = rows[0].children.length;


I'd make a pointer to rows[0], its used here and below.

amcdnl · 2018-06-04T16:48:19Z

One footnote of this is its not compatible with virtual scrolling, we would need to rethink some of this when we apply that strategy.

jelbourn

LGTM

tatsujb · 2018-06-08T07:37:12Z

Amazing!!! 😃 Could we have a minor release to test out this feature pretty please? 💐

EDIT : if i'm working straight off of master what sort of syntax should I employ to sticky a column?

andrewseguin · 2018-06-08T16:19:44Z

For examples on how to use the sticky stuff, check out the examples that start with "table-sticky-*"

https://github.com/angular/material2/tree/master/src/material-examples

jelbourn · 2018-06-08T17:29:52Z

Next minor release is probably going to be in a couple weeks

tatsujb · 2018-06-11T08:22:28Z

@andrewseguin thanks! I haven't figured out how to have an angular cli boilerplater with master version of material2 though. (tried npm i angular/material2#master got a weird "material2-srcs": "github:angular/material2#master", in pmy package json. which did not load material, i tried adding npm i @angular/material then moving the contents of the material2-srcs in node-modules to @angular/material but as I expected that did not work.)

...sorry I'm a beginner 😢 (I really really want to train up my sticky column use because I plan to replace my hacked-in sticky columns with the official ones as soon as they drop)

Abhishek-Shrotriya · 2018-06-14T14:33:35Z

Hi, is there any specific date when the Mat-table release with sticky/ pinned columns for IE be publicly available
Thanks for your help.

sadplace · 2018-06-14T14:54:22Z

Hi,

Yes, that is really cool and i really need the sticky columns for my project. So if possible i need to know more a less when this is going to be released. Thanks :)

tatsujb · 2018-06-15T07:23:21Z

@sadplace three comments higher : #11483 (comment)

jaya0selva · 2018-06-19T18:23:39Z

Sticky is not working in IE. In chrome also, Sticky column alignments are breaking while scrolling.

MrJitu · 2018-06-21T06:42:07Z

Hi, Sticky/Fixed header is not working in IE. Is there any plan to fix this issue in next release?

Misiu · 2018-06-21T08:31:24Z

@andrewseguin are You guys planning to add examples showing sticky header and columns to main material site (https://material.angular.io/)?
Material is awesome and each new feature should he highlighted on main site.
For example look at Kendo UI(https://demos.telerik.com/kendo-ui/) they are clearly showing what's new, what's updated.
Sticky header, footer and columns was one of most desired feature, but when You go to main site there isn't even a single example showing it.

jelbourn · 2018-06-21T16:49:05Z

IE11 explicitly won't be supported; we decided that the amount of code it would take to work around the absence of position: sticky (and the resources spent maintaining it) isn't worth it based on its share of browser users.

Andrew was just able to finish up the feature before going out-of-office for a while; I'd be happy to accept PRs that add examples for the docs site.

Gwindorith · 2018-07-04T14:15:01Z

Hi!

I have updated to the latest version, but if i add the sticky keyword to multiple columns, the columns go behind each other other then staying at the position where they are.

So all three of my colums end up sticky on the left side of the screen:

`
<th mat-header-cell *matHeaderCellDef mat-sort-header> Resourcegroup
<td mat-cell *matCellDef="let element"> {{element.resourceGroup.resourceGroup}}

    <ng-container matColumnDef="description" sticky>
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
      <td mat-cell style="white-space: nowrap; padding-right: 8px;" *matCellDef="let element"> {{element.resourceGroup.description}} </td>
    </ng-container>

    <ng-container matColumnDef="status" sticky>
      <th mat-header-cell class="headerPadding" *matHeaderCellDef> status </th>
      <td mat-cell style="white-space: nowrap; padding-right: 10px;" *matCellDef="let element"> {{element.status}} </td>
    </ng-container>

`

Please advice!

volei · 2018-07-06T09:03:03Z

I edited, because in the meanwhile found more info and solutions:

I have a similar problem. It seems that it is browser dependant:

2nd and 3rd bottom sticky rows go behind each other with a minimal vertical offset (2px)
(except for:
-- 1st footer row. But has clientHeight automatically set to 2,
-- Footer row with text directly written into HTML DOM, thus not being {{double-curly-brace bound text}}.
I found out that in case of only {{}}-text the cdk sets the default clientHeight of the row to 2.
My 2 top sticky rows stick ok. Also left and right columns
- Problem so far only in Chrome (Version 67.0.3396.99 64bit)
In Firefox Quantum everything is ok, never hides a sticky row. (even without any solution like below.)
I am using native <table cdk-table ...> with <td cdk-footer-cell ...>

My solution No.1: Attach &zwnj; before the {{}}-placeholders (see [https://stackoverflow.com/questions/2812253/invisible-delimiter-for-strings-in-html]). This simulates actual HTML-text.

My solution No. 2: Define height: 20px; or font-size: medium; in CSS or anything similar in cdk-cell, cdk-header-cell, cdk-footer-cell or in the row's CSS-classes. But this is rather painful, if you do not have a comprehensive CSS-strategy.

updated yesterday, July 5th (v.6.3):

  "dependencies": {
    "@angular/animations": "^6.0.7",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/common": "^6.0.7",
    "@angular/compiler": "^6.0.7",
    "@angular/core": "^6.0.7",
    "@angular/flex-layout": "^6.0.0-beta.16",
    "@angular/forms": "^6.0.7",
    "@angular/http": "^6.0.7",
    "@angular/material": "github:angular/material2-builds",
    "@angular/platform-browser": "^6.0.7",
    "@angular/platform-browser-dynamic": "^6.0.7",
    "@angular/router": "^6.0.7",
    "core-js": "^2.5.7",
    "npm": "^6.1.0",
    "rxjs": "^6.2.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.6.8",
    "@angular/cli": "^6.0.8",
    "@angular/compiler-cli": "^6.0.7",
    "@angular/language-service": "^6.0.7",
    "@types/jasmine": "^2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.4.3",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.3.2",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"

angular-automatic-lock-bot · 2019-09-09T05:01:35Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

andrewseguin requested a review from jelbourn May 23, 2018 21:42

andrewseguin requested a review from amcdnl as a code owner May 23, 2018 21:42

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label May 23, 2018

andrewseguin added the target: minor This PR is targeted for the next minor release label May 23, 2018

jelbourn reviewed May 24, 2018

View reviewed changes

andrewseguin force-pushed the table-sticky branch from 785d480 to 81623c4 Compare May 25, 2018 22:50

crisbeto added a commit to crisbeto/material2 that referenced this pull request May 26, 2018

build: add tslint rule to ensure that setters are declared after getters

0cbe713

Based on angular#11483 (comment). Adds a custom tslint rule to enforce that we put getters before setters.

crisbeto mentioned this pull request May 26, 2018

build: add tslint rule to ensure that setters are declared after getters #11522

Merged

josephperrott pushed a commit that referenced this pull request May 29, 2018

build: add tslint rule to ensure that setters are declared after getters

df7d3a5

Based on #11483 (comment). Adds a custom tslint rule to enforce that we put getters before setters.

jelbourn reviewed May 29, 2018

View reviewed changes

andrewseguin force-pushed the table-sticky branch from 81623c4 to 8b4dc94 Compare May 29, 2018 21:55

jelbourn reviewed May 30, 2018

View reviewed changes

andrewseguin force-pushed the table-sticky branch from 38eae8f to 0899053 Compare May 31, 2018 17:25

amcdnl reviewed Jun 4, 2018

View reviewed changes

andrewseguin added 7 commits June 5, 2018 09:28

feat(table): support sticky headers, footers, and columns

ffb7711

review

8f45877

support rtl sticky columns

01cf286

move sticky to mixin

acc559f

add bidi to bazel BUILD for spec

8f034cb

fix prerender; reverse rtl

7ed0e10

minor revisions

9a85a3d

andrewseguin force-pushed the table-sticky branch from 0899053 to 9a85a3d Compare June 5, 2018 16:39

jelbourn approved these changes Jun 5, 2018

View reviewed changes

jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Jun 5, 2018

minor changes for g3 internal tests

50dd0a0

andrewseguin mentioned this pull request Jun 6, 2018

[Feature Request] pinned columns on mat table #11644

Closed

andrewseguin merged commit edbbc1b into angular:master Jun 7, 2018

gangsthub mentioned this pull request Jun 27, 2018

Create helper for sticky positioning #474

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

		if (!this._columnsDiffer) {
		const columns = (changes['columns'] && changes['columns'].currentValue) \|\| [];

feat(table): support sticky headers, footers, and columns #11483

feat(table): support sticky headers, footers, and columns #11483

Conversation

andrewseguin commented May 23, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrewseguin commented May 29, 2018

ngbot bot commented May 29, 2018

jelbourn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrewseguin commented May 29, 2018

jelbourn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amcdnl left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amcdnl commented Jun 4, 2018

jelbourn left a comment

Choose a reason for hiding this comment

tatsujb commented Jun 8, 2018 • edited Loading

andrewseguin commented Jun 8, 2018

jelbourn commented Jun 8, 2018

tatsujb commented Jun 11, 2018 • edited Loading

Abhishek-Shrotriya commented Jun 14, 2018

sadplace commented Jun 14, 2018

tatsujb commented Jun 15, 2018

jaya0selva commented Jun 19, 2018

MrJitu commented Jun 21, 2018

Misiu commented Jun 21, 2018

jelbourn commented Jun 21, 2018

Gwindorith commented Jul 4, 2018

volei commented Jul 6, 2018 • edited Loading

angular-automatic-lock-bot bot commented Sep 9, 2019

tatsujb commented Jun 8, 2018 •

edited

Loading

tatsujb commented Jun 11, 2018 •

edited

Loading

volei commented Jul 6, 2018 •

edited

Loading