bixi/packages/core/table/demo/simple-table-sort.md

企业级中后台前端解决方案

---
title:
  zh-CN: 支持排序
  en-US: 支持排序
order: 100
---

## zh-CN
支持排序。如果您有后端排序的需求，只要在列属性中加上 sort 属性，并配置上 options 属性，bixi-table 就会为您生成带有可排序功能的列，每次排序发生变化时，您可以在 filterParamsChange 中接收到数据变化，同时也会触发了 search

## en-US
支持排序。如果您有后端排序的需求，只要在列属性中加上 sort 属性，并配置上 options 属性，bixi-table 就会为您生成带有可排序功能的列，每次排序发生变化时，您可以在 filterParamsChange 中接收到数据变化，同时也会触发了 search

```ts
import { Component } from '@angular/core';
import { ICol, IFilterParams, ISearchParams } from '@bixi/core/table';

interface IPerson {
  name: string;
  age: number;
}

const persons: IPerson[] = [
  {
    name: '小明',
    age: 18
  }, {
    name: '小刘',
    age: 19
  }, {
    name: '小红',
    age: 20
  }
]

@Component({
  selector: 'components-table-sort',
  template: `
    <bixi-table
      [rows]="rows"
      [cols]="cols"
      [loading]="loading"
      [(filterParams)]="filterParams"
      (filterParamsChange)="onFilterParamsChange($event)"
      (search)="onSearch($event)"
    >
    </bixi-table>
  `
})
export class ComponentsTableSimpleTableSortComponent {
  loading = false;
  rows = persons;
  cols: ICol[] = [
    {
      name: '姓名',
      key: 'name',
    },
    {
      name: '年龄',
      key: 'age',
      sort: {
        key: 'age'
      }
    }
  ];
  filterParams = {};


  onFilterParamsChange(value: IFilterParams) {
    // 每次 filterParams 改变时都会触发一次 filterParamsChange，您可以在这里捕获它
    console.log(value);
  }
  
  onSearch(value: ISearchParams) {
    // filterParams 改变时同样会触发一次 search，您可以在这里捕获它
    this.loading = true;
    const { age } = value.filterParams;
    setTimeout(() => {
      this.loading = false;
      this.rows = [...persons.sort( (a, b) => age === 'descend' ? a.age - b.age : b.age - a.age )];
    }, 300);
  }
}
 
```