angular2 table 可排序 可翻页

export class RComponent implements OnInit {

    data: any;

    ngOnInit() {
        this.data = require('../data/hengxiangduibi.json');
    }

    rows: any[] = [
        {
            Name: 'Data 1',
            Amount: 100.23,
            Date: 1477545980000
        },
        {
            Name: 'Data 2',
            Amount: 0.875623,
            Date: 1477545989000
        },
        {
            Name: 'Data 3',
            Amount: .010123,
            Date: 1477545980000
        },
        {
            Name: 'Data 4',
            Amount: 1873.02301,
            Date: 1477545980000
        },
        {
            Name: 'Data 5',
            Amount: -93,
            Date: 1477545983000
        },
        {
            Name: 'Data 1',
            Amount: 100.23,
            Date: 1477545980000
        },
        {
            Name: 'Data 2',
            Amount: 0.875623,
            Date: 1477545989000
        },
        {
            Name: 'Data 3',
            Amount: .010123,
            Date: 1477545980000
        },
        {
            Name: 'Data 4',
            Amount: 1873.02301,
            Date: 1477545980000
        },
        {
            Name: 'Data 5',
            Amount: -93,
            Date: 1477545983000
        },
        {
            Name: 'Data 1',
            Amount: 100.23,
            Date: 1477545980000
        },
        {
            Name: 'Data 2',
            Amount: 0.875623,
            Date: 1477545989000
        },
        {
            Name: 'Data 3',
            Amount: .010123,
            Date: 1477545980000
        },
        {
            Name: 'Data 4',
            Amount: 1873.02301,
            Date: 1477545980000
        },
        {
            Name: 'Data 5',
            Amount: -93,
            Date: 1477545983000
        },
        {
            Name: 'Data 1',
            Amount: 100.23,
            Date: 1477545980000
        },
        {
            Name: 'Data 2',
            Amount: 0.875623,
            Date: 1477545989000
        },
        {
            Name: 'Data 3',
            Amount: .010123,
            Date: 1477545980000
        },
        {
            Name: 'Data 4',
            Amount: 1873.02301,
            Date: 1477545980000
        },
        {
            Name: 'Data 5',
            Amount: -93,
            Date: 1477545983000
        }
    ];
    columns: any[] = [
        {
            display: 'Column 1', //The text to display
            variable: 'Name', //The name of the key that's apart of the data array
            filter: 'text' //The type data type of the column (number, text, date, etc.)
        },
        {
            display: 'Column 2', //The text to display
            variable: 'Amount', //The name of the key that's apart of the data array
            filter: 'decimal : 1.0-2' //The type data type of the column (number, text, date, etc.)
        },
        {
            display: 'Column 3', //The text to display
            variable: 'Date', //The name of the key that's apart of the data array
            filter: 'dateTime' //The type data type of the column (number, text, date, etc.)
        }
    ];
    sorting: any = {
        column: 'Name', //to match the variable of one of the columns
        descending: false
    };

}

<table-sortable
        [columns]="columns"
        [data]="rows"
        [sort]="sorting">
    Loading table...
</table-sortable>

效果：

还有小瑕疵，不影响使用

转载于:https://my.oschina.net/u/2499632/blog/776486