bixi/packages/core/table/index.zh-CN.md

企业级中后台前端解决方案

---
type: Basic
title: Table
subtitle: 表格
cols: 1
order: 1
---

```ts
import { BixiTableModule } from '@bixi/core/table';
```

## API

### bixi-table

####  基本 API
| 成员 | 说明 | 类型 | 默认值 |
|----|----|----|-----|
| `[rows]` | 数据 | `any[]` | `[]` |
| `[cols]` | 数据显示配置 | `ICols[]` | `[]` |
| `[loading]` | 是否加载中 | `boolean` | `false` |
| `[(filterParams)]` | 查询参数 | [IFilterParams](#IFilterParams) | {} |
| `[(pagination)]` | 分页参数 | [IPagination](#IPagination) | 同 [BixiPaginationListBase](#BixiPaginationListBase) |
| `[(selectedKeys)]` | 选择行的键 | `string[]` | `[]` |
| `(search)` | 在搜索变化时触发，包括分页，筛选  | EventEmitter<[ISearchParams](#ISearchParams)> | - |
| -| -| -| -|
| `[frontPagination]` | 是否前端分页 | `boolean` | `false` |
| `[scroll]`        | 表格滚动 | `{ x: number; y: number}` | {}

### BixiPaginationListBase

| 成员 | 说明 | 类型 | 默认值 |
|----|----|----|-----|
| `pagination` | 分页参数 | [IPagination](#IPagination) | `{ page: 1, pageSize: 10, total: 0}` |
| `onSearch` | 搜索(必需实现) | - | - |
| `onReset` | 自定义重置事件 | - | - |
| `onResetAndSearch` | 执行自定义重置事件并搜索 | - | - |
| `onResetPagination` | 重置分页信息 | - | - |
| `onResetPaginationAndSearch` | 重置分页信息并搜索 | - | - |
| `onPageChange` | 页码变化时 | EventEmitter<[IPagination](#IPagination)> | - |
| `onPageSizeChange` | 分页大小变化时 | EventEmitter<[IPagination](#IPagination)> | - |

## BIXI_TABLE_CONFIG
您可以在 `BIXI_TABLE_CONFIG` 中定义 bixi-table 的配置项，目前提供了对 status 的自定义配置

### 自定义 status
按照如下方式定义您自己的 status，如 typeA, typeB

```ts
import { BIXI_TABLE_CONFIG, IBixiTableConfig } from '@bixi/core/table';

const bixiTableConfig: IBixiTableConfig = {
  status: {
    typeA: {
      text: 'typeA_TEXT',  // 可以自定义文本
      style: {  // 可以自定义 style
        backgroundColor: 'pink',
        color: 'white'
      }
    },
    typeB: {
      text: 'typeB_TEXT',
      className: 'token-classname-test'  // 可以自定义 class
    }
  }
};

@NgModule({
  // ...
  providers: [
    {
      provide: BIXI_TABLE_CONFIG,
      useValue: bixiTableConfig
    }
  ],
  // ...
})
export class IdeaModule {
}
```
在组件中直接使用即可
```ts
export class IdeTableComponent {
  rows: IRows = [{
      name: 'typeA名称',
      status: 'typeA'
    }, {
      name: 'typeB名称',
      status: 'typeB名称'
    }
  ]
}
```

## Type

### IPagination
```ts
interface IPagination {
  page: number;
  pageSize: number;
  total: number;
}
```

### IFilterParams
```ts
interface IFilterParams {
  [key: string]: any;
}
```

### ISearchParams
```ts
interface ISearchParams {
  filterParams: IFilterParams;
  pagination: IPagination;
}
```

### IColBase
所有的列属性都继承于 IBaseCol
```ts
interface IBaseCol {
  name: string;
  key?: string;
  width?: string;
  value?: IAllowFn<IRenderProp>;
  onClick?: (row: any, index: number) => void;
  sort?: {
    key?: string, // 用于匹配 filterParams 中的键，如果不存在，filterParams 则会与该列的 key 相匹配
    direction?: 'descend' | 'ascend' | null
  };
  filter?: {
    key?: string;
    multiple?: boolean;
    options: {
      text: string;
      value: string;
      byDefault?: boolean;
    }[] | Observable<{
      text: string;
      value: string;
      byDefault?: boolean;
    }[]>
  };
}
```