feat(data-table): virtual scroll + sticky headers + column widths #859

emoralesb05 · 2017-09-06T18:10:33Z

Description

What's included?

feat(data-table): add [td-data-table-column-row] atomic element to be more explicit on data-table structure.
feat(data-table): add virtual scroll capability when setting flex or a static height
feat(data-table): add sticky headers capability when setting flex or a static height
feat(data-table): add configurable column widhts via ITdDataTableColumn config
fix(data-table): issue when changing pages and unselecting all rows Td-data-table #808
Updated DEMO and DOCS.

Test Steps

ng serve
Go to http://localhost:4200/#/components/data-table
Play with demo

General Tests for Every PR

ng serve --aot still works.
npm run lint passes.
npm test passes and code coverage is not lower.
npm run build still works.

Screenshots or link to CodePen/Plunker/JSfiddle

…l scroll

…-table

…dhts

…h of 650

… to be dynamic

…h is defined

jeremysmartt · 2017-09-11T15:57:34Z

src/platform/core/data-table/README.md

+  sortable?: boolean; // used to make a particular column sortable
+  hidden?: boolean; // used to hide the column in the data table on the fly
+  filter?: boolean;
+  width?: ITdDataTableColumnWidth | number; // used to configure the widhts of the columns, if omitted it will fill the rest of the space


typo, widhts

jeremysmartt · 2017-09-11T15:58:04Z

src/platform/core/data-table/README.md

+  tooltip?: string; // used to add a tooltip into the column header
+  numeric?: boolean; // used to right align elements if they are numeric
+  format?: (value: any) => any; // used to format the cell values
+  nested?: boolean;


shouldn't you add a description on this one also?

jeremysmartt · 2017-09-11T15:58:10Z

src/platform/core/data-table/README.md

+  nested?: boolean;
+  sortable?: boolean; // used to make a particular column sortable
+  hidden?: boolean; // used to hide the column in the data table on the fly
+  filter?: boolean;


shouldn't you add a description on this one also?

This one is mute.. i actually debated about removing it since its not used in the data table.. its used as a helper property outside of it.

jeremysmartt · 2017-09-11T16:04:04Z

src/platform/core/data-table/data-table-row/data-table-row.component.ts

+import { TdDataTableColumnComponent } from '../data-table-column/data-table-column.component';
+
+@Component({
+  /* tslint:disable-next-line */


Is this disable-next-line necessary?

yup, since component typically need to start with td haha and only be selectors

jeremysmartt · 2017-09-11T16:11:26Z

src/platform/core/data-table/data-table.component.html

    <tr td-data-table-row
        #dtRow
        [tabIndex]="selectable ? 0 : -1"
        [selected]="(clickable || selectable) && isRowSelected(row)"
-        *ngFor="let row of data; let rowIndex = index"
+        *ngFor="let row of data | slice:fromRow:toRow; let rowIndex = index"


jeremysmartt · 2017-09-11T16:20:13Z

src/platform/core/data-table/data-table.component.ts

        }
+        this._shiftPreviouslyPressed = true;
+      } else if (mouseEvent && !mouseEvent.shiftKey) {


comments on to what is going on here?

jeremysmartt · 2017-09-11T16:21:11Z

src/platform/core/data-table/data-table.component.ts

+    if (fixedTotalWidth < this.hostWidth) {
+      recalculateHostWidth = this.hostWidth - fixedTotalWidth;
+    }
+    if (flexibleWidths && recalculateHostWidth) {


lots of stuff going on in here, comments would be useful

jeremysmartt · 2017-09-11T16:21:31Z

src/platform/core/data-table/data-table.component.ts

+        if (widthOpts && widthOpts.min >= this._widths[index].value) {
+          this._widths[index].value = widthOpts.min;
+          this._widths[index].min = true;
+        } else if (widthOpts && widthOpts.max <= this._widths[index].value) {


same as above, comments would help

jeremysmartt · 2017-09-11T16:25:38Z

src/platform/core/data-table/data-table-column/data-table-column.component.ts

@@ -92,8 +92,11 @@ export class TdDataTableColumnComponent {
    this._renderer.addClass(this._elementRef.nativeElement, 'td-data-table-column');
  }

-  handleSortBy(): void {
-    this.onSortChange.emit({name: this.name, order: this._sortOrder});
+  @HostListener('click', ['event'])


add some comments of to why this is needed

jeremysmartt · 2017-09-11T16:26:20Z

src/platform/core/data-table/data-table.component.html

    <th td-data-table-column class="mat-checkbox-column" *ngIf="selectable">
      <md-checkbox
        #checkBoxAll
        *ngIf="multiple"
        [disabled]="!hasData"
        [indeterminate]="indeterminate && !allSelected && hasData"
        [checked]="allSelected && hasData"
-        (click)="selectAll(!checkBoxAll.checked)"
+        (click)="blockEvent($event); selectAll(!checkBoxAll.checked)"


hmm, can we add comments here to why this is blocked?

jeremysmartt · 2017-09-11T16:39:47Z

src/platform/core/data-table/data-table-row/data-table-row.component.ts

  constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {
    this._renderer.addClass(this._elementRef.nativeElement, 'td-data-table-row');
  }

+  @HostListener('click', ['$event'])


can we add comments on to what this is here for?

jeremysmartt · 2017-09-11T16:40:25Z

src/platform/core/data-table/data-table.component.ts

+  }
+
+  get offsetTransform(): SafeStyle {
+    let offset: number = 0;


comments here?

emoralesb05 · 2017-09-11T17:24:44Z

Updated code with comments on how a few things work

weijyewang · 2017-12-27T13:28:23Z

hi, is the documentation updated to show on the sticky header and virtual scrolling usage?

emoralesb05 · 2017-12-28T02:35:11Z

The 3rd demo uses both in our docs site.

emoralesb05 added 4 commits July 24, 2017 15:38

feat(data-table): add fixed header, flexible column widths and virtua…

33f4f45

…l scroll

fix(data-table): keep min width even if multiple checkbox isnt rendered

8eaa1cb

merge develop

9c1816e

merge conflict fixes

e162575

emoralesb05 added the in progress label Sep 6, 2017

emoralesb05 added this to the Beta.7 milestone Sep 6, 2017

kyleledbetter mentioned this pull request Sep 7, 2017

Feature Request - Data Table: Fixed Header when scrolling #494

Closed

emoralesb05 added 16 commits September 8, 2017 08:56

feat(): update atomic data table demo

506514a

feat(data-table): make users provide all the pieces of an atomic data…

f40ee43

…-table

chore(data-table): update DEMO and DOCS with latest changes

7a90df7

chore(data-table): update README

7a842e3

feat(pretty-markdown): update pretty markdown to take into account wi…

f29b990

…dhts

chore(): update all README files to have a table description min widt…

8bc1050

…h of 650

fix(): remove unused code

05fde60

fix(data-table): hardcode the row height for now, since its not meant…

d641d16

… to be dynamic

fix(data-table): restart scroll at 0 when data array changes

a8365c8

fix(data-table): hidden column demo

b50d61d

fix(): remove the fakeCols and set a min height of 100px when no widt…

d34fae9

…h is defined

small fix for unit tests

b17e071

fix(): demo code width

970c2a4

fix(data-table): properly import debounceTime from rxjs

0204596

fix(data-table): unit tests

42be528

fix(data-table): last unit test

d03caef

emoralesb05 added feature and removed in progress labels Sep 8, 2017

fix(): remove unused code

273af03

This was referenced Sep 8, 2017

Td-data-table #808

Closed

[Feature] Fixed table header #824

Closed

Merge branch 'develop' into feature/data-table-v2

be35b51

jeremysmartt requested changes Sep 11, 2017

View reviewed changes

jeremysmartt reviewed Sep 11, 2017

View reviewed changes

emoralesb05 added 3 commits September 11, 2017 10:19

fix(data-table): add comments to code blocks

892dbb2

Merge branch 'develop' into feature/data-table-v2

ed30be3

chore(): add another comment to code block

530d8a1

jeremysmartt self-assigned this Sep 11, 2017

jeremysmartt approved these changes Sep 11, 2017

View reviewed changes

emoralesb05 merged commit c5f065a into develop Sep 11, 2017

emoralesb05 deleted the feature/data-table-v2 branch September 11, 2017 18:26

quanterion mentioned this pull request Sep 12, 2017

Data table rows can not have custom height after beta.7 #868

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(data-table): virtual scroll + sticky headers + column widths #859

feat(data-table): virtual scroll + sticky headers + column widths #859

emoralesb05 commented Sep 6, 2017 •

edited

Loading

jeremysmartt Sep 11, 2017

jeremysmartt Sep 11, 2017

jeremysmartt Sep 11, 2017

emoralesb05 Sep 11, 2017

jeremysmartt Sep 11, 2017

emoralesb05 Sep 11, 2017

jeremysmartt Sep 11, 2017

jeremysmartt Sep 11, 2017

jeremysmartt Sep 11, 2017

jeremysmartt Sep 11, 2017

jeremysmartt Sep 11, 2017

jeremysmartt Sep 11, 2017

jeremysmartt Sep 11, 2017

jeremysmartt Sep 11, 2017

emoralesb05 commented Sep 11, 2017

weijyewang commented Dec 27, 2017

emoralesb05 commented Dec 28, 2017

feat(data-table): virtual scroll + sticky headers + column widths #859

feat(data-table): virtual scroll + sticky headers + column widths #859

Conversation

emoralesb05 commented Sep 6, 2017 • edited Loading

Description

What's included?

Test Steps

General Tests for Every PR

Screenshots or link to CodePen/Plunker/JSfiddle

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

emoralesb05 commented Sep 11, 2017

weijyewang commented Dec 27, 2017

emoralesb05 commented Dec 28, 2017

emoralesb05 commented Sep 6, 2017 •

edited

Loading