Ссылка javascript-grid-sorting
Приложение / app.component.ts
import { Component, ViewChild } from "@angular/core";
import { HttpClient } from "@angular/common/http";
@Component({
selector: "my-app",
template: `
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowData]="rowData"
[animateRows]="true"
[sortingOrder]="sortingOrder"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
`
})
export class AppComponent {
private gridApi;
private gridColumnApi;
private columnDefs;
private defaultColDef;
private sortingOrder;
private rowData: [];
constructor(private http: HttpClient) {
this.columnDefs = [
{
headerName: "Athlete",
field: "athlete",
width: 150,
sortingOrder: ["asc", "desc"]
},
{
headerName: "Age",
field: "age",
width: 90,
sortingOrder: ["desc", "asc"]
},
{
headerName: "Country",
field: "country",
width: 120,
sortingOrder: ["desc", null]
},
{
headerName: "Year",
field: "year",
width: 90,
sortingOrder: ["asc"]
},
{
headerName: "Date",
field: "date",
width: 110
},
{
headerName: "Sport",
field: "sport",
width: 110
},
{
headerName: "Gold",
field: "gold",
width: 100
},
{
headerName: "Silver",
field: "silver",
width: 100
},
{
headerName: "Bronze",
field: "bronze",
width: 100
},
{
headerName: "Total",
field: "total",
width: 100
}
];
this.defaultColDef = { sortable: true };
this.sortingOrder = ["desc", "asc", null];
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.http
.get(
"https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
)
.subscribe(data => {
this.rowData = data;
});
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Angular 2 ag-Grid starter</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> html, body { margin: 0; padding: 0; height: 100%; } </style>
<!-- Polyfills -->
<script src="https://unpkg.com/core-js@2.6.5/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.17/dist/zone.js"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<script>
var appLocation = '';
var boilerplatePath = '';
var systemJsMap = {"ag-grid-community":"https:\/\/unpkg.com\/ag-grid-community@21.0.1\/dist\/ag-grid-community.js","ag-grid-community\/main":"https:\/\/unpkg.com\/ag-grid-community@21.0.1\/dist\/ag-grid-community.js","ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@21.0.1\/","ag-grid-react":"npm:ag-grid-react@21.0.1\/","ag-grid-angular":"npm:ag-grid-angular@21.0.1\/","ag-grid-vue":"npm:ag-grid-vue@21.0.1\/"};
</script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.ts').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading ag-Grid example…</my-app>
</body>
</html>
Приложение / app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms"; // <-- NgModel lives here
// HttpClient
import { HttpClientModule } from "@angular/common/http";
// ag-grid
import { AgGridModule } from "ag-grid-angular";
import { AppComponent } from "./app.component";
@NgModule({
imports: [
BrowserModule,
FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
HttpClientModule,
AgGridModule.withComponents([])
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}