Before reading this section, please make sure you have read the theme configuration documentation

In order to facilitate users to view data, S2 crosstab will ensure the maximum visibility of row and column headers during the sliding process

Therefore, S2 has certain restrictions on the alignment of cells. The alignment behaviors that can be customized for each type of cell are introduced below.

Corner Alignment

• The alignment of row header cells (red part) is controlled by bolderText
• The alignment of the column header cell (blue part) is controlled by text

The textBaseline of the corner header is internally specified as middle , so only textAlign can be customized. The following are the display forms of the three alignment methods:

cornerCell: { text: { textAlign: 'left', }, bolderText: { textAlign: 'left', } }
cornerCell: { text: { textAlign: 'center', }, bolderText: { textAlign: 'center', } }
cornerCell: { text: { textAlign: 'right', }, bolderText: { textAlign: 'right', } }

line header alignment

• The alignment of non-leaf nodes and subtotal cells (red parts) is controlled by bolderText
• The alignment of leaf node cells (blue part) is controlled by text
• The serial number cell can be controlled separately, and it is aligned with the row header by default, and the alignment is controlled by seriesText

Due to the feature of sliding and centering, the textBaseline of the line header is internally specified as top , so only textAlign can be customized. The following are the display forms of the three alignment methods:

rowCell: { text: { textAlign: 'left', }, bolderText: { textAlign: 'left', } }
rowCell: { text: { textAlign: 'center', }, bolderText: { textAlign: 'center', } }
rowCell: { text: { textAlign: 'right', }, bolderText: { textAlign: 'right', } }

column header alignment

In order to ensure the maximum visibility under sliding, the textBaseline of the non-leaf node cells in the column head is internally specified as middle , and the textAlign is unlimited and can be customized as needed.

• The alignment of the indicator cell (red part) is controlled by bolderText
• The alignment of other dimension cells (blue part) is controlled by measureText (by default, it is aligned with the data cell)

The effects of the three alignment methods of the column header cells are as follows:

colCell: { measureText: { textAlign: 'left', }, bolderText: { textAlign: 'left', } }
colCell: { measureText: { textAlign: 'center', }, bolderText: { textAlign: 'center', } }
colCell: { measureText: { textAlign: 'right', }, bolderText: { textAlign: 'right', } }

Data Cell Alignment

• The alignment of subtotal total cell (red part) is controlled by bolderText
• The alignment of other node cells (blue parts) is controlled by text

The data cell textBaseline and textAlign are unlimited and can be customized:

dataCell: { text: { textAlign: 'left', textBaseline: 'top', }, bolderText: { textAlign: 'left', textBaseline: 'top', } }
dataCell: { text: { textAlign: 'center', textBaseline: 'middle', }, bolderText: { textAlign: 'center', textBaseline: 'middle', } }
dataCell: { text: { textAlign: 'right', textBaseline: 'bottom', }, bolderText: { textAlign: 'right', textBaseline: 'bottom', } }

Customize specific cell alignment

Sometimes we want to achieve an effect similar to字段标记, and自定义对齐方式of specific cells that meet the conditions , instead of changing everything. At this time, we can自定义单元格, dataCell , colCell , rowCell , etc. provided by S2 Hook to do customization.