@alicloud/console-components-table

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

基本用法

$XView

APIs

继承 @alicloud/console-components 基础组件 Table 的 API

$XView

卫星组件

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

|PrimaryOperation | Search |      SecondaryOperation|
----------------------------------------------------
|                     Table                         |
----------------------------------------------------
|Selection             |                 Pagination |

Pagination

分页器 (Pagination) 是数据列表中常用的功能组件，根据UED规约，位于数据表格的右下角区域。

@alicloud/console-components-table 内置了Pagination的能力，用户可以通过props.pagination 属性来定义分页器的属性和行为。有以下三种方式定义分页器区域：

• 使用属性定义。直接传入Pagination的props
• 传入jsx。比如<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 的分页组件

通过pagination.popupProps可以配置popup组件的行为，比如改变分页组件选择列表的弹出方向：

1<Table
2  dataSource={list}
3  columns={columns}
4  pagination={{
5    popupProps: {
6      align: "bl tl"
7    }
8  }}
9/>

如下的Demo所示

$XView

使用jsx来定义

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

如下Demo所示

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

$XView

使用渲染函数来定义

1<Table
2  pagination={(tableProps) => (
3    <Pagination {...paginationProps} />
4  )}
5/>

不再列举Demo，开发者可自行尝试

Selection

批量操作 (Selection) 区域位于 Table 的左下角。用于辅助表格数据的选择和操作。

使用渲染函数来定义

可以通过 selection 属性传入一个函数来进行定义，渲染函数能够拿到当前选择状态。

$XView

Operation

位于 Table 左上角和右上角的操作区。比如放置“新建按钮”、“刷新按钮”等等。

操作区默认为空，用户可以通过 props.operation 来定义操作区的内容。其中，props.operation.primary定义左上角的主操作区，props.operation.secondary定义右上角的次操作区。 如果用户给props.operation直接传入了一个jsx element，那么它将作为主操作区。

使用jsx来定义

只定义左上角操作区

1<Table
2  operation={
3    <>
4      <Button type="primary" onClick={onCreate}>Create New Record</Button>
5      <Button onClick={onRefresh}>Refresh</Button>
6    </>
7  }
8  {...tableProps}
9/>

$XView

同时定义右上角和左上角操作区

1<Table
2  operation={{
3    primary: (
4      <>
5        <Button type="primary" onClick={onCreate}>Create New Record</Button>
6        <Button onClick={onRefresh}>Refresh</Button>
7      </>
8    ),
9    secondary: (
10      <Button onClick={onConfig}>
11        <Icon type="cog" />
12      </Button>			
13    )
14  }}
15  {...tableProps}
16/>

$XView

同样operation自定义组件时也可传入(tableProps) => ReactNode， 请参考pagination中的实现方式

Search

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

使用属性来定义

search直接传入Search组件的props即可, 如下Demo所示。

1<Table
2  search={{
3    placeholder: '请输入name进行搜索',
4    filterValue: 'en',
5    filter: [
6      {
7        value: 'en',
8        label: '英文',
9      },
10      {
11        value: 'zh',
12        label: '中文',
13      },
14    ],
15    onSearch: handleSearch,
16    onChange: handleSearch,
17    ...seearchProps
18  }}
19/>
20

$XView

使用jsx来定义

在 search 右边添加一个自定义按钮（custom button）

1<Table
2  search={
3    <div>
4      <Search
5        placeholder="请输入name进行搜索"
6        filterValue="en"
7        filter={[
8          {
9            value: 'en',
10            label: '英文',
11          },
12          {
13            value: 'zh',
14            label: '中文',
15          },
16        ]}
17        onSearch={handleSearch}
18        onChange={handleSearch}
19      />
20      <Button>Custom Button</Button>
21
22    </div>
23	}
24/>

$XView

同样Search自定义组件时也可传入(tableProps) => ReactNode渲染函数， 请参考pagination中的实现方式

调整操作栏吸附宽度

使用affixActionBar时，可以通过fixedBarExpandWidth来调整操作栏吸附时的宽度，让它们更美观：

$XView

fixedHeader实现固定操作栏

有时候affixActionBar无法帮助你固定操作栏（由于position:sticky的机制），您可以使用fixedHeader结合maxBodyHeight促使Table的body部分进行滚动，从而实现操作栏的固定。

1<Table
2  maxBodyHeight={300}
3  fixedHeader={true}
4/>

$XView