---
name: Table 表格
route: /table
parent: 组件
menu: 数据展示
---
import { Playground, Props } from 'docz'
import  Table  from '../components/table'
import  Message  from '../components/message'
import col,{fixed,filter} from './data/col'
import dataSource from './data/rows'

# Table 表格
>提示: 展开代码编辑器可以在线编辑，实时生效

## 基础用法

<Playground>
    <Table  dataSource={dataSource} columns={col} rowId='id' showChecker={true} showSummary={true} summaryData={{impression:999999}}
    onChange={console.log} showPagination={true}
    />
</Playground>

## NoData

<Playground>
    <Table  dataSource={[]} columns={col} rowId='id' showChecker={true} showSummary={true} summaryData={{impression:999999}}
    onChange={console.log} showPagination={true} loading={true}
    />
</Playground>

## columns的指定
```typescript jsx
export type IColumn = {
    // 单元格的对齐方式
        align: 'left' | 'right' | 'center';
        // 标题栏，可以是字符串或者返回一个ReactElement的函数
        title: string | IRender;
        // 列左对齐或者右对齐
        fixed?: 'left' | 'right';
        // 过滤选项
        filter?: { label: string; value: number | string }[];
        // 是否允许过滤多选
        filterMultiple?: boolean;
        // 默认过滤的项目
        defaultFiltered?: number | string | (number | string)[];
        // 本地过滤函数
        onFilter?: (parmas: { value: any; row: any; index: number }) => boolean;
        // 排序，true 开启远程排序，若为函数则
        sorter?: true | ((rowA: any, rowB: any) => boolean);
        // 对应的字段名
        key?: string;
        // 列宽度
        width?: number | string;
        // 自定义列渲染
        render?: IRender;
};
```

## onChange 回调函数
onChange在table的数据源发生变化的时候会调用，传入以下可能的值

- 选中发生变化，传入`checked`数组，数组的值为选中的行数据的`rowId`
- 分页发生变化，传入 `pagination`对象
- 数据源发生变化，传入`changedRow`对象
- 过滤发生变化，传入`filter`对象，如果只有一个过滤条件，返回的过滤的字段和过滤值的对象，如果多个过滤条件，返回数组


## fixed

指定了`columns`中含有`fixed`的列，必须同时指定宽度，同时Table必须指定`scroll` 滑动宽度（数字类型默认px），且需要大于table的宽度

```typescript jsx
// 省略非关键属性
const fixed = [{title: '开关',fixed: 'left',width: 80,}, ... {title: '曝光数',fixed: 'right',width: 80}]
```

<Playground>
    <Table dataSource={dataSource} columns={fixed} rowId='id' showChecker={true} showSummary={true} summaryData={{impression:999999}}
    onChange={console.log} showPagination={true} scroll={1300}
    />
</Playground>

## fix header and summary row

也可以指定固定标题行或者汇总行 `fixRow="header"` 或者 `fixRow="summary"`，同时Table必须指定`height`固定高度


<Playground>
    <Table dataSource={dataSource} columns={fixed} rowId='id' showChecker={true} showSummary={true} summaryData={{impression:999999}}
    onChange={console.log} showPagination={true} scroll={1300} pagination={{pageSize:20}} height={576} fixRow="summary"
    />
</Playground>

## filter and sorter
列配置中，`filter`指定过滤选项；`filterMultiple`可以开启过滤多选；`filterLocal`本地过滤函数，选择filter会触发onChange事件，filter 支持多列求并，再次点击反选选中的条目，`defaultFiltered`可以指定默认过滤的值

`sorter`指定列的排序，如果值为true则是远程排序，点击后触发onChange事件，如果是一个函数，则为本地排序，`defaultSortDirection`可以指定默认的排序，所有列只能指定一个默认排序，否则会报错

<Playground>
    <Table dataSource={dataSource} columns={filter} rowId='id' showChecker={true} showSummary={true} summaryData={{impression:999999}}
    onChange={console.log} showPagination={true}
    />
</Playground>


## actionHover
可以指定每一行的悬浮操作
```typescript jsx
/** 悬浮操作栏 */
    actionHover?: (row: any, index: number) => React.ReactNode;
```
<Playground>
    <Table actionHover={(row)=><><a onClick={()=>Message.info('操作1')}>操作1</a><a onClick={()=>Message.info(row.name)}>操作2</a></>} dataSource={dataSource} columns={col} rowId='id' showChecker={true} showSummary={true} summaryData={{impression:999999}}
    onChange={console.log} showPagination={true}
    />
</Playground>


## API

<Props of={Table} />