101 lines
3.5 KiB
TypeScript
101 lines
3.5 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google LLC All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.dev/license
|
|
*/
|
|
|
|
import {ChangeDetectionStrategy, Component, Directive, ViewEncapsulation} from '@angular/core';
|
|
import {
|
|
CdkTable,
|
|
_CoalescedStyleScheduler,
|
|
_COALESCED_STYLE_SCHEDULER,
|
|
CDK_TABLE,
|
|
STICKY_POSITIONING_LISTENER,
|
|
HeaderRowOutlet,
|
|
DataRowOutlet,
|
|
NoDataRowOutlet,
|
|
FooterRowOutlet,
|
|
} from '@angular/cdk/table';
|
|
import {
|
|
_DisposeViewRepeaterStrategy,
|
|
_RecycleViewRepeaterStrategy,
|
|
_VIEW_REPEATER_STRATEGY,
|
|
} from '@angular/cdk/collections';
|
|
|
|
/**
|
|
* Enables the recycle view repeater strategy, which reduces rendering latency. Not compatible with
|
|
* tables that animate rows.
|
|
*/
|
|
@Directive({
|
|
selector: 'mat-table[recycleRows], table[mat-table][recycleRows]',
|
|
providers: [{provide: _VIEW_REPEATER_STRATEGY, useClass: _RecycleViewRepeaterStrategy}],
|
|
})
|
|
export class MatRecycleRows {}
|
|
|
|
@Component({
|
|
selector: 'mat-table, table[mat-table]',
|
|
exportAs: 'matTable',
|
|
// Note that according to MDN, the `caption` element has to be projected as the **first**
|
|
// element in the table. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption
|
|
// We can't reuse `CDK_TABLE_TEMPLATE` because it's incompatible with local compilation mode.
|
|
template: `
|
|
<ng-content select="caption"/>
|
|
<ng-content select="colgroup, col"/>
|
|
|
|
<!--
|
|
Unprojected content throws a hydration error so we need this to capture it.
|
|
It gets removed on the client so it doesn't affect the layout.
|
|
-->
|
|
@if (_isServer) {
|
|
<ng-content/>
|
|
}
|
|
|
|
@if (_isNativeHtmlTable) {
|
|
<thead role="rowgroup">
|
|
<ng-container headerRowOutlet/>
|
|
</thead>
|
|
<tbody class="mdc-data-table__content" role="rowgroup">
|
|
<ng-container rowOutlet/>
|
|
<ng-container noDataRowOutlet/>
|
|
</tbody>
|
|
<tfoot role="rowgroup">
|
|
<ng-container footerRowOutlet/>
|
|
</tfoot>
|
|
} @else {
|
|
<ng-container headerRowOutlet/>
|
|
<ng-container rowOutlet/>
|
|
<ng-container noDataRowOutlet/>
|
|
<ng-container footerRowOutlet/>
|
|
}
|
|
`,
|
|
styleUrl: 'table.css',
|
|
host: {
|
|
'class': 'mat-mdc-table mdc-data-table__table',
|
|
'[class.mdc-table-fixed-layout]': 'fixedLayout',
|
|
},
|
|
providers: [
|
|
{provide: CdkTable, useExisting: MatTable},
|
|
{provide: CDK_TABLE, useExisting: MatTable},
|
|
{provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler},
|
|
// TODO(michaeljamesparsons) Abstract the view repeater strategy to a directive API so this code
|
|
// is only included in the build if used.
|
|
{provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy},
|
|
// Prevent nested tables from seeing this table's StickyPositioningListener.
|
|
{provide: STICKY_POSITIONING_LISTENER, useValue: null},
|
|
],
|
|
encapsulation: ViewEncapsulation.None,
|
|
// See note on CdkTable for explanation on why this uses the default change detection strategy.
|
|
// tslint:disable-next-line:validate-decorators
|
|
changeDetection: ChangeDetectionStrategy.Default,
|
|
imports: [HeaderRowOutlet, DataRowOutlet, NoDataRowOutlet, FooterRowOutlet],
|
|
})
|
|
export class MatTable<T> extends CdkTable<T> {
|
|
/** Overrides the sticky CSS class set by the `CdkTable`. */
|
|
protected override stickyCssClass = 'mat-mdc-table-sticky';
|
|
|
|
/** Overrides the need to add position: sticky on every sticky cell element in `CdkTable`. */
|
|
protected override needsPositionStickyOnElement = false;
|
|
}
|