@aliwind/rc-table

name: rc-table zhName: 增强表格 type: biz-component

@aliwind/rc-table

@aliwind/rc-table 是基于 Table 组件的增强实现，提供控制台标准化的数据列表

基本用法

MDXInstruction:importDemo:BasicDemo

APIs

name	type	default	desc
...Table.props			继承 wind <Table> 组件中的所有属性
pagination	object|React.Element		分页器
selection	function		选择器
operation	function		操作器
search	object|React.Element		搜索器
affixActionBar	boolean|string|array	false	动作区滚动锁定, 在 rc-table 中最多会有上下两个动作区, 可以指定 affixActionBar 的值为 true 来同时开启两个动作区的滚动锁定特性, 也可以通过字符串声明 `affixActionBar: ('bottom'
fixedBarZIndex	number	1000	当 affixActionBar 开启时，锁定的动作区的 z-index

卫星组件

可以将 @aliwind/rc-table 看做一个包含了不同功能区的 Table，不同的功能区中使用的组件可以看做是 Table 的卫星组件

|Operation   |       Search|
----------------------------
|          Table           |
----------------------------
|Selection   |   Pagination|

Pagination

分页器 (Pagination) 是数据列表中常用的功能组件，根据UED规约，位于数据表格的右下角区域，在 @aliwind/rc-table 中，可以通过 pagination 属性来定义分页器的属性和行为

使用属性定义（推荐）

在 @aliwind/rc-table 中，预设了符合UED规约的分页器组件，在绝大多数情况下，你只需要关心分页器的部分属性，比如：

• current 当前分页页码
• total 当前数据总条目数
• pageSize 每页数据条目数
• onChange 分页发生变化触发行为（通常是请求列表的数据并重绘）

预设的分页器使用了响应式设计：

• 在视口宽度小于 496px 时，显示 mini 的分页组件，强制不显示 pageSizeList 和跳转 input
• 在视口宽度在 497px - 790px 时，显示 simple 的分页组件，强制不显示 pageSizeList 和跳转 input
• 在视口宽度在 791px - 1128px 时，默认显示 normal 的分页组件，强制不显示 pageSizeList 和跳转 input
• 在视口宽度大于 1129px 时，默认显示 normal 的分页组件

import React, { Component } from 'react'
import Table from '@aliwind/rc-table'

class MyTable extends Component {
  state = {
    current: 1,
    total: 100,
    pageSize: 10,
    list: [], // 需要被填充的列表数据
    columns: [], // 列表列定义
  }

  onPageChange = (nextPageNumber) => {
    this.setState({
      list: [], // 模拟数据变化
    })
  }

  render() {
    const { list, columns, ...paginationProps } = this.state
    paginationProps.onChange = this.onPageChange

    return (
      <Table
        dataSource={list}
        columns={columns}
        pagination={paginationProps}
      />
    )
  }
}

使用自定义组件

在大多数情况下，直接向 pagination 属性传入分页器的属性定义就可以完成标准场景的分页展示。如果你有一些情况下需要自定义这个区域的内容，也可以传入一个自定义组件来完成特定的业务需求

示例：在分页器左侧添加一个功能按钮

import React, { Component } from 'react'
import { Button } from '@aliwind/component'
import Table from '@aliwind/rc-table'
‘
class MyTable extends Component {
  onButtonClick = () => {
    console.log('Clicked')
  }

  render() {
    return (
      <Table
        pagination={
          <>
            <Button type="primary" onClick={this.onButtonClick}>
            <Table.Pagination {...this.props.pagination} />
          </>
        }
        {...this.props}
      />
    )
  }
}

Selection

批量操作 (Selection) 也是常用的功能组件，在 @aliwind/rc-table 中，由于需要和 Table 内置的行选择进行交互，在底层使用了 Selection.Provider 重新封装了 Table 的行为，通过 Context API 对行选择的相关数据及行为进行传递交互，位于 Table 的左下角

可以通过 selection 属性对批量选择操作进行定义

使用 render 函数（推荐）

在@aliwind/rc-table中，预设了符合UED规约和业务场景的 Selection 组件：

• 在多选情况下，包含一个批量选择的复选框
• 使用 render props 渲染子组件

使用 render 函数就可以访问到和行选择相关的数据和行为：

• selectedRowKeys 访问已经选中的行数据的主键
• isSelectedAll 是否已经全部选中当前页的数据
• selectAll 全选当前页所有数据

示例：批量删除操作

• 未进行选择时，禁用删除按钮
• 进行行选择后，启用删除按钮，并显示已选择的条目数

import React from 'react'
import { Button } from '@aliwind/component'
import Table from '@aliwind/rc-table'

const MyTable = (props) => (
  <Table
    selection={
      ({ selectedRowKeys }) => (
        <>
          <Button disabled={selectedRowKeys.length === 0}>
            Delete
            ({selectedRowKeys.length})
          </Button>
        </>
      )
    }
    {...props}
  />
)

export default MyTable

使用自定义组件

根本不需要

Operation

位于 Table 左上角的操作区，没有任何预设组件和行为，通过 operation 来定义操作区的内容

使用自定义组件

由于没啥可讲的，直接上示例

示例：定义操作区

import React from 'react'
import { Button } from '@aliwind/component'
import Table from '@aliwind/rc-table'

const MyTable = (props) => {
  const { onCreate, onRefresh, ...tableProps } = props
  return (
    <Table
      operation={
        <>
          <Button type="primary" onClick={onCreate}>Create New Record</Button>
          <Button onClick={onRefresh}>Refresh</Button>
        </>
      }
      {...tableProps}
    />
  )
}

export default MyTable

Search

搜索区域 (Search) 也会经常使用到，在 @aliwind/rc-table 中预设了符合UED规约的搜索组件，在大多数场景下，你只需要关注一部分 Search 组件的属性：

• value 搜索框内容
• filter 条件筛选定义
• onSearch 搜索行为

使用属性定义（推荐）

和 Pagination 的定义基本一致，只需要传入 Search 组件的属性对象即可

示例：定义多个筛选条件

import React form 'react'
import Table from '@aliwind/rc-table'

const filters = [
  { value: 'name', label: '名称' },
  { value: 'id', label: 'id },
]

const MyTable = (props) => {
  const { onSearch, ...tableProps } = props
  const search = {
    filter: filters,
    onSearch
  }

  return (
    <Table
      search={search}
      {...tableProps}
    />
  )
}

export default MyTable

使用自定义组件

请参考上文 Pagination 中自定义组件的示例