S2

Introduction

S2 provides built-in paging capability. It is essentially front-end pagination, click on the next page to scroll to the corresponding row.

Get started quickly

First, you need to configure the pagination attribute in s2Options

Pagination

boolean ｜ object required , default: null Function description: Paging configuration

parameter	illustrate	type	Defaults	required
pageSize	Quantity per page	`number`	-	✓
current	current page (starting from 1)	`number`	1	✓
total	Total number of data	`number`	-

If you develop based on @antv/s2-core , you need to introduce or implement paging components yourself. The core layer only provides paging capabilities. Refer to the example

If you develop based on @antv/s2-react or @antv/s2-vue , you only need to configure pagination-related configuration items to use it out of the box.

SpreadsheetProps

<SheetComponent showPagination/>

Parameter	Description	Type	Default	Required
showPagination	Whether to display the default pagination (only if the `pagination` attribute is configured in `options`, it will take effect)	`boolean`	`{ <br>onShowSizeChange?: (pageSize: number) => void,<br> >onChange?: (current: number) => void <br>}`	`false`

📢 It should be noted that in the @antv/s2-react version, the type of showPagination is:

type ShowPagination =
  | boolean
  | {
      onShowSizeChange?: (current: number, pageSize: number) => void,
      onChange?: (current: number, pageSize: number) => void
    }

React version

The Ant Design Pagination paging component is used, which supports transparent transmission API . If you need to modify the style, you can directly override it through CSS.

const s2Options = {
  // https://ant.design/components/pagination-cn/#API
  pagination: {}
}

<SheetComponent options={ s2Options }/>

Vue version 3.0

The Ant Design Vue paging component is used, which supports transparent transmission API . If you need to modify the style, you can directly override it through CSS.

const s2Options = {
  // https://antdv.com/components/pagination#API
  pagination: {}
}

< SheetComponent options={ s2Options }/>

demo address