# editable-table LLMs.txt

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

## 模块定位

可编辑表格（通过FormList实现） @deprecated 已过期，请使用 EditableTablePro 组件 demo：https://fex.qa.tcshuke.com/docs/admin/main/table/row-editable1

## 导入方式

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

## 公开导出

- `EditableTable` - 可编辑表格（通过FormList实现） @deprecated 已过期，请使用 EditableTablePro 组件 demo：https://fex.qa.tcshuke.com/docs/admin/main/table/row-editable1
- `EditableTableColumn` - antd 默认render功能此处不能使用
- `EditableTableProps`
- `CheckboxGroupFormItem`
- `DatePickerWrapperFormItem`
- `DateRangePickerWrapperFormItem`
- `FormItemAdapter`
- `FormItemAdapterProps`
- `InputNumberFormItem`
- `InputFormItem`
- `RadioGroupFormItem`
- `SelectorWrapperFormItem`
- `SwitchWrapperFormItem`
- `TextFormItem`
- `TextAreaFormItem`
- `UploadWrapperFormItem`
- `FormList`
- `FormListProps`
- `FormListItem`
- `FormListItemProps`
- `* from ./editable-table.jsx`
- `EditableTableName`
- `EditableTableRecordType`
- `EditableInputConfig`
- `EditableInputNumberConfig`
- `EditableSelectWrapperConfig`
- `EditableDatePickerWrapperConfig`
- `EditableDateRangePickerWrapperConfig`
- `EditableCheckboxGroupConfig`
- `EditableRadioGroupConfig`
- `EditableTextareaConfig`
- `EditableFileUploadConfig`
- `EditableSwitchWrapperConfig`
- `EditableCustomConfig` - 自定义编辑组件
- `EditableTypeConfig`
- `FieldSingleConfig`
- `FormListItemMethodOperateProps`
- `FormListMethodOperateProps`
- `FormListConfig`
- `EditableFormItemProps`
- `getEditable`

## 依赖的 antd 能力

`Button`、`Checkbox`、`Form`、`FormItemProps`、`FormListFieldData`、`FormListOperation`、`InputNumber`、`InputNumberProps`、`InputProps`、`message`、`Radio`、`RadioGroupProps`、`Space`、`Table`、`TableProps`、`Tag`

## Props / 配置要点

### fieldConfigFunctionParams

- `tableRowIndex`（必填）：: number
- `name`（必填）：: EditableTableName
- `tableRowName`（必填）：: EditableTableName
- `getTableRowData`（必填）：: () => TPlainObject

### EditableTableColumn

antd 默认render功能此处不能使用

- `tipsWrapperProps`（可选）：: string | TipsWrapperProps；会在 title 之后展示一个 icon
- `dataIndex`（可选）：: string
- `fieldConfig`（可选）：: | FieldSingleConfig | FormListConfig | ((data: fieldConfigFunctionParams) => FieldSingleConfig | FormListConfig)
- `hiddenField`（可选）：: | { dataIndex: string; } | { dataIndex: string; }[]；隐藏域字段
- `renderMiddleware`（可选）：: (item: { tableRowIndex: number; name: EditableTableName; tableRowName: EditableTableName; operation: FormListOperation; index: number; getTableRowData: () =>…；渲染中间件，如果renderMiddleware返回值为ReactElement格式，则会终止后续逻辑，fieldConfig配置将失效
- `tableChildrenColumnRender`（可选）：: ( value: TAny, record: TPlainObject, index: number ) => ReactElement | null；table datasource children column 自定义渲染
- `required`（可选）：: boolean；为表格header中的字段添加必填标识，无验证拦截功能

### EditableTableProps

- `name`（必填）：: EditableTableName；FormList name属性
- `completeName`（可选）：: Array<string | number>；当前Edittable处在formList内部时（必填），完整formItem的name
- `uidFieldKey`（必填）：: string；表格行数据，唯一值字段Key
- `tableProps`（可选）：: Omit< TableProps<EditableTableRecordType>, 'dataSource' | 'columns' | 'rowKey' > & { cellVerticalAlign?: 'baseline' | 'middle' | 'top' | 'bottom'; }
- `columns`（必填）：: EditableTableColumn[]
- `onTableBeforeRender`（可选）：: ( formListOperation: FormListOperation, nextRowIndex: number ) => ReactElement | null
- `onTableAfterRender`（可选）：: ( formListOperation: FormListOperation, nextRowIndex: number ) => ReactElement | null；设置后，将覆盖底部新增按钮
- `getAddRowDefaultValues`（可选）：: () => TPlainObject；新增行默认值，自定义onTableAfterRender后失效
- `hiddenFooterBtn`（可选）：: boolean；隐藏底部新增按钮，设置 onTableAfterRender后 失效
- `rules`（可选）：: FormListProps['rules']；Form.List rules
- `emptyShowSize`（可选）：: 'small' | 'large'；空效果显示尺寸，默认值：small
- `className`（可选）：: string
- `style`（可选）：: CSSProperties

### CheckboxGroupFormItemContent

- `value`（可选）：: Array<string | number>
- `onChange`（可选）：: (value: TAny) => void

### FormItemContentProps

- `value`（可选）：: [string, string]
- `onChange`（可选）：: (value?: [string, string]) => void

### FormItemAdapterProps

- `name`（必填）：: Array<number | string>
- `completeName`（必填）：: Array<number | string>
- `fieldConfig`（必填）：: FieldSingleConfig
- `tableRowIndex`（必填）：: number

### RadioGroupFormItemContent

- `value`（可选）：: string | number
- `onChange`（可选）：: (value: string | number) => void

### FormItemContentProps

- `value`（可选）：: string | number | Array<string | number>
- `onChange`（可选）：: (value: TAny) => void

## 使用规则与行为

- antd 默认render功能此处不能使用
- 会在 title 之后展示一个 icon
- 隐藏域字段
- 渲染中间件，如果renderMiddleware返回值为ReactElement格式，则会终止后续逻辑，fieldConfig配置将失效
- table datasource children column 自定义渲染
- 为表格header中的字段添加必填标识，无验证拦截功能
- FormList name属性
- 当前Edittable处在formList内部时（必填），完整formItem的name
- 表格行数据，唯一值字段Key
- 设置后，将覆盖底部新增按钮

## 基础示例

```tsx
import { EditableTable, type EditableTableProps } from '@flatbiz/antd/editable-table';

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

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

## 源码索引

- `src/editable-table/editable-table.tsx`
- `src/editable-table/form-item/checkbox-group.tsx`
- `src/editable-table/form-item/date-picker-wrapper.tsx`
- `src/editable-table/form-item/date-range-picker-wrapper.tsx`
- `src/editable-table/form-item/index.tsx`
- `src/editable-table/form-item/input-number.tsx`
- `src/editable-table/form-item/input.tsx`
- `src/editable-table/form-item/radio-group.tsx`
- `src/editable-table/form-item/selector-wrapper.tsx`
- `src/editable-table/form-item/switch-wrapper.tsx`
- `src/editable-table/form-item/text.tsx`
- `src/editable-table/form-item/textarea.tsx`
- `src/editable-table/form-item/upload-wrapper.tsx`
- `src/editable-table/form-list-item/form-list.tsx`
- `src/editable-table/form-list-item/index.tsx`
- `src/editable-table/index.ts`
- `src/editable-table/type.ts`
- `src/editable-table/utils.ts`

## 给 LLM 的注意事项

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