ListTable sorting function

In the process of data analytics, the sorting (sorting) function is very important for the organization and analysis of data. By sorting, users can quickly arrange the data they care about in front, improve the efficiency of data search and analysis, and quickly find outliers and patterns in the data.

VTable provides rich sorting functions, users can easily open on demand, customize sorting rules, set initial sorting status, etc.

Enable sorting

To use the sorting function of VTable, you need to configure the table columns first. exist columns The configuration items for each column need to be set according to cellType (column type). In this tutorial, we mainly focus on sorting-related configurations.

Here is an example of enabling sorting:

const listTable = new ListTable({
  // ...其它配置项
  columns: [
    {
      title: '姓名',
      field: 'name',
      cellType: 'text',
      sort: true
    },
    {
      title: '年龄',
      field: 'age',
      cellType: 'text',
      sort: (v1, v2, order) => {
        if (order === 'desc') {
          return v1 === v2 ? 0 : v1 > v2 ? -1 : 1;
        }
        return v1 === v2 ? 0 : v1 > v2 ? 1 : -1;
      }
    }
  ]
});

In the above code,sort for true, indicating that the column supports sorting and uses the built-in collation.

Sorting Settings

VTable allows users to customize collations. To specify a collation, you need to sort Set as a function. The function takes two arguments a and b, representing two values to compare. When the function returns a negative value,a line up in b Front; when the return value is positive,a line up in b Later; when the return value is 0,a and b The relative position remains unchanged.

Here is an example of a custom collation:

const listTable = new ListTable({
  // ...其它配置项
  columns: [
    {
      title: '姓名',
      field: 'name',
      cellType: 'text',
      sort: (a, b) => a.localeCompare(b)
    },
    {
      title: '年龄',
      field: 'age',
      cellType: 'text',
      sort: (a, b) => parseInt(a) - parseInt(b)
    }
  ]
});

In the above code,姓名 Column usage localeCompare The function sorts to ensure the correct sorting result of Chinese characters;年龄 Columns are sorted by number size.

Initial sorting state

VTable supports setting the initial sorting state for the table. To set the initial sorting state, you can ListTable Used in configuration items sortState Configure.sortState Type is SortState or SortState[]Among them,SortState Defined as follows:

SortState {
  /** 排序依据字段 */
  field: string;
  /** 排序规则 */
  order: 'desc' | 'asc' | 'normal';
}

Here is an example of setting the initial sort state:

const listTable = new ListTable({
  // ...其它配置项
  columns: [
    // ...列配置
  ],
  sortState: [
    {
      field: 'age',
      order: 'desc'
    }
  ]
});

In the above code, the initial sorting state of the table is in descending order by age.

Sort state setting interface(update sort rule)

VTable provides the updateSortState property for setting the sorting state. Interface Description:

  /**
   * Update sort status
   * @param sortState The sorting state to be set
   * @param executeSort Whether to execute internal sorting logic, setting false will only update the icon status and not perform data sorting
   */
  updateSortState(sortState: SortState[] | SortState | null, executeSort: boolean = true)

When you need to modify the sorting status, you can call this interface directly. For example:

tableInstance.updateSortState({
  field: 'name',
  order: 'asc'
});

By using the updateSortState interface, users can dynamically adjust the sorting state of the table at any time to meet real-time analysis needs.

Disable internal sorting

In some scenarios, the execution of sorting logic is not expected to be performed by VTable, for example: the backend is responsible for sorting.

You can disable VTable's default sorting behavior by listening to events:

tableInstance.on('sort_click', args => {
    .....
    return false; //return false means that internal sorting logic is not executed
  });

After the sorting is completed, setRecords is required to update the data to the table. If you need to switch the sorting icon, you need to cooperate with the interface updateSortState and use the second parameter of the interface to be set to false to switch only the sorting icon.

• When calling the setRecords interface, you need to set the second parameter's sortState set to null to clear the internal sorting state (otherwise, when setRecords is called, the data will be sorted according to the last set sorting state)

Example:

Replace the default sort icon

If you do not want to use the internal icon, you can use the icon customization function to replace it. Follow the reference tutorial: https://www.visactor.io/vtable/guide/custom_define/custom_icon

Here is an example of replacing the sort icon:

Note: Configuration of name and funcType

VTable.register.icon("frozenCurrent", {
  type: "svg",
  svg: "/sort.svg",
  width: 22,
  height: 22,
  name: "sort_normal",
  positionType: VTable.TYPES.IconPosition.left,
  marginRight: 0,
  funcType: VTable.TYPES.IconFuncTypeEnum.sort,
  hover: {
    width: 22,
    height: 22,
    bgColor: "rgba(101, 117, 168, 0.1)",
  },
  cursor: "pointer",
});

Hide sort icon

We provide showSort configuration to hide the sorting icon, but the sorting logic can be executed normally

Here is an example of hiding the sort icon:

const listTable = new ListTable({
  // ...Other configuration items
  columns: [
    {
      title: 'name',
      field: 'name',
      cellType: 'text',
      showSort: false,
      sort: true // Use built-in default sorting logic
    },
    {
      title: 'Age',
      field: 'age',
      cellType: 'text',
      showSort: false,
      sort: (v1, v2, order) => {
        // Use custom sorting logic
        if (order === 'desc') {
          return v1 === v2 ? 0 : v1 > v2 ? -1 : 1;
        }
        return v1 === v2 ? 0 : v1 > v2 ? 1 : -1;
      }
    }
  ]
});

Pre Sort

In the case of large amounts of data, the first sorting may take a long time, and pre-sorting can be used to improve the performance of the sorting function. Set the pre-sorted data fields and sort order through the setSortedIndexMap method.

interface ISortedMapItem {
  asc?: (number | number[])[];
  desc?: (number | number[])[];
  normal?: (number | number[])[];
}

const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
tableInstance.setSortedIndexMap(field, filedMap as ISortedMapItem);