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({
  // ...other configuration items
  columns: [
    {
      title: 'Name',
      field: 'name',
      cellType: 'text',
      sort: true
    },
    {
      title: 'Age',
      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({
  // ...other configuration items
  columns: [
    {
      title: 'Name',
      field: 'name',
      cellType: 'text',
      sort: (a, b) => a.localeCompare(b)
    },
    {
      title: 'Age',
      field: 'age',
      cellType: 'text',
      sort: (a, b) => parseInt(a) - parseInt(b)
    }
  ]
});

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

Multiple column sorting

VTable allows sorting by multiple columns when the multipleSort option is enabled. This feature allows users to sort data in the table by more than one column, providing a more detailed view of data based on multiple criteria. To enable multi-column sorting, configure the multipleSort option in the ListTable configuration.

The multipleSort option is a boolean type and can be set as follows:

ListTable({
  // ...other configuration items
  columns: [
    // ...column configurations
  ],
  multipleSort: true
});

If enabled, users, when clicking on the sort icon in the column headers, can add additional sort criteria without removing the previous sort.

Example:

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 {
  /** Sort By Field */
  field: string;
  /** Sorting rules */
  order: 'desc' | 'asc' | 'normal';
}

Here is an example of setting the initial sort state:

const listTable = new ListTable({
  // ...other configuration items
  columns: [
    // ...column configuration
  ],
  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 use the following configuration and process:

• Set sort to false;

• If you need to display the sort button, set sortState to true;

• Use the sort_click event to know that the user has clicked the sort button. Note that the event callback function needs to return false to disable the internal sorting logic of VTable:

tableInstance.on('sort_click', args => {
    .....
    return false; //returning false means not executing the internal sorting logic
  });

• After listening to the sort button click, execute the business layer's sorting logic. After the sorting is completed, you need to use setRecords to update the data to the table. Note:

• When calling the setRecords interface, the sortState in the second parameter option needs to be set to null, which clears the internal sorting state (otherwise, when the setRecords is called, vtable will sort the data according to the last set sorting state)

• If you need to correspondingly switch the status of the sort icon, you need to use the updateSortState interface, note that the second parameter of the interface needs to be set to false, so that you can only switch the sort icon without executing the vtable's sorting logic.

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);