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

Group Sort

Previous
Custom Sort
Next
Theme

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...

Introduction

Sort行头/列头according to数值升/降序order. See more sorting examples

组内排序a group means that it only affects the sorting within a group. For example, when笔-价格selects组内升序the figure below, the sorting method of省份will not change, only the order of城市within each省份will be changed.

row

There is only a single state for行头/列头, and the current state will overwrite the previous state. As shown in the figure above, when the笔is sorted, the sorting state of the纸张disappears, and行头+列头can have their own status at the same time.

use

The component SheetComponent that uses s2-react displays the icon in the value head by default, click to select, there are three ways of升序、降序、不排序, and the display can be configured in options , as follows:

const s2Options = {
width: 600,
height: 600,
showDefaultHeaderActionIcon: true, // 默认为打开,可设置为 false 关闭
};