Skip to content

Commit 472b594

Browse files
kseamonkseamon
committed
feat(column-resize): Experimental column resize for mat-table
1 parent 86aad59 commit 472b594

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+2803
-1
lines changed

‎.github/CODEOWNERS

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484

8585
# Material experimental package
8686
/src/material-experimental/* @jelbourn
87+
/src/material-experimental/column-resize/** @kseamon @andrewseguin
8788
/src/material-experimental/mdc-button/** @andrewseguin
8889
/src/material-experimental/mdc-card/** @mmalerba
8990
/src/material-experimental/mdc-checkbox/** @mmalerba
@@ -100,6 +101,7 @@
100101

101102
# CDK experimental package
102103
/src/cdk-experimental/** @jelbourn
104+
/src/cdk-experimental/column-resize/** @kseamon @andrewseguin
103105
/src/cdk-experimental/dialog/** @jelbourn @josephperrott @crisbeto
104106
/src/cdk-experimental/popover-edit/** @kseamon @andrewseguin
105107
/src/cdk-experimental/scrolling/** @mmalerba
@@ -123,6 +125,7 @@
123125
/src/dev-app/card/** @jelbourn
124126
/src/dev-app/checkbox/** @jelbourn @devversion
125127
/src/dev-app/chips/** @jelbourn
128+
/src/dev-app/column-resize/** @kseamon @andrewseguin
126129
/src/dev-app/connected-overlay/** @jelbourn @crisbeto
127130
/src/dev-app/dataset/** @andrewseguin
128131
/src/dev-app/datepicker/** @mmalerba

‎packages.bzl

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ CDK_PACKAGES = [
2323
CDK_TARGETS = ["//src/cdk"] + ["//src/cdk/%s" % p for p in CDK_PACKAGES]
2424

2525
CDK_EXPERIMENTAL_PACKAGES = [
26+
"column-resize",
2627
"dialog",
2728
"popover-edit",
2829
"scrolling",
@@ -81,6 +82,7 @@ MATERIAL_SCSS_LIBS = [
8182
]
8283

8384
MATERIAL_EXPERIMENTAL_PACKAGES = [
85+
"column-resize",
8486
"mdc-button",
8587
"mdc-card",
8688
"mdc-checkbox",

‎src/cdk-experimental/column-resize/BUILD.bazel

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
package(default_visibility = ["//visibility:public"])
2+
3+
load("//tools:defaults.bzl", "ng_module")
4+
5+
ng_module(
6+
name = "column-resize",
7+
srcs = glob(
8+
["**/*.ts"],
9+
exclude = ["**/*.spec.ts"],
10+
),
11+
module_name = "@angular/cdk-experimental/column-resize",
12+
deps = [
13+
"//src/cdk-experimental/popover-edit",
14+
"//src/cdk/bidi",
15+
"//src/cdk/coercion",
16+
"//src/cdk/keycodes",
17+
"//src/cdk/overlay",
18+
"//src/cdk/portal",
19+
"//src/cdk/table",
20+
"@npm//@angular/common",
21+
"@npm//@angular/core",
22+
"@npm//rxjs",
23+
],
24+
)

‎src/cdk-experimental/column-resize/column-resize-directives/column-resize-flex.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Directive, ElementRef, NgZone} from '@angular/core';
10+
import {Directionality} from '@angular/cdk/bidi';
11+
12+
import {ColumnResize} from '../column-resize';
13+
import {ColumnResizeNotifier, ColumnResizeNotifierSource} from '../column-resize-notifier';
14+
import {HeaderRowEventDispatcher} from '../event-dispatcher';
15+
import {HOST_BINDINGS, FLEX_PROVIDERS} from './constants';
16+
17+
/**
18+
* Explicitly enables column resizing for a flex cdk-table.
19+
* Individual columns must be annotated specifically.
20+
*/
21+
@Directive({
22+
selector: 'cdk-table[columnResize]',
23+
host: HOST_BINDINGS,
24+
providers: [
25+
...FLEX_PROVIDERS,
26+
{provide: ColumnResize, useExisting: CdkColumnResizeFlex},
27+
],
28+
})
29+
export class CdkColumnResizeFlex extends ColumnResize {
30+
constructor(
31+
readonly columnResizeNotifier: ColumnResizeNotifier,
32+
readonly directionality: Directionality,
33+
protected readonly elementRef: ElementRef,
34+
protected readonly eventDispatcher: HeaderRowEventDispatcher,
35+
protected readonly ngZone: NgZone,
36+
protected readonly notifier: ColumnResizeNotifierSource) {
37+
super();
38+
}
39+
}

