The <mat-table> provides a styled data-table and it can be used for
display rows of the data.
For more detail - https://material.angular.io/cdk/table/overview
Its looks like -
<mat-table [dataSource]=”myDataArray”>...</mat-table>
The example for used <data-table > and display
records as following –
data-table.ts –
import {Component} from '@angular/core';
/* Data-Table Basic Example */
@Component({
selector: 'data-table',
styleUrls: ['data-table.css'],
templateUrl: 'data-table.html',
})
export class DataTable {
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = MY_USER_DATA;
}
export interface User {
name: string;
position: number;
weight: number;
symbol: string;
}
const MY_USER_DATA: User[] = [
{position: 101, name: 'Anil Singh', weight: 63, symbol: 'Ak'},
{position: 102, name: 'Reena', weight: 72, symbol: 'R'},
{position: 202, name: 'Aradhya', weight: 15, symbol: 'Ar'},
{position: 303, name: 'Alok S', weight: 96, symbol: 'AS'},
];
data-table.html –
<mat-table #table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> S.No. </mat-header-cell>
<mat-cell *matCellDef="let
element">
{{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let
element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight (KG)</mat-header-cell>
<mat-cell *matCellDef="let
element"> {{element.weight}}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let
element"> {{element.symbol}}
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row;
columns: displayedColumns;"></mat-row>
</mat-table>
And
app.module.ts -
import {CdkTableModule} from '@angular/cdk/table';
import {HttpClientModule} from '@angular/common/http';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
} from '@angular/material';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {DataTable} from './app/data-table';
@NgModule({
exports: [
CdkTableModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
]
})
export class DemoMaterialModule {}
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
HttpClientModule,
DemoMaterialModule,
MatNativeDateModule,
ReactiveFormsModule,
],
entryComponents: [DataTable],
declarations: [DataTable],
bootstrap: [DataTable],
providers: []
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
The Result looks like - https://stackblitz.com/edit/angular-pko9fr