@dimkel/ng-cdk-table-virtual-scroll
Version:
Virtual scroll for for Angular Cdk Table
80 lines • 11.9 kB
JavaScript
import { BehaviorSubject, ReplaySubject, Subscription } from 'rxjs';
import { DataSource } from '@angular/cdk/collections';
export function isTVSDataSource(dataSource) {
return dataSource instanceof CdkTableVirtualScrollDataSource || dataSource instanceof TableVirtualScrollDataSource;
}
export class CdkTableVirtualScrollDataSource 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) {
data = Array.isArray(data) ? data : [];
this._data.next(data);
}
_updateChangeSubscription() {
this.initStreams();
this._renderChangesSubscription?.unsubscribe();
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)));
}
connect() {
if (!this._renderChangesSubscription) {
this._updateChangeSubscription();
}
return this._renderData;
}
disconnect() {
this._renderChangesSubscription?.unsubscribe();
this._renderChangesSubscription = null;
}
initStreams() {
if (!this.streamsReady) {
this.dataToRender$ = new ReplaySubject(1);
this.dataOfRange$ = new ReplaySubject(1);
this.streamsReady = true;
}
}
}
export class TableVirtualScrollDataSource extends DataSource {
constructor(initialData = []) {
super();
this._dataSubject = new BehaviorSubject([]);
this._renderData = new BehaviorSubject([]);
this._renderChangesSubscription = new Subscription();
this.dataToRender$ = new ReplaySubject(1);
this.dataOfRange$ = new ReplaySubject(1);
this._dataSubject.next(initialData);
this._renderChangesSubscription.add(this._dataSubject.subscribe(data => this.dataToRender$.next(data)));
this._renderChangesSubscription.add(this.dataOfRange$.subscribe(data => this._renderData.next(data)));
}
get data() {
return this._dataSubject.value;
}
set data(data) {
this._dataSubject.next(data);
}
connect() {
return this._renderData.asObservable();
}
disconnect() {
this._dataSubject.complete();
this.dataToRender$.complete();
this.dataOfRange$.complete();
this._renderChangesSubscription.unsubscribe();
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtZGF0YS1zb3VyY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy10YWJsZS12aXJ0dWFsLXNjcm9sbC9zcmMvbGliL3RhYmxlLWRhdGEtc291cmNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxlQUFlLEVBQWMsYUFBYSxFQUFXLFlBQVksRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUN6RixPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFPdEQsTUFBTSxVQUFVLGVBQWUsQ0FBSSxVQUFtQjtJQUNwRCxPQUFPLFVBQVUsWUFBWSwrQkFBK0IsSUFBSSxVQUFVLFlBQVksNEJBQTRCLENBQUM7QUFDckgsQ0FBQztBQUVELE1BQU0sT0FBTywrQkFBbUMsU0FBUSxVQUFhO0lBNEJuRSxZQUFZLGNBQW1CLEVBQUU7UUFDL0IsS0FBSyxFQUFFLENBQUM7UUF6QlYsa0ZBQWtGO1FBQ2pFLGdCQUFXLEdBQUcsSUFBSSxlQUFlLENBQU0sRUFBRSxDQUFDLENBQUM7UUFFNUQ7OztXQUdHO1FBQ0gsK0JBQTBCLEdBQXdCLElBQUksQ0FBQztRQW1CckQsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLGVBQWUsQ0FBTSxXQUFXLENBQUMsQ0FBQztRQUNuRCxJQUFJLENBQUMseUJBQXlCLEVBQUUsQ0FBQztJQUNuQyxDQUFDO0lBbkJELGdHQUFnRztJQUNoRyxJQUFJLElBQUk7UUFDTixPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDO0lBQzFCLENBQUM7SUFFRCxJQUFJLElBQUksQ0FBQyxJQUFTO1FBQ2hCLElBQUksR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUN2QyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN4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Q0FBQztRQUM3QixJQUFJLENBQUMsYUFBYSxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQzlCLElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDN0IsSUFBSSxDQUFDLDBCQUEwQixDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ2hELENBQUM7Q0FDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCwgT2JzZXJ2YWJsZSwgUmVwbGF5U3ViamVjdCwgU3ViamVjdCwgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBEYXRhU291cmNlIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2NvbGxlY3Rpb25zJztcblxuZXhwb3J0IGludGVyZmFjZSBUVlNEYXRhU291cmNlPFQ+IHtcbiAgZGF0YVRvUmVuZGVyJDogU3ViamVjdDxUW10+O1xuICBkYXRhT2ZSYW5nZSQ6IFN1YmplY3Q8VFtdPjtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIGlzVFZTRGF0YVNvdXJjZTxUPihkYXRhU291cmNlOiB1bmtub3duKTogZGF0YVNvdXJjZSBpcyBUVlNEYXRhU291cmNlPFQ+IHtcbiAgcmV0dXJuIGRhdGFTb3VyY2UgaW5zdGFuY2VvZiBDZGtUYWJsZVZpcnR1YWxTY3JvbGxEYXRhU291cmNlIHx8IGRhdGFTb3VyY2UgaW5zdGFuY2VvZiBUYWJsZVZpcnR1YWxTY3JvbGxEYXRhU291cmNlO1xufVxuXG5leHBvcnQgY2xhc3MgQ2RrVGFibGVWaXJ0dWFsU2Nyb2xsRGF0YVNvdXJjZTxUPiBleHRlbmRzIERhdGFTb3VyY2U8VD4gaW1wbGVtZW50cyBUVlNEYXRhU291cmNlPFQ+IHtcbiAgLyoqIFN0cmVhbSB0aGF0IGVtaXRzIHdoZW4gYSBuZXcgZGF0YSBhcnJheSBpcyBzZXQgb24gdGhlIGRhdGEgc291cmNlLiAqL1xuICBwcml2YXRlIHJlYWRvbmx5IF9kYXRhOiBCZWhhdmlvclN1YmplY3Q8VFtdPjtcblxuICAvKiogU3RyZWFtIGVtaXR0aW5nIHJlbmRlciBkYXRhIHRvIHRoZSB0YWJsZSAoZGVwZW5kcyBvbiBvcmRlcmVkIGRhdGEgY2hhbmdlcykuICovXG4gIHByaXZhdGUgcmVhZG9ubHkgX3JlbmRlckRhdGEgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PFRbXT4oW10pO1xuXG4gIC8qKlxuICAgKiBTdWJzY3JpcHRpb24gdG8gdGhlIGNoYW5nZXMgdGhhdCBzaG91bGQgdHJpZ2dlciBhbiB1cGRhdGUgdG8gdGhlIHRhYmxlJ3MgcmVuZGVyZWQgcm93cywgc3VjaFxuICAgKiBhcyBmaWx0ZXJpbmcsIHNvcnRpbmcsIHBhZ2luYXRpb24sIG9yIGJhc2UgZGF0YSBjaGFuZ2VzLlxuICAgKi9cbiAgX3JlbmRlckNoYW5nZXNTdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbiB8IG51bGwgPSBudWxsO1xuXG4gIC8qKiBBcnJheSBvZiBkYXRhIHRoYXQgc2hvdWxkIGJlIHJlbmRlcmVkIGJ5IHRoZSB0YWJsZSwgd2hlcmUgZWFjaCBvYmplY3QgcmVwcmVzZW50cyBvbmUgcm93LiAqL1xuICBnZXQgZGF0YSgpIHtcbiAgICByZXR1cm4gdGhpcy5fZGF0YS52YWx1ZTtcbiAgfVxuXG4gIHNldCBkYXRhKGRhdGE6IFRbXSkge1xuICAgIGRhdGEgPSBBcnJheS5pc0FycmF5KGRhdGEpID8gZGF0YSA6IFtdO1xuICAgIHRoaXMuX2RhdGEubmV4dChkYXRhKTtcbiAgfVxuXG4gIHB1YmxpYyBkYXRhVG9SZW5kZXIkOiBTdWJqZWN0PFRbXT47XG4gIHB1YmxpYyBkYXRhT2ZSYW5nZSQ6IFN1YmplY3Q8VFtdPjtcbiAgcHJpdmF0ZSBzdHJlYW1zUmVhZHk6IGJvb2xlYW47XG5cblxuICBjb25zdHJ1Y3Rvcihpbml0aWFsRGF0YTogVFtdID0gW10pIHtcbiAgICBzdXBlcigpO1xuICAgIHRoaXMuX2RhdGEgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PFRbXT4oaW5pdGlhbERhdGEpO1xuICAgIHRoaXMuX3VwZGF0ZUNoYW5nZVN1YnNjcmlwdGlvbigpO1xuICB9XG5cbiAgX3VwZGF0ZUNoYW5nZVN1YnNjcmlwdGlvbigpIHtcbiAgICB0aGlzLmluaXRTdHJlYW1zKCk7XG5cbiAgICB0aGlzLl9yZW5kZXJDaGFuZ2VzU3Vic2NyaXB0aW9uPy51bnN1YnNjcmliZSgpO1xuICAgIHRoaXMuX3JlbmRlckNoYW5nZXNTdWJzY3JpcHRpb24gPSBuZXcgU3Vic2NyaXB0aW9uKCk7XG4gICAgdGhpcy5fcmVuZGVyQ2hhbmdlc1N1YnNjcmlwdGlvbi5hZGQoXG4gICAgICB0aGlzLl9kYXRhLnN1YnNjcmliZShkYXRhID0+IHRoaXMuZGF0YVRvUmVuZGVyJC5uZXh0KGRhdGEpKVxuICAgICk7XG4gICAgdGhpcy5fcmVuZGVyQ2hhbmdlc1N1YnNjcmlwdGlvbi5hZGQoXG4gICAgICB0aGlzLmRhdGFPZlJhbmdlJC5zdWJzY3JpYmUoZGF0YSA9PiB0aGlzLl9yZW5kZXJEYXRhLm5leHQoZGF0YSkpXG4gICAgKTtcbiAgfVxuXG4gIGNvbm5lY3QoKSB7XG4gICAgaWYgKCF0aGlzLl9yZW5kZXJDaGFuZ2VzU3Vic2NyaXB0aW9uKSB7XG4gICAgICB0aGlzLl91cGRhdGVDaGFuZ2VTdWJzY3JpcHRpb24oKTtcbiAgICB9XG5cbiAgICByZXR1cm4gdGhpcy5fcmVuZGVyRGF0YTtcbiAgfVxuXG5cbiAgZGlzY29ubmVjdCgpIHtcbiAgICB0aGlzLl9yZW5kZXJDaGFuZ2VzU3Vic2NyaXB0aW9uPy51bnN1YnNjcmliZSgpO1xuICAgIHRoaXMuX3JlbmRlckNoYW5nZXNTdWJzY3JpcHRpb24gPSBudWxsO1xuICB9XG5cbiAgcHJpdmF0ZSBpbml0U3RyZWFtcygpIHtcbiAgICBpZiAoIXRoaXMuc3RyZWFtc1JlYWR5KSB7XG4gICAgICB0aGlzLmRhdGFUb1JlbmRlciQgPSBuZXcgUmVwbGF5U3ViamVjdDxUW10+KDEpO1xuICAgICAgdGhpcy5kYXRhT2ZSYW5nZSQgPSBuZXcgUmVwbGF5U3ViamVjdDxUW10+KDEpO1xuICAgICAgdGhpcy5zdHJlYW1zUmVhZHkgPSB0cnVlO1xuICAgIH1cbiAgfVxufVxuXG5leHBvcnQgY2xhc3MgVGFibGVWaXJ0dWFsU2Nyb2xsRGF0YVNvdXJjZTxUPiBleHRlbmRzIERhdGFTb3VyY2U8VD4gaW1wbGVtZW50cyBUVlNEYXRhU291cmNlPFQ+IHtcbiAgcHJpdmF0ZSByZWFkb25seSBfZGF0YVN1YmplY3QgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PFRbXT4oW10pO1xuICBwcml2YXRlIHJlYWRvbmx5IF9yZW5kZXJEYXRhID0gbmV3IEJlaGF2aW9yU3ViamVjdDxUW10+KFtdKTtcbiAgcHJpdmF0ZSByZWFkb25seSBfcmVuZGVyQ2hhbmdlc1N1YnNjcmlwdGlvbiA9IG5ldyBTdWJzY3JpcHRpb24oKTtcblxuICBwdWJsaWMgZGF0YVRvUmVuZGVyJCA9IG5ldyBSZXBsYXlTdWJqZWN0PFRbXT4oMSk7XG4gIHB1YmxpYyBkYXRhT2ZSYW5nZSQgPSBuZXcgUmVwbGF5U3ViamVjdDxUW10+KDEpO1xuXG4gIGdldCBkYXRhKCk6IFRbXSB7XG4gICAgcmV0dXJuIHRoaXMuX2RhdGFTdWJqZWN0LnZhbHVlO1xuICB9XG5cbiAgc2V0IGRhdGEoZGF0YTogVFtdKSB7XG4gICAgdGhpcy5fZGF0YVN1YmplY3QubmV4dChkYXRhKTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKGluaXRpYWxEYXRhOiBUW10gPSBbXSkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5fZGF0YVN1YmplY3QubmV4dChpbml0aWFsRGF0YSk7XG4gICAgdGhpcy5fcmVuZGVyQ2hhbmdlc1N1YnNjcmlwdGlvbi5hZGQoXG4gICAgICB0aGlzLl9kYXRhU3ViamVjdC5zdWJzY3JpYmUoZGF0YSA9PiB0aGlzLmRhdGFUb1JlbmRlciQubmV4dChkYXRhKSlcbiAgICApO1xuICAgIHRoaXMuX3JlbmRlckNoYW5nZXNTdWJzY3JpcHRpb24uYWRkKFxuICAgICAgdGhpcy5kYXRhT2ZSYW5nZSQuc3Vic2NyaWJlKGRhdGEgPT4gdGhpcy5fcmVuZGVyRGF0YS5uZXh0KGRhdGEpKVxuICAgICk7XG4gIH1cblxuICBjb25uZWN0KCk6IE9ic2VydmFibGU8VFtdPiB7XG4gICAgcmV0dXJuIHRoaXMuX3JlbmRlckRhdGEuYXNPYnNlcnZhYmxlKCk7XG4gIH1cblxuICBkaXNjb25uZWN0KCk6IHZvaWQge1xuICAgIHRoaXMuX2RhdGFTdWJqZWN0LmNvbXBsZXRlKCk7XG4gICAgdGhpcy5kYXRhVG9SZW5kZXIkLmNvbXBsZXRlKCk7XG4gICAgdGhpcy5kYXRhT2ZSYW5nZSQuY29tcGxldGUoKTtcbiAgICB0aGlzLl9yZW5kZXJDaGFuZ2VzU3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gIH1cbn1cbiJdfQ==