@cc-dev-kit-test/console-components-table NPM

name: rc-table zhName: 增强表格

type: biz-component

@alicloud/console-components-table

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

基本用法

MDXInstruction:importDemo:BasicDemo

APIs

继承 wind Table 的 API，除非特别说明 MDXInstruction:renderInterface:IRcTableProps

卫星组件

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

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

Pagination

分页器 (Pagination) 是数据列表中常用的功能组件，根据UED规约，位于数据表格的右下角区域，在 @alicloud/console-components-table 中，可以通过 pagination 属性来定义分页器的属性和行为。开发者也可自行传入组件<Table.Pagination {...props} />或者函数(tableProps) => (<Table.Pagination {...props} />)，来进行定制。

使用属性定义（推荐）

在 @alicloud/console-components-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 '@alicloud/console-components-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.popupProps可以配置popup组件的行为，比如改变分页组件选择列表的弹出方向：

<Table
  dataSource={list}
  columns={columns}
  pagination={{
    popupProps: {
      align: "bl tl"
    }
  }}
/>

使用自定义组件

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

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

import React, { Component } from 'react'
import { Button } from '@alicloud/console-components'
import Table from '@alicloud/console-components-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) 也是常用的功能组件，在 @alicloud/console-components-table 中，由于需要和 Table 内置的行选择进行交互，在底层使用了 Selection.Provider 重新封装了 Table 的行为，通过 Context API 对行选择的相关数据及行为进行传递交互，位于 Table 的左下角

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

使用 render 函数（推荐）

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

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

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

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

示例：批量删除操作

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

import React from 'react'
import { Button } from '@alicloud/console-components'
import Table from '@alicloud/console-components-table'

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

export default MyTable

使用自定义组件

根本不需要

Operation

位于 Table 左上角和右上角的操作区，没有任何预设组件和行为，通过 operation 来定义操作区的内容，也可operation传入一个对象，通过指定primary和secondary来定义左上角和右上角的内容。也可直接传入ReactNode只定义左上角行为

使用自定义组件

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

示例：定义操作区

import React from 'react'
import { Button, Icon } from '@alicloud/console-components'
import Table from '@alicloud/console-components-table'

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

export default MyTable

Search

搜索区域 (Search) 也会经常使用到，在 @alicloud/console-components-table 中预设了符合UED规约的搜索组件，在大多数场景下，你只需要关注一部分 Search 组件的属性。开发者也可自行传入组件<Table.Search {...props} />或者函数(tableProps) => (<Table.Search {...props} />)，来进行定制。

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

使用属性定义（推荐）

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

示例：定义多个筛选条件

import React form 'react'
import Table from '@alicloud/console-components-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