Using the Background Sorting Function of Advanced Tables

Scenario

The background sorting function requires global variables. When background pagination, sorting, and filtering are enabled together, add the filtering, sorting, and pagination converters one by one, as shown in Figure 1.

Figure 1 Sequence of adding converters

Background Sorting

1. Log in to Huawei Cloud Astro Canvas by referring to Logging In to Huawei Cloud Astro Canvas.
2. Create a background sorting converter.
   1. Choose Data Center from the main menu.
   2. In the navigation pane, choose Converters > All and click Create.
   3. Enter a converter name and select a folder, and click Confirm.
   4. Enter the converter code and click Save.

      let data = [...dataset];
      
      const sortType = $pageStore.sortType;
      const sortField = $pageStore.sortField;
      
      if (sortType && sortField) {
          if (sortType == 'ascending') {
              data.sort((a, b) => {
                  return isNaN(Number(a[sortField])) ? b[sortField].localeCompare(a[sortField]) : b[sortField] - a[sortField];
              });
          } else {
              data.sort((a, b) => {
                  return isNaN(Number(a[sortField])) ? a[sortField].localeCompare(b[sortField]) : a[sortField] - b[sortField];
              });
          }
      }
      
      return data

3. Create a large screen page, drag the advanced table widget from the All > Text area to the blank area of the canvas.
4. Enable the background sorting function.
   Figure 2 Enabling the background sorting function
   

5. Create global variables.
   The background sorting function requires global variables. Create sortType and sortField variables.

   Figure 3 Creating global variables
   

6. Set the interaction.
   1. Select the advanced table widget and click to configure the widget interaction.
   2. Add an interaction action when sorting is clicked.
      Figure 4 Interaction action when the sorting button is clicked
      

7. Set the widget data source.
   1. Select the widget. Click above the widget.
   2. Select the required data type.
   3. Under the global variable configuration, click +, select a converter, and add the converter created in 2.
      Figure 5 Adding a converter
      
   4. In the widget preview, drag the fields in the table to the corresponding configuration area.
      Figure 6 Dragging fields to the corresponding configuration area
      
   5. Click Save.

8. Save the page and preview the effect.
   Figure 7 Checking the background sorting effect