Table Column Width Adjustment

Version

Application Scenario

The initial width of the column in the table component is the width of each cell when the cell is initially loaded.

If you are unsatisfied with the initial width, you can divide the column equally or adjust the width manually.

Function Description

The Column Width function refers to the equal width of each column and is not affected by operations, for example, page flipping.

The equal column width size is calculated based on the field width and the number of columns displayed in the table, and it will be adjusted adaptively when the page size changes.

Besides the Column Width function, you can also manually adjust the column width.

Note:

1. Operations in the dashboard preview page will not change the initial situation of the table. After you refresh the browser, the table will return to the initial state.

2. The width of the serial number is fixed and cannot be affected by the Column Width function.

 Applied Scope

 Group table, cross table, and detail table.

Data Preparation

1. Log in to FineBI, click My Analysis, select a folder, and click New Subject.

2. Click Local Excel and Upload Data.

You can download the sample data: Contract Information.xlsx.

3. Click OK after the data is uploaded.

4. Click Save and Update and Exit and Preview. The data is created successfully.

Component Creation

1. Click the Component tab in the lower left corner, as shown in the following figure.

2. Select Group Table for Chart Type.

3. Drag Time of Contract and Payment Type in the to-be-analyzed area to Dimension. Drag Number and Contract Volume to Indicator, as shown in the following figure.

4. Click the drop-down list button of the dimension field Time of Contract and select Year-Month.

Column Width Adjustment

You can adjust the column width on the component editing page, dashboard editing page, and dashboard preview page.

Column Width

1. Setting Column Width

On the component editing page, the entrance for Column Width of the table component is shown in the following figure.

On the dashboard editing page, click any position of the component to display the entrance for Column Width of the table component, as shown in the following figure.

On the dashboard preview interface, click any position of the component to display the entrance for Column Width of the table component, as shown in the following figure.

2. Canceling Column Width

After creating a table component and setting Column Width, you find that the effect of Column Width is not ideal. Therefore, you may want to cancel Column Width.

Click the Column Width button again to restore the initial column width.

Note:

If you manually adjust the column width, the equal division of the columns will be automatically canceled.

Manually Adjusting Column Width

This section takes manually adjusting the column width on the component editing page as an example.

1. Adjusting Field Width

Move the mouse to the left or right border of the table header of the column that needs to be adjusted in width. When the mouse shape changes to the  style, hold down the mouse and drag left or right to change the column width, as shown in the following figure.

2. Frozen Field and Frozen Column

You can set the frozen table dimensions under Component Style > Format to divide the table into dimension display area and indicator display area.

The position between the two areas is the frozen field and frozen column, as shown in the following figure.

3. Difference Between Adjusting the Frozen Field and Frozen Column

You can adjust the frozen field and frozen column by dragging them left or right.

Note:

If you set Column Width and adjust the frozen field and frozen column, the Column Width will be canceled and the initial width will be restored.

Adjusting the Frozen Field

Drag the frozen field to the right, the position of the frozen column remains unchanged, and the width of the frozen field increases with a scrollbar appearing. Drag to the left, the position of the frozen column moves to the left, and the width of the frozen field decreases.

Adjusting the Frozen Column

Drag the frozen column to the right, the position of the frozen column moves to the right, and the width of the frozen field increases. Drag the frozen column to the left, the position of the frozen column moves to the left, and the width of the frozen field remains unchanged with a scrollbar appearing.