feat(data-table): allow dynamic row heights in data table even when using its virtual scroll #898
Conversation
now we will cache the height of every row and recalculate the height as we keep scrolling
… data from service
| @@ -73,6 +73,8 @@ export interface IInternalColumnWidth { | |||
| max?: boolean; | |||
| } | |||
|
|
|||
| const TD_VIRTUAL_OFFSET: number = 2; | |||
There was a problem hiding this comment.
add comments of what this is
| private _totalHeight: number = 0; | ||
| private _hostHeight: number = 0; | ||
| private _scrollVerticalOffset: number = 0; | ||
| private _offsetTransform: SafeStyle; |
There was a problem hiding this comment.
add comments on what all these are for
| @@ -182,6 +156,7 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After | |||
|
|
|||
| /** internal attributes */ | |||
| private _data: any[]; | |||
| private _virtualData: any[]; | |||
There was a problem hiding this comment.
add comments on what this is
| this._resizeSubs = this._onResize.asObservable().subscribe(() => { | ||
| if (this._rows) { | ||
| this._rows.toArray().forEach((row: TdDataTableRowComponent, index: number) => { | ||
| this._rowHeightCache[this.fromRow + index] = row.height + 1; |
There was a problem hiding this comment.
instead of caching everything just cache the ones you are looking at. You can recalculate as needed when you scroll up and down. With only a few rows shown should be quick.
There was a problem hiding this comment.
This actually just loops through only the ones rendered by the component.
There was a problem hiding this comment.
The thing we can improve later on is to modify the totalHeight here instead of recalculating it every time.
| // and sum them all to calculate the total height | ||
| this._data.forEach((d: any, index: number) => { | ||
| if (!this._rowHeightCache[index]) { | ||
| this._rowHeightCache[index] = this._rowHeightCache[0] || 48; |
There was a problem hiding this comment.
same as comment above about not caching everything
| // and sum them all to calculate the total height | ||
| this._data.forEach((d: any, index: number) => { | ||
| if (!this._rowHeightCache[index]) { | ||
| this._rowHeightCache[index] = this._rowHeightCache[0] || 48; |
There was a problem hiding this comment.
what is 48? Maybe put that in a class level variable with a descriptive name and comments describing.
| this._totalHeight = 0; | ||
| this._fromRow = 0; | ||
| this._toRow = 0; | ||
| } |
There was a problem hiding this comment.
lots of calculation going on here, add some comments of what it all is doing.
Description
now we will cache the height of every row and recalculate the height as we keep scrolling
Test Steps
ng serveGeneral Tests for Every PR
ng serve --aotstill works.npm run lintpasses.npm testpasses and code coverage is not lower.npm run buildstill works.