logo

S2

  • Manual
  • API
  • Examples
  • Playground
  • ChangeLog
  • Productsantv logo arrow
  • 2.x
  • Introduction
  • Quick Start
  • Basic Tutorial
    • Base Concept
    • Sheet Type
      • Pivot Mode
        Updated
      • Table Mode
    • Conditions
      Updated
    • Totals
    • Sort
      • Custom Sort
        Updated
      • Group Sort
        Updated
    • Theme
      Updated
    • Tooltip
      Updated
    • Internationalization
    • 数据格式化
      New
    • Multi Line
      New
    • Pagination
      New
  • Advanced Tutorial
    • Advanced Tutorial
      • Link
      • Render Chart In Cell
      • Draw Chart With @antv/g2
    • Custom
      • Customize Hook
        Updated
      • Customize Tree
        New
      • Customize Icon
      • Customize Cell Alignment
      • Customize Cell Size
        Updated
      • Customize Order
      • Custom Collapse/Expand Nodes
    • Interaction
      • Basic Interaction
      • Custom Interaction
      • Hide Columns
      • Cell Resize
      • Merge Cell
      • Scroll
      • Copy
        New
      • Highlight and select cell
        New
    • Analyze Component
      • Introduction
        New
      • Advanced Sort
        Updated
      • Switcher
      • Export
        Updated
      • Pagination
      • Drill Down
    • Sheet Component
      • Editable Mode
      • Strategy Sheet
        Updated
    • HD Adapter
    • Get Instance
    • Get Cell Data
      Updated
    • Table adaptive
    • AntV/G Plugins
      New
    • Pivot Chart
      Experimental
    • Vue 3.0
  • Extended Reading
    • Data Process
      • Pivot
      • Table
    • Layout
      • Pivot
      • Table
    • Performance
      Updated
  • Contribution
  • FAQ
  • S2 2.0 Migration Guide

Table

Previous
Pivot
Next
Performance

Resources

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-互动图形解决方案
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

This article will introduce the layout process of the schedule, so that readers can more directly understand the internal layout logic of S2 .

In the process of parsing the layout, the following figure schedule is taken as an example:

pivot-mode

basic concept

The schedule is a basic table without the capability of cross-perspective analysis, so the schedule mainly includes two parts: column header and content area . Different from the pivot table, the detailed table has no row header and corner header area.

s2-table-group

The column header layout algorithm of the schedule and the on-demand rendering of the content area are consistent with the pivot table, so I won’t repeat them here.

serial number

The serial number column is a column automatically generated by S2 based on the data for the convenience of users, and is used to display the serial number. This column is essentially no different from the content area. But at the style level, it can be individually configured through theme.rowCell .

ranks freeze

The frozen rows and columns will have special treatment in the layout. Simply put, the positioning of the frozen row and column grids is fixed. in:

preview
  • freeze row (frozenRow) freezes on the y-axis
  • Freeze Trailing Row ( frozenTrailingRow ) freezes on the y-axis, and the y-coordinate calculates the layout backwards from the bottom of the table viewport.
  • freeze column (frozenCol) to freeze on the x-axis
  • The frozen trailing column ( frozenTrailingCol ) is frozen on the x-axis, and the x-coordinate calculates the layout backwards from the far right of the table's viewable area.