import React from 'react';
import { Input, Col, InputNumber, Button, Select ,Form} from 'antd';
import EditTable from '@antdp/edit-table';
import 'antd/dist/reset.css';
const originData = [];

for (let i = 0; i < 5; i++) {
  originData.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}

const EditableTable =() => {
  const [data, setData] = React.useState(originData);
  const [tableProps, setTableProps] = React.useState({
    isAdd: true,
    isOpt: true,
    optIsFirst: false,
  });
  const columns = [
    {
      title: 'name',
      dataIndex: 'name',
      width: '20%',
      editable: true,
      type: 'Input',
    },
    {
      title: 'age',
      dataIndex: 'age',
      width: '15%',
      editable: true,
      type: 'Custom',
      rules: [{ required: true, message: '请输入' }],
      inputNode: <InputNumber />,
    },
     {
      title: 'isList',
      dataIndex: 'list',
      width: '15%',
      editable: true,
      type: 'Custom',
      isList: true,
      render: (text) => {
        return (
          text &&
          (text || [])
            .filter((it) => it)
            .map((ite) => ite.first)
            .join(',')
        );
      },
      inputNode: (fields, { add, remove }, { errors }) => (
        <>
          {fields.map(({ key, name, fieldKey, ...restField }, index) => (
            <div style={{marginBottom:10}} >
            <EditTable.Item
              key={key}
              {...restField}
              name={[name, 'first']}
              fieldKey={[fieldKey, 'first']}
              rules={[
                {
                  required: true,
                  whitespace: true,
                  message: 'Missing first name',
                }, 
              ]}
            >
              <Input placeholder="First Name" />
            </EditTable.Item>
            </div>
          ))}
          <Form.Item>
            <Button type="dashed" onClick={() => add()}>
              Add field
            </Button>
            <Form.ErrorList errors={errors} />
          </Form.Item>
        </>
      ),
    },
    {
      title: 'address',
      dataIndex: 'address',
      width: '30%',
      editable: true,
      type: 'Input',
    },
  ];
  return (
    <div>
      <EditTable
       initValue={{ address: 2193 }}
        onValuesChange={(list) => setData(list)}
        rowKey="key"
        dataSource={data}
        columns={columns}
        onSave={(list) => setData(list)}
        {...tableProps}
      />
    </div>
  );
};
export default EditableTable

操作列在第一列

import React from 'react';
import { Input, Col, InputNumber, Button, Select ,Form} from 'antd';
import EditTable from '@antdp/edit-table';
import 'antd/dist/reset.css';
const originData = [];

for (let i = 0; i < 5; i++) {
  originData.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    // address: `London Park no. ${i}`,
  });
}

const EditableTable =() => {
  const [data, setData] = React.useState(originData);
  const [tableProps, setTableProps] = React.useState({
    isAdd: true,
    isOpt: true,
    optIsFirst: true,
  });
  const columns = [
    {
      title: 'name',
      dataIndex: 'name',
      width: '20%',
      editable: true,
      type: 'Custom',
      inputNode: (edit) => {
        return <Input {...edit} />;
      },
    },
    {
      title: 'age',
      dataIndex: 'age',
      width: '15%',
      editable: true,
      type: 'Input',
      // rules: [{ required: true, message: '请输入' }],
       inputNode: (edit) => {
        return <Input {...edit} />;
      },
    },
    {
      title: 'address',
      dataIndex: 'address',
      width: '30%',
      editable: true,
      type: 'Input',
    },
  ];
  return (
    <div>
      <EditTable
        initValue={{ address: 2193 }}
        onValuesChange={(list) => setData(list)}
        rowKey="key"
        optIsFirst={true}
        dataSource={data}
        columns={columns}
        onSave={(list) => setData(list)}
        isAdd={true}
        {...tableProps}
      />
    </div>
  );
};
export default EditableTable

显示删除按钮

import React from 'react';
import { Input, Col, InputNumber, Button, Select ,Form} from 'antd';
import EditTable from '@antdp/edit-table';
import 'antd/dist/reset.css';
const originData = [];

for (let i = 0; i < 5; i++) {
  originData.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    // address: `London Park no. ${i}`,
  });
}

const EditableTable =() => {
  const [data, setData] = React.useState(originData);
  const [tableProps, setTableProps] = React.useState({
    isAdd: true,
    isOpt: true,
    isOptDelete:true,
    optIsFirst: false,
  });
  const columns = [
    {
      title: 'name',
      dataIndex: 'name',
      width: '20%',
      editable: true,
      type: 'Custom',
      inputNode: (edit) => {
        return <Input {...edit} />;
      },
    },
    {
      title: 'age',
      dataIndex: 'age',
      width: '15%',
      editable: true,
      type: 'Custom',
      rules: [{ required: true, message: '请输入' }],
       inputNode: (edit) => {
        return <Input {...edit} />;
      },
    },
    {
      title: 'address',
      dataIndex: 'address',
      width: '30%',
      editable: true,
      type: 'Input',
    },
  ];
  return (
    <div>
      <EditTable
        initValue={{ address: 2193}}
        onValuesChange={(list) => setData(list)}
        rowKey="key"
        dataSource={data}
        columns={columns}
        onSave={(list) => setData(list)}
        isAdd={true}
        {...tableProps}
      />
    </div>
  );
};
export default EditableTable

允许同时编辑多行

import React from 'react';
import { Input, Col, InputNumber, Button, Select ,Form} from 'antd';
import EditTable from '@antdp/edit-table';
import 'antd/dist/reset.css';
const originData = [];

for (let i = 0; i < 5; i++) {
  originData.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    // address: `London Park no. ${i}`,
  });
}

const EditableTable =() => {
  const [data, setData] = React.useState(originData);
  const [tableProps, setTableProps] = React.useState({
    isAdd: true,
    isOpt: true,
    isOptDelete:true,
    optIsFirst: false,
    multiple:true
  });
  const columns = [
    {
      title: 'name',
      dataIndex: 'name',
      width: '20%',
      editable: true,
      type: 'Custom',
      inputNode: (edit) => {
        return <Input {...edit} />;
      },
    },
    {
      title: 'age',
      dataIndex: 'age',
      width: '15%',
      editable: true,
      type: 'Custom',
      rules: [{ required: true, message: '请输入' }],
       inputNode: (edit) => {
        return <Input {...edit} />;
      },
    },
    {
      title: 'address',
      dataIndex: 'address',
      width: '30%',
      editable: true,
      type: 'Input',
    },
  ];
  return (
    <div>
      <EditTable
        initValue={{ address: 2193}}
        onValuesChange={(list) => setData(list)}
        rowKey="key"
        dataSource={data}
        columns={columns}
        onSave={(list) => setData(list)}
        isAdd={true}
        {...tableProps}
      />
    </div>
  );
};
export default EditableTable

无操作和新增

import React from 'react';
import { Input, Col, InputNumber, Button, Select ,Form} from 'antd';
import EditTable from '@antdp/edit-table';
import 'antd/dist/reset.css';
const originData = [];

for (let i = 0; i < 5; i++) {
  originData.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    // address: `London Park no. ${i}`,
  });
}

const EditableTable =() => {
  const [data, setData] = React.useState(originData);
  const [tableProps, setTableProps] = React.useState({
    isOpt: false,
    isAdd:false,
  });
  const columns = [
    {
      title: 'name',
      dataIndex: 'name',
      width: '20%',
      editable: true,
      type: 'Custom',
      inputNode: (edit) => {
        return <Input {...edit} />;
      },
    },
    {
      title: 'age',
      dataIndex: 'age',
      width: '15%',
      editable: true,
      type: 'Custom',
      rules: [{ required: true, message: '请输入' }],
       inputNode: (edit) => {
        return <Input {...edit} />;
      },
    },
    {
      title: 'address',
      dataIndex: 'address',
      width: '30%',
      editable: true,
      type: 'Input',
    },
  ];
  return (
    <div>
      <EditTable
        initValue={{ address: 2193}}
        onValuesChange={(list) => setData(list)}
        rowKey="key"
        dataSource={data}
        columns={columns}
        onSave={(list) => setData(list)}
        isAdd={true}
        {...tableProps}
      />
    </div>
  );
};
export default EditableTable

API

参数	说明	类型	默认值
columns	列	`ColumnsProps[]`	-
onSave	保存数据	`(data: any[], row: any, record?: any, indx?: number) => void`	-
onBeforeSave	保存数据之前校验	`(item: any, record: any, index: number) => boolean`	-
rowKey	主键	`string`	-
optIsFirst	操作列是放在首位还是最后	`boolean`	-
isOpt	是否需要操作列	`boolean`	-
optConfig	操作配置	`ColumnsProps`	-
isOptDelete	操作是否需要删除按钮	`boolean`	-
isAdd	是否存在新增按钮	`boolean`	-
initValue	新增初始值	`any`	-
onBeforeAdd	新增之前判断	`() => boolean`	-
onErr	行报错信息	`(err: ValidateErrorEntity<any>) => void`	-
onValuesChange	表单值更新事件	`(list:any) => void`	-
multiple	是否可以多行编辑	`boolean`	-
addBtnProps	新增按钮配置	`ButtonProps`	-
store	form 存储表单	`Store`	-

ColumnsProps

参数	说明	类型	默认值
editable	是否编辑	`boolean`	-
inputNode	自定义渲染编辑组件	`(...arg: any[]) => React.ReactNode \| React.ReactNode`	-
rules	规则	`Rule[]`	-
itemAttr	formItem 表单其他属性值	`Omit<FieldProps, 'rules' \| 'label' \| 'name'>`	-
attr	formItem 表单 children 中组件参数	`Partial<ItemChildAttr<any, any>>`	-
type	组件类型	`ItemChildType`	-
tip	错误提示	`(errs: string) => React.ReactNode`	-
tipAttr	Tooltip 组件属性	`TooltipProps`	-
isList	是否是 List	`boolean`	-
listAttr	List 组件参数	`Omit<ListProps, 'children' \| 'name'>`	-
render	自定义渲染(列原始默认的自定义渲染,加了个 other 参数，不是编辑状态下的表格渲染) ， other 参数只有操作列才有	`(value: any,record: any,index: number,other?: OtherProps) => React.ReactNode \| RenderedCell<any>`	-

OtherProps

参数	说明	类型	默认值
editingKey	编辑中字段	`any[]`	-
editable	编辑中字段	`boolean`	-
newAdd	当前行是否编辑	`any[]`	-
isNewAdd	是否新增的	`boolean`	-
save	保存，`key:主键` ，`record：行数据`，`index:下标`	`(key: string \| number, record: any, indx: number) => void`	-
cancel	取消， `id：主键`	`(id: string \| number) => void`	-
onDelete	删除，`id：主键`， `rowItem 当前行数据` ，`index:下标`	`(id: string \| number, rowItem: any, index: number) => void`	-
edit	编辑按钮，`record 当前行数`	`(record: any) => void`	-

ref 返回值

参数	说明	类型	默认值
save	保存	`(key: string, record: any, indx: number) => void`	-
onDelete	删除	`(id: string \| number, rowItem: any, index: number) => void`	-
edit	编辑	`(record: any) => void`	-
cancel	取消编辑	`(key: string \| number) => void`	-
add	新增	`() => void`	-
isEditing	是否编辑中	`(record: any) => boolean`	-
editingKey	编辑 id	`(string \| number)[]`	-
newAdd	是否编辑新增的数据	`(string \| number)[]`	-
forms	收集所有表单	`Store`	-

Item 组件参数

参数	说明	类型	默认值
preName	当前行数据存储父级的name list时不用传	`string`	-
itemValue	当前行的所有数据	`any`	-
tipAttr	Tooltip 组件属性	`TooltipProps`	-
tip	错误提示	`(errs: string) => React.ReactNode`	-
children	进行覆写方法时新增一个行参数 v	`React.ReactNode`	-

Keywords

FAQs

What is @antdp/edit-table?

Is @antdp/edit-table popular?

Is @antdp/edit-table well maintained?

Package last updated on 11 Feb 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install