‎src/cdk-experimental/column-resize/column-resize-directives/column-resize.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Directive, ElementRef, NgZone} from '@angular/core';
10+
import {Directionality} from '@angular/cdk/bidi';
11+
12+
import {ColumnResize} from '../column-resize';
13+
import {ColumnResizeNotifier, ColumnResizeNotifierSource} from '../column-resize-notifier';
14+
import {HeaderRowEventDispatcher} from '../event-dispatcher';
15+
import {HOST_BINDINGS, TABLE_PROVIDERS} from './constants';
16+
17+
/**
18+
* Explicitly enables column resizing for a table-based cdk-table.
19+
* Individual columns must be annotated specifically.
20+
*/
21+
@Directive({
22+
selector: 'table[cdk-table][columnResize]',
23+
host: HOST_BINDINGS,
24+
providers: [
25+
...TABLE_PROVIDERS,
26+
{provide: ColumnResize, useExisting: CdkColumnResize},
27+
],
28+
})
29+
export class CdkColumnResize extends ColumnResize {
30+
constructor(
31+
readonly columnResizeNotifier: ColumnResizeNotifier,
32+
readonly directionality: Directionality,
33+
protected readonly elementRef: ElementRef,
34+
protected readonly eventDispatcher: HeaderRowEventDispatcher,
35+
protected readonly ngZone: NgZone,
36+
protected readonly notifier: ColumnResizeNotifierSource) {
37+
super();
38+
}
39+
}

‎src/cdk-experimental/column-resize/column-resize-directives/constants.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Provider} from '@angular/core';
10+
import {ColumnResizeNotifier, ColumnResizeNotifierSource} from '../column-resize-notifier';
11+
import {HeaderRowEventDispatcher} from '../event-dispatcher';
12+
import {
13+
TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER,
14+
FLEX_RESIZE_STRATEGY_PROVIDER,
15+
} from '../resize-strategy';
16+
17+
const PROVIDERS: Provider[] = [
18+
ColumnResizeNotifier,
19+
HeaderRowEventDispatcher,
20+
ColumnResizeNotifierSource,
21+
];
22+
23+
export const TABLE_PROVIDERS: Provider[] = [
24+
...PROVIDERS,
25+
TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER,
26+
];
27+
export const FLEX_PROVIDERS: Provider[] = [...PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER];
28+
export const HOST_BINDINGS = {
29+
'[class.cdk-column-resize-rtl]': 'directionality.value === "rtl"',
30+
};

‎src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Directive, ElementRef, NgZone} from '@angular/core';
10+
import {Directionality} from '@angular/cdk/bidi';
11+
12+
import {ColumnResize} from '../column-resize';
13+
import {ColumnResizeNotifier, ColumnResizeNotifierSource} from '../column-resize-notifier';
14+
import {HeaderRowEventDispatcher} from '../event-dispatcher';
15+
import {HOST_BINDINGS, FLEX_PROVIDERS} from './constants';
16+
17+
/**
18+
* Implicitly enables column resizing for a flex cdk-table.
19+
* Individual columns will be resizable unless opted out.
20+
*/
21+
@Directive({
22+
selector: 'cdk-table',
23+
host: HOST_BINDINGS,
24+
providers: [
25+
...FLEX_PROVIDERS,
26+
{provide: ColumnResize, useExisting: CdkDefaultEnabledColumnResizeFlex},
27+
],
28+
})
29+
export class CdkDefaultEnabledColumnResizeFlex extends ColumnResize {
30+
constructor(
31+
readonly columnResizeNotifier: ColumnResizeNotifier,
32+
readonly directionality: Directionality,
33+
protected readonly elementRef: ElementRef,
34+
protected readonly eventDispatcher: HeaderRowEventDispatcher,
35+
protected readonly ngZone: NgZone,
36+
protected readonly notifier: ColumnResizeNotifierSource) {
37+
super();
38+
}
39+
}

‎src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Directive, ElementRef, NgZone} from '@angular/core';
10+
import {Directionality} from '@angular/cdk/bidi';
11+
12+
import {ColumnResize} from '../column-resize';
13+
import {ColumnResizeNotifier, ColumnResizeNotifierSource} from '../column-resize-notifier';
14+
import {HeaderRowEventDispatcher} from '../event-dispatcher';
15+
import {HOST_BINDINGS, TABLE_PROVIDERS} from './constants';
16+
17+
/**
18+
* Implicitly enables column resizing for a table-based cdk-table.
19+
* Individual columns will be resizable unless opted out.
20+
*/
21+
@Directive({
22+
selector: 'table[cdk-table]',
23+
host: HOST_BINDINGS,
24+
providers: [
25+
...TABLE_PROVIDERS,
26+
{provide: ColumnResize, useExisting: CdkDefaultEnabledColumnResize},
27+
],
28+
})
29+
export class CdkDefaultEnabledColumnResize extends ColumnResize {
30+
constructor(
31+
readonly columnResizeNotifier: ColumnResizeNotifier,
32+
readonly directionality: Directionality,
33+
protected readonly elementRef: ElementRef,
34+
protected readonly eventDispatcher: HeaderRowEventDispatcher,
35+
protected readonly ngZone: NgZone,
36+
protected readonly notifier: ColumnResizeNotifierSource) {
37+
super();
38+
}
39+
}

‎src/cdk-experimental/column-resize/column-resize-module.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {NgModule} from '@angular/core';
10+
11+
import {CdkColumnResize} from './column-resize-directives/column-resize';
12+
import {CdkColumnResizeFlex} from './column-resize-directives/column-resize-flex';
13+
import {
14+
CdkDefaultEnabledColumnResize
15+
} from './column-resize-directives/default-enabled-column-resize';
16+
import {
17+
CdkDefaultEnabledColumnResizeFlex
18+
} from './column-resize-directives/default-enabled-column-resize-flex';
19+
20+
@NgModule({
21+
declarations: [CdkDefaultEnabledColumnResize, CdkDefaultEnabledColumnResizeFlex],
22+
exports: [CdkDefaultEnabledColumnResize, CdkDefaultEnabledColumnResizeFlex],
23+
})
24+
export class CdkColumnResizeDefaultEnabledModule {}
25+
26+
@NgModule({
27+
declarations: [CdkColumnResize, CdkColumnResizeFlex],
28+
exports: [CdkColumnResize, CdkColumnResizeFlex],
29+
})
30+
export class CdkColumnResizeModule {}

‎src/cdk-experimental/column-resize/column-resize-notifier.ts

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Injectable} from '@angular/core';
10+
import {Observable, Subject} from 'rxjs';
11+
12+
export interface ColumnSize {
13+
readonly columnId: string;
14+
readonly size: number;
15+
}
16+
17+
export interface ColumnSizeAction extends ColumnSize {
18+
readonly completeImmediately?: boolean;
19+
}
20+
21+
@Injectable()
22+
export class ColumnResizeNotifierSource {
23+
readonly resizeCanceled = new Subject<ColumnSizeAction>();
24+
readonly resizeCompleted = new Subject<ColumnSize>();
25+
readonly triggerResize = new Subject<ColumnSizeAction>();
26+
}
27+
28+
/** Service for triggering column resizes imperatively or being notified of them. */
29+
@Injectable()
30+
export class ColumnResizeNotifier {
31+
readonly resizeCompleted: Observable<ColumnSize> = this._source.resizeCompleted.asObservable();
32+
33+
constructor(private readonly _source: ColumnResizeNotifierSource) {}
34+
35+
resize(columnId: string, size: number): void {
36+
this._source.triggerResize.next({columnId, size, completeImmediately: true});
37+
}
38+
}

0 commit comments

Comments
 (0)