ng-cdk-table-virtual-scroll
Version:
Virtual scroll for for Angular Cdk Table
57 lines • 7.76 kB
JavaScript
import { DataSource } from '@angular/cdk/table';
import { BehaviorSubject, ReplaySubject, Subscription, } from 'rxjs';
export class TableVirtualScrollDataSource extends DataSource {
constructor(initialData = []) {
super();
/** Stream emitting render data to the table (depends on ordered data changes). */
this._renderData = new BehaviorSubject([]);
/**
* Subscription to the changes that should trigger an update to the table's rendered rows, such
* as filtering, sorting, pagination, or base data changes.
*/
this._renderChangesSubscription = null;
this._data = new BehaviorSubject(initialData);
this.updateChangeSubscription();
}
/** Array of data that should be rendered by the table, where each object represents one row. */
get data() {
return this._data.value;
}
set data(data) {
this._data.next(data);
}
updateChangeSubscription() {
this.initStreams();
this._renderChangesSubscription = new Subscription();
this._renderChangesSubscription.add(this._data.subscribe((data) => this.dataToRender$.next(data)));
this._renderChangesSubscription.add(this.dataOfRange$.subscribe((data) => this._renderData.next(data)));
}
initStreams() {
if (!this.streamsReady) {
this.dataToRender$ = new ReplaySubject(1);
this.dataOfRange$ = new ReplaySubject(1);
this.streamsReady = true;
}
}
/**
* Used by the MatTable. Called when it connects to the data source.
* @private
*/
connect() {
if (!this._renderChangesSubscription) {
this.updateChangeSubscription();
}
return this._renderData;
}
/**
* Used by the MatTable. Called when it disconnects from the data source.
* @private
*/
disconnect() {
if (this._renderChangesSubscription) {
this._renderChangesSubscription.unsubscribe();
}
this._renderChangesSubscription = null;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtZGF0YS1zb3VyY2UuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZy1jZGstdGFibGUtdmlydHVhbC1zY3JvbGwvIiwic291cmNlcyI6WyJsaWIvdGFibGUtZGF0YS1zb3VyY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ2hELE9BQU8sRUFDTCxlQUFlLEVBRWYsYUFBYSxFQUViLFlBQVksR0FDYixNQUFNLE1BQU0sQ0FBQztBQUVkLE1BQU0sT0FBTyw0QkFBZ0MsU0FBUSxVQUFhO0lBeUJoRSxZQUFZLGNBQW1CLEVBQUU7UUFDL0IsS0FBSyxFQUFFLENBQUM7UUF0QlYsa0ZBQWtGO1FBQ2pFLGdCQUFXLEdBQUcsSUFBSSxlQUFlLENBQU0sRUFBRSxDQUFDLENBQUM7UUFFNUQ7OztXQUdHO1FBQ08sK0JBQTBCLEdBQXdCLElBQUksQ0FBQztRQWdCL0QsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLGVBQWUsQ0FBTSxXQUFXLENBQUMsQ0FBQztRQUNuRCxJQUFJLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztJQUNsQyxDQUFDO0lBWkQsZ0dBQWdHO0lBQ2hHLElBQUksSUFBSTtRQUNOLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUM7SUFDMUIsQ0FBQztJQUNELElBQUksSUFBSSxDQUFDLElBQVM7UUFDaEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDeEIsQ0FBQztJQVFTLHdCQUF3QjtRQUNoQyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDbkIsSUFBSSxDQUFDLDBCQUEwQixHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDckQsSUFBSSxDQUFDLDBCQUEwQixDQUFDLEdBQUcsQ0FDakMsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQzlELENBQUM7UUFDRixJQUFJLENBQUMsMEJBQTBCLENBQUMsR0FBRyxDQUNqQyxJQUFJLENBQUMsWUFBWSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FDbkUsQ0FBQztJQUNKLENBQUM7SUFFUyxXQUFXO1FBQ25CLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFO1lBQ3RCLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxhQUFhLENBQU0sQ0FBQyxDQUFDLENBQUM7WUFDL0MsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLGFBQWEsQ0FBTSxDQUFDLENBQUMsQ0FBQztZQUM5QyxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztTQUMxQjtJQUNILENBQUM7SUFFRDs7O09BR0c7SUFDSCxPQUFPO1FBQ0wsSUFBSSxDQUFDLElBQUksQ0FBQywwQkFBMEIsRUFBRTtZQUNwQyxJQUFJLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztTQUNqQztRQUVELE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQztJQUMxQixDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsVUFBVTtRQUNSLElBQUksSUFBSSxDQUFDLDBCQUEwQixFQUFFO1lBQ25DLElBQUksQ0FBQywwQkFBMEIsQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUMvQztRQUNELElBQUksQ0FBQywwQkFBMEIsR0FBRyxJQUFJLENBQUM7SUFDekMsQ0FBQztDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGF0YVNvdXJjZSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay90YWJsZSc7XHJcbmltcG9ydCB7XHJcbiAgQmVoYXZpb3JTdWJqZWN0LFxyXG4gIE9ic2VydmFibGUsXHJcbiAgUmVwbGF5U3ViamVjdCxcclxuICBTdWJqZWN0LFxyXG4gIFN1YnNjcmlwdGlvbixcclxufSBmcm9tICdyeGpzJztcclxuXHJcbmV4cG9ydCBjbGFzcyBUYWJsZVZpcnR1YWxTY3JvbGxEYXRhU291cmNlPFQ+IGV4dGVuZHMgRGF0YVNvdXJjZTxUPiB7XHJcbiAgLyoqIFN0cmVhbSB0aGF0IGVtaXRzIHdoZW4gYSBuZXcgZGF0YSBhcnJheSBpcyBzZXQgb24gdGhlIGRhdGEgc291cmNlLiAqL1xyXG4gIHByaXZhdGUgcmVhZG9ubHkgX2RhdGE6IEJlaGF2aW9yU3ViamVjdDxUW10+O1xyXG5cclxuICAvKiogU3RyZWFtIGVtaXR0aW5nIHJlbmRlciBkYXRhIHRvIHRoZSB0YWJsZSAoZGVwZW5kcyBvbiBvcmRlcmVkIGRhdGEgY2hhbmdlcykuICovXHJcbiAgcHJpdmF0ZSByZWFkb25seSBfcmVuZGVyRGF0YSA9IG5ldyBCZWhhdmlvclN1YmplY3Q8VFtdPihbXSk7XHJcblxyXG4gIC8qKlxyXG4gICAqIFN1YnNjcmlwdGlvbiB0byB0aGUgY2hhbmdlcyB0aGF0IHNob3VsZCB0cmlnZ2VyIGFuIHVwZGF0ZSB0byB0aGUgdGFibGUncyByZW5kZXJlZCByb3dzLCBzdWNoXHJcbiAgICogYXMgZmlsdGVyaW5nLCBzb3J0aW5nLCBwYWdpbmF0aW9uLCBvciBiYXNlIGRhdGEgY2hhbmdlcy5cclxuICAgKi9cclxuICBwcm90ZWN0ZWQgX3JlbmRlckNoYW5nZXNTdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbiB8IG51bGwgPSBudWxsO1xyXG5cclxuICBwdWJsaWMgZGF0YVRvUmVuZGVyJDogU3ViamVjdDxUW10+O1xyXG4gIHB1YmxpYyBkYXRhT2ZSYW5nZSQ6IFN1YmplY3Q8VFtdPjtcclxuICBwcm90ZWN0ZWQgc3RyZWFtc1JlYWR5OiBib29sZWFuO1xyXG5cclxuICAvKiogQXJyYXkgb2YgZGF0YSB0aGF0IHNob3VsZCBiZSByZW5kZXJlZCBieSB0aGUgdGFibGUsIHdoZXJlIGVhY2ggb2JqZWN0IHJlcHJlc2VudHMgb25lIHJvdy4gKi9cclxuICBnZXQgZGF0YSgpIHtcclxuICAgIHJldHVybiB0aGlzLl9kYXRhLnZhbHVlO1xyXG4gIH1cclxuICBzZXQgZGF0YShkYXRhOiBUW10pIHtcclxuICAgIHRoaXMuX2RhdGEubmV4dChkYXRhKTtcclxuICB9XHJcblxyXG4gIGNvbnN0cnVjdG9yKGluaXRpYWxEYXRhOiBUW10gPSBbXSkge1xyXG4gICAgc3VwZXIoKTtcclxuICAgIHRoaXMuX2RhdGEgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PFRbXT4oaW5pdGlhbERhdGEpO1xyXG4gICAgdGhpcy51cGRhdGVDaGFuZ2VTdWJzY3JpcHRpb24oKTtcclxuICB9XHJcblxyXG4gIHByb3RlY3RlZCB1cGRhdGVDaGFuZ2VTdWJzY3JpcHRpb24oKSB7XHJcbiAgICB0aGlzLmluaXRTdHJlYW1zKCk7XHJcbiAgICB0aGlzLl9yZW5kZXJDaGFuZ2VzU3Vic2NyaXB0aW9uID0gbmV3IFN1YnNjcmlwdGlvbigpO1xyXG4gICAgdGhpcy5fcmVuZGVyQ2hhbmdlc1N1YnNjcmlwdGlvbi5hZGQoXHJcbiAgICAgIHRoaXMuX2RhdGEuc3Vic2NyaWJlKChkYXRhKSA9PiB0aGlzLmRhdGFUb1JlbmRlciQubmV4dChkYXRhKSlcclxuICAgICk7XHJcbiAgICB0aGlzLl9yZW5kZXJDaGFuZ2VzU3Vic2NyaXB0aW9uLmFkZChcclxuICAgICAgdGhpcy5kYXRhT2ZSYW5nZSQuc3Vic2NyaWJlKChkYXRhKSA9PiB0aGlzLl9yZW5kZXJEYXRhLm5leHQoZGF0YSkpXHJcbiAgICApO1xyXG4gIH1cclxuXHJcbiAgcHJvdGVjdGVkIGluaXRTdHJlYW1zKCkge1xyXG4gICAgaWYgKCF0aGlzLnN0cmVhbXNSZWFkeSkge1xyXG4gICAgICB0aGlzLmRhdGFUb1JlbmRlciQgPSBuZXcgUmVwbGF5U3ViamVjdDxUW10+KDEpO1xyXG4gICAgICB0aGlzLmRhdGFPZlJhbmdlJCA9IG5ldyBSZXBsYXlTdWJqZWN0PFRbXT4oMSk7XHJcbiAgICAgIHRoaXMuc3RyZWFtc1JlYWR5ID0gdHJ1ZTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFVzZWQgYnkgdGhlIE1hdFRhYmxlLiBDYWxsZWQgd2hlbiBpdCBjb25uZWN0cyB0byB0aGUgZGF0YSBzb3VyY2UuXHJcbiAgICogQHByaXZhdGVcclxuICAgKi9cclxuICBjb25uZWN0KCk6IE9ic2VydmFibGU8VFtdIHwgcmVhZG9ubHkgVFtdPiB7XHJcbiAgICBpZiAoIXRoaXMuX3JlbmRlckNoYW5nZXNTdWJzY3JpcHRpb24pIHtcclxuICAgICAgdGhpcy51cGRhdGVDaGFuZ2VTdWJzY3JpcHRpb24oKTtcclxuICAgIH1cclxuXHJcbiAgICByZXR1cm4gdGhpcy5fcmVuZGVyRGF0YTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFVzZWQgYnkgdGhlIE1hdFRhYmxlLiBDYWxsZWQgd2hlbiBpdCBkaXNjb25uZWN0cyBmcm9tIHRoZSBkYXRhIHNvdXJjZS5cclxuICAgKiBAcHJpdmF0ZVxyXG4gICAqL1xyXG4gIGRpc2Nvbm5lY3QoKSB7XHJcbiAgICBpZiAodGhpcy5fcmVuZGVyQ2hhbmdlc1N1YnNjcmlwdGlvbikge1xyXG4gICAgICB0aGlzLl9yZW5kZXJDaGFuZ2VzU3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XHJcbiAgICB9XHJcbiAgICB0aGlzLl9yZW5kZXJDaGFuZ2VzU3Vic2NyaXB0aW9uID0gbnVsbDtcclxuICB9XHJcbn1cclxuIl19