VTable使用问题：如何实现表格内容按数据记录排序？

Question

表格中数据按照某一列进行排序，这个需求使用VTable要怎么实现？

Answer 1

解决方案 Solution

在VTable中，可以通过三种方式来实现数据排序功能：

1. 通过表格内ui实现

在columns中配置sort属性，支持配置true使用默认排序规则，也可以配置函数来自定义排序规则：

// ......
columns: [
    {
      field: 'id',
      title: 'ID',
      width: 120,
      sort: true
    },
    {
      field: 'name',
      title: 'Name',
      width: 120,
      sort: (a, b) => { return a - b }
    }
]

此时，对应列的表头上会显示排序按钮：

点击排序按钮，就可以在无排序、升序排序和降序排序三种状态中切换。

2. 通过在初始化option中配置sortState实现

在columns中配置sort属性后，可以在option中配置sortState属性：

sortState:{
    field: 'Category',
    order: 'asc'
}

其中，field是排序对应的数据源；order是排序规则，支持 asc 升序、desc 降序 和normal 不排序。

3. 通过updateSortStateapi 配置sortState

在columns中配置sort属性后，可以通过表格实例的updateSortState方法，随时配置sortState，更新排序效果：

instance.updateSortState({
  field: 'id',
  order: 'desc',
});

代码示例 Code Example

const columns = [
  {
    field: "id",
    title: "ID",
    width: 80,
    sort: true
  },
  {
    field: "hobbies",
    title: "hobbies",
    width: 300
  }
];
const option: TYPES.ListTableConstructorOptions = {
  records,
  columns,
  sortState:{
    field: 'id',
    order: 'asc'
  }
};
const instance = new ListTable(document.getElementById("container"), option);

setTimeout(() => {
  instance.updateSortState({
    field: 'id',
    order: 'desc',
  });
}, 3000);

结果展示 Results

在线效果参考：https://codesandbox.io/s/vtable-sort-w869fk

相关文档 Related Documentation

表格排序 demo：https://visactor.io/vtable/demo/basic-functionality/sort

排序功能教程：https://visactor.io/vtable/guide/basic_function/sort

github：https://github.com/VisActor/VTable