Using the Background Filtering 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 Filtering

1. Log in to Huawei Cloud Astro Canvas by referring to Logging In to Huawei Cloud Astro Canvas.
2. Create a background filter 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 filter = $pageStore.filters
      
      let filterObj = "";
      try {
          filterObj = JSON.parse(filter);
      } catch {
          filterObj = filter;
      }
      
      const keys = Object.keys(filterObj);
      
      data = data.filter(item => {
          return keys.every(key => {
              if (!filterObj[key].length) {
                  return true;
              }
              return filterObj[key].includes(item[key]);
          })
      })
      
      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 filtering function.
   Figure 2 Enabling the background filtering function
   

5. Create a global variable.
   The background filtering function requires a global variable. Create a filters variable.

   Figure 3 Creating a filters global variable
   

6. Set the interaction.
   1. Select the advanced table widget and click to configure the widget interaction.
   2. Add an interaction action for when the filter is clicked.
      Figure 4 Interaction action when the filter 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 area, drag the fields in the table to the corresponding configuration area.
      Figure 6 Dragging the corresponding field from the table to the configuration area
      
   5. Click Save.

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