The React version provides an advanced sorting component, optionally available. view example

Note: state is not maintained internally

Get started quickly

Use the SheetComponent component of @antv/s2-react , and configure advancedSort for the header . For configuration details, see AdvancedSortCfgProps

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { SortParams } from '@antv/s2';
import { SheetComponent } from '@antv/s2-react';
import '@antv/s2-react/dist/s2-react.min.css';

const AdvancedSortDemo = () => {
  const [dataCfg, setDataCfg] = useState(s2DataConfig);

  return (
    <SheetComponent
      sheetType="pivot"
      adaptive={false}
      dataCfg={dataCfg}
      options={s2Options}
      header={{
        advancedSort: {
          open: true,
          sortParams: [{ sortFieldId: 'province', sortMethod: 'DESC' }],
          onSortConfirm: (ruleValues, sortParams: SortParams) => {
            setDataCfg({ ...dataCfg, sortParams });
          },
        },
      }}
    />
  );
};

ReactDOM.render(<AdvancedSortDemo />, document.getElementById('container'));

configuration

show

advancedSort: {
  open: true,
}

submit

Through the onSortConfirm function, the selected rule data ruleValues and the data sortParams that can be processed into a table can be directly used

advancedSort: {
  open: true,
  onSortConfirm: (ruleValues: RuleValue[], sortParams: SortParams) => {
    console.log(ruleValues, sortParams)
  },
},

Customization

copy display

S2 provides display customization and rule copy customization for the entrance Button

dimension list

Support custom dimension list dimension , if not configured, the default is:行头+列头+数值

list for manual sorting

rule list

Support custom rule configuration list, if not configured, the default is:首字母、手动排序、其他字段

Note: If you customize here, you need to customize sortParams through ruleValues in onSortConfirm

Open sort popup

The onSortOpen: () => void callback can be used to support custom opening sorting pop-up windows, which are generally used to obtain pop-up frame data in advance