# react-form-input-table
> a react input form table
Latest version **0.0.4** (published 2022-04-07) · ISC license · 0 weekly downloads
## Install
```sh
npm install react-form-input-table
pnpm add react-form-input-table
yarn add react-form-input-table
bun add react-form-input-table
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.4 |
| Published | 2022-04-07 |
| First published | 2022-03-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 854.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | yujun |
| Maintainers | janson_yu |
## Links
- npm: https://www.npmjs.com/package/react-form-input-table
- Repository: https://github.com/yujun9008/react-form-input-table
- Homepage: https://github.com/yujun9008/react-form-table#readme
- Issues: https://github.com/yujun9008/react-form-table/issues
- npm.io page: https://npm.io/package/react-form-input-table
## Dependencies (8)
- [antd](https://npm.io/package/antd.md) ^4.15.0
- [react](https://npm.io/package/react.md) ^17.0.2
- [moment](https://npm.io/package/moment.md) ^2.29.1
- [rollup](https://npm.io/package/rollup.md) ^2.44.0
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [typescript](https://npm.io/package/typescript.md) ^4.6.3
- [@types/react](https://npm.io/package/@types/react.md) ^17.0.3
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^17.0.3
## Recent versions
- 0.0.4 (latest) — 2022-04-07
- 0.0.3 — 2022-03-30
- 0.0.2 — 2022-03-30
- 0.0.1 — 2022-03-27
## README
react-form-input-table
一个基于 React 的多表单输入型 Table 组件，适用于中后台多行输入型表单。简单灵活，易用上手。
## install
```
npm i react-form-input-table
```
## Usage
#### 基本模式
```
const COLUMNS = [
{
title: "名称",
dataIndex: "title",
},
{
title: "富文本",
dataIndex: "richText",
rows: "3",
},
{
title: "日期",
dataIndex: "time",
inputType: "dateTimePicker",
},
{
title: "开关",
dataIndex: "switch",
inputType: "boolean",
},
{
title: "选择框",
dataIndex: "select",
inputType: "select",
selectSource: [
{
id: 1,
name: "第一项",
},
{
id: 2,
name: "第二项",
},
],
},
{
title: "自定义时间",
dataIndex: "dateRange",
inputType: "customAction",
customRender: (record) => {
return (
<>
);
},
},
{
title: "操作",
dataIndex: "operation",
inputType: "operation",
},
];
const dataSource = [
{
id: 1,
title: "测试",
time: moment(),
switch: true,
select: 2,
},
];
const save = values => {
}
{ save(values) }}
/>
```
#### 单行保存模式
```
```
## API and Usage
#### Table Properties
| Property | Type | Required | Explanation |
| ------------------ | ---------------- | -------- | ----------------------------------------------- |
| columns | array | yes | 见下面 Columns |
| dataSource | array | yes | 默认数据 |
| saveBtnText | string | no | 保存按钮文案 默认 ‘保存’ |
| addBtnText | string | no | 新增按钮文案 默认添加 |
| isSingleSave | boolean | no | 是否单行保存,此模式每行数据都有保存按钮 |
| limitDataSourceLen | number | no | 最大的数据条数限制 超出则添加按钮 disabled 状态 |
| onSave | (record) => void | yes | 保存成功回调 |
| onDelete | (id) => void | no | isSingleSave 为 true 时需要，删除一行回调 |
#### Columns
表格 title
| Property | Type | Required | Explanation |
| ------------ | --------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| title | string | yes | |
| dataIndex | string | yes | 后端关联的字段名 |
| inputType | string | no | 'number'/'customAction'/'operation'分别表示数字类型/自定义节点类型/操作（固定类型，默认内置删除操作）
省略该字段默认为 string 输入框类型 |
| rules | [] | no | 自定义校验规则，参考 antd form,
默认所有项必填，传[]可表示非必填 |
| customRender | (record)=> void | no | 自定义输出 |
| max | number | no | 最大数字或最长字符串 |
| min | number | no | 最小数字或最短字符串 |
---
_Source: https://npm.io/package/react-form-input-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._