Freeze Columns and Rows

In data analysis applications, the amount of data in a table is usually very large, which means that there are many columns in the table horizontally. When users horizontally scroll the table, it may cause the columns of key information to be "scrolled out" of the visible range. In order to keep these key information columns visible during horizontal scrolling, we need to "freeze" these columns or rows. The freeze column and row function can make data analysis easier and clearer.

Note: This function is only supported in the basic table ListTable.

Set Left Frozen Columns

Freezing the left column is the most common freezing requirement. Compared with the freezing in other directions, this is also the most comprehensive freezing ability supported by VTable. The relevant configuration items are as follows:

• frozenColCount: Number of frozen columns, default is 0.
• allowFrozenColCount: Number of columns allowed to be operated, that is, the number of columns before which the freeze operation button will appear, default is 0.
• showFrozenIcon: Whether to display the fixed column icon, default is true.
• maxFrozenWidth: Maximum freeze width, default is '80%'.
• scrollFrozenCols: When the total width of frozen columns exceeds maxFrozenWidth, the left frozen area becomes horizontally scrollable, default is false. When enabled, all frozen columns are kept and you can use trackpad horizontal scrolling or drag the scrollbar inside the frozen area.
• unfreezeAllOnExceedsMaxWidth: When the column width exceeds the maximum freeze width, whether to automatically unfreeze all, default is true. If set to false, it will not unfreeze all columns, but will determine the number of columns to be unfrozen according to the value of maxFrozenWidth.

Here is a configuration example:

const listTable = new ListTable({
  // ...other configuration items
  frozenColCount: 2,
  allowFrozenColCount: 4,
  showFrozenIcon: true
});

In this example, we set the number of frozen columns to 2, which means that the first two columns will be frozen. At the same time, the number of columns allowed to be frozen is set to 4, which means that the freeze operation button will appear before the first four columns, and users can manually freeze them as needed. Finally, set showFrozenIcon to true to display the fixed column icon in the basic table.

Set Right Frozen Columns

A common scenario for freezing the right column in a table is to place operation buttons or menus, so that users can easily operate on each row in the table.

The configuration items are as follows:

• rightFrozenColCount: Number of right frozen columns, default is 0.
• maxRightFrozenWidth: Maximum freeze width for right frozen columns (fixed value or percentage). Defaults to maxFrozenWidth.
• scrollRightFrozenCols: When the total width of right frozen columns exceeds maxRightFrozenWidth, the right frozen area becomes horizontally scrollable, default is false.

Horizontal Scrolling Inside Frozen Areas

When the frozen area's content width exceeds the maximum freeze width, you can enable horizontal scrolling inside the frozen area to keep all frozen columns.

const listTable = new ListTable({
  // ...other configuration items
  frozenColCount: 6,
  maxFrozenWidth: 320,
  scrollFrozenCols: true,

  rightFrozenColCount: 4,
  maxRightFrozenWidth: 320,
  scrollRightFrozenCols: true
});

After enabling:

• The left/right frozen areas respond to trackpad horizontal scrolling within their own regions.
• When scrollbars are visible, independent horizontal scrollbars for frozen areas will appear at the bottom.

Set Top Frozen Rows

The header part is automatically frozen, if you want the body part to be frozen, just set frozenRowCount. The main setting number value must be greater than the number of header rows to freeze the body part rows.

Set Bottom Frozen Rows

The scenario of freezing the bottom row can be used to fix the total row or a table with multiple header levels. Users can keep the visibility of the total row when scrolling the table, which is convenient for viewing summary data.

The configuration items are as follows:

• bottomFrozenRowCount: Number of bottom frozen rows, default is 0.

Use the Freeze Column Interface

In addition to setting the frozen columns through the configuration items, VTable also provides the corresponding interface method setFrozenColCount to dynamically set the number of frozen columns, so that you can adjust it at any time according to your needs during the program running.

You can use the setFrozenColCount interface method of the ListTable class to set the current number of frozen columns, as shown below:

listTable.setFrozenColCount(3);
or;
listTable.frozenColCount = 3;

In this example, we adjust the number of frozen columns of the current list to 3. At this time, the first three columns will be frozen.

Example

Example: