# editable-table-pro LLMs.txt

> 供 LLM 快速理解 `@flatbiz/antd/editable-table-pro` 的使用方式。

## 模块定位

使用FormList实现可编辑表格

## 导入方式

```ts
import { EditableTablePro } from '@flatbiz/antd/editable-table-pro';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `EditableTablePro` - 使用FormList实现可编辑表格
- `EditableTableProProps`
- `* from ./editable-table-pro.jsx`
- `EditableTableProDataIndex`
- `EditableTableProOperation`
- `EditableTableProColumnItem`
- `EditableTableProColumnItem2`
- `EditableTableProColumnItem1`

## 依赖的 antd 能力

`Form`、`message`、`Space`、`Table`

## Props / 配置要点

### dataSourceRelativeItem

- `level`（必填）：: number
- `parentUid`（可选）：: string | number
- `index`（必填）：: number

### EditableTableProProps

- `columns`（必填）：: EditableTableProColumnItem[]；当存在表头分组时，columns 类型为 Array<ColumnsType[0] & { children?: EditableTableProColumnItem[] }>
- `formListCompleteName`（可选）：: Array<string | number>；当前Edittable处在formList内部时（必填），完整formItem的name
- `formListName`（必填）：: Array<string | number> | string；Form.List name
- `uidFieldKey`（必填）：: string；唯一值字段Key
- `initialValue`（可选）：: TPlainObject[]；初始化值
- `childrenColumnName`（可选）：: string；指定树形结构的列名，默认值：children
- `tableProps`（可选）：: Omit< TableProps<TPlainObject>, 'dataSource' | 'columns' | 'rowKey' > & { // 如果重写了columns.onCell，则此配置失效 cellVerticalAlign?: 'baseline' | 'middle' | 'top' | '…；表格组件配置
- `rules`（可选）：: FormListProps['rules']；Form.List rules
- `className`（可选）：: string
- `style`（可选）：: CSSProperties
- `addRowDefaultValues`（可选）：: () => TPlainObject；默认新增按钮新增行默认值，hiddenFooterBtn != true 有效
- `hiddenFooterBtn`（可选）：: boolean；隐藏底部新增按钮
- `disabledFooterBtn`（可选）：: boolean；禁用底部新增按钮
- `tableBeforeAreaRender`（可选）：: ( formListOperation: FormListOperation, nextRowIndex: number ) => ReactElement | null；表格顶部区域渲染
- `tableAfterAreaRender`（可选）：: ( formListOperation: FormListOperation, nextRowIndex: number ) => ReactElement | null；表格底部区域渲染
- `expandedRowKeys`（可选）：: string[]；展开的行key，一般用于初始化，重新tableProps.expandable.expandedRowKeys后失效
- `expandedIconLayout`（可选）：: 'layout1' | 'layout2'；展开图标布局，默认：layout1

### EditableTableProDataIndex

- 声明：`export type EditableTableProDataIndex = string | readonly (string | number)[];`

### EditableTableProColumnItem

- 声明：`export type EditableTableProColumnItem =`

### EditableTableProColumnItem2

- `children`（可选）：: EditableTableProColumnItem[]

### EditableTableProColumnItem1

- `title`（可选）：: ReactElement | string
- `dataIndex`（可选）：: EditableTableProDataIndex
- `hidden`（可选）：: boolean；是否隐藏
- `formItemProps`（可选）：: | Omit<FormItemWrapperProps, 'children' | 'name'> | (( value: TAny, record: TPlainObject, index: number, operation: EditableTableProOperation ) => Omit<FormI…；Form.Item props
- `render`（可选）：: ( value: TAny, record: TPlainObject, index: number, operation: EditableTableProOperation ) => ReactElement；通过 operation.editable 来判断渲染结构，其中render返回的根节点会作为 Form.Item 的children
- `editable`（必填）：: boolean | ((record: TPlainObject, index: number) => boolean)；是否可编辑
- `tipsWrapperProps`（可选）：: string | TipsWrapperProps；会在 title 之后展示一个 icon
- `required`（可选）：: boolean；为表格header中的字段添加必填标识，如果未配置 formItemProps.rules，内部会新增一条required rule

## 使用规则与行为

- 当存在表头分组时，columns 类型为 Array<ColumnsType[0] & { children?: EditableTableProColumnItem[] }>
- 当前Edittable处在formList内部时（必填），完整formItem的name
- Form.List name
- 唯一值字段Key
- 初始化值
- 指定树形结构的列名，默认值：children
- 表格组件配置
- Form.List rules
- 默认新增按钮新增行默认值，hiddenFooterBtn != true 有效
- 隐藏底部新增按钮

## 基础示例

```tsx
import { EditableTablePro, type EditableTableProProps } from '@flatbiz/antd/editable-table-pro';

const props: EditableTableProProps = {
  // 按业务传入必要参数
};

<EditableTablePro {...props} />;
```

## 源码索引

- `src/editable-table-pro/editable-table-pro.tsx`
- `src/editable-table-pro/index.ts`
- `src/editable-table-pro/type.ts`

## 给 LLM 的注意事项

- 优先使用 `@flatbiz/antd/editable-table-pro` 或主入口 `@flatbiz/antd` 的公开导出，不要引用内部实现文件。
- 当 Props 与 antd 原组件同名能力冲突时，以本模块导出的 Props 类型为准。
- 若文档未覆盖某个边缘参数，请读取上方源码索引中的类型定义和 JSDoc。