S2

@antv/s2-react @antv/s2-react-components @antv/s2-vue

S2 内置了前端分页渲染的能力，但不提供分页组件，需要自行实现。

使用

首先需要在 s2Options 中配置 pagination 属性

const s2Options = {
  width: 600,
  height: 480,
  pagination: {
    pageSize: 4,
    current: 1,
  }
};

效果预览

第 1 页 (current: 1) :

第 2 页 (current: 2) :

API

Pagination

功能描述：分页配置。查看文档和示例

参数	说明	类型	默认值	必选
pageSize	每页数量	`number`	-	✓
current	当前页（从 1 开始）	`number`	`1`	✓
total	数据总条数	`number`	-

在 React 中使用 @antv/s2

import React from 'react'
import { SheetComponent } from '@antv/s2-react'
import { Pagination } from 'antd'

const s2Options = {
  pagination: {
    current: 1,
    pageSize: 4,
  }
}

function App() {
  return (
    <SheetComponent options={s2Options}>
      {({ pagination }) => (
        // 结合任意分页器使用：如 antd 的 Pagination 组件
        <Pagination
          size="small"
          showTotal={(total) => `共计 ${total} 条`}
          {...pagination}
        />
      )}
    </SheetComponent>
  )
}

在 Vue 中使用 @antv/s2-vue

import { SheetComponent } from '@antv/s2-vue'

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

<SheetComponent :options={s2Options} />

Demo 地址

API

<SheetComponent showPagination />

参数	说明	类型	默认值	必选
showPagination	是否显示默认分页（只有在 `options` 配置过 `pagination` 属性才会生效）	`boolean`	`{ onShowSizeChange?: (pageSize: number) => void, onChange?: (current: number) => void }`	`false`

S2

分页

S2

分页

使用

效果预览

API

在 React 中使用 @antv/s2

提示

在 Vue 中使用 @antv/s2-vue

提示

API

使用

效果预览

API

在 React 中使用 @antv/s2

提示

在 Vue 中使用 @antv/s2-vue

提示

API