diff --git a/src/components/EditableTable.jsx b/src/components/EditableTable.jsx
new file mode 100644
index 0000000..f0fee09
--- /dev/null
+++ b/src/components/EditableTable.jsx
@@ -0,0 +1,189 @@
+import { Form, Input, Table, Button, Popconfirm } from "antd"
+import { EditOutlined, SaveOutlined, PlusOutlined, CloseCircleOutlined, DeleteOutlined } from '@ant-design/icons'
+import { useState } from "react";
+
+const newRowKeyValue = 'newRow'
+
+const EditableCell = ({
+ editing,
+ record,
+ dataIndex,
+ input,
+ isRequired,
+ title,
+ formItemClass,
+ formItemRules,
+ children,
+}) => {
+
+ const inputNode = input ??
+ const rules = formItemRules ?? [{
+ required: isRequired,
+ message: `Please Input ${title}!`,
+ }]
+
+ const editor =
+ {inputNode}
+
+
+ return (|
+ {editing ? editor: children}
+ | )
+}
+
+export const EditableTable = ({
+ columns,
+ dataSource,
+ onChange, // Метод вызывается со всем dataSource с измененными элементами после любого действия
+ onRowAdd, // Метод вызывается с новой добавленной записью. Если метод не поределен, то кнопка добавления строки не показывается
+ onRowEdit,// Метод вызывается с новой отредактированной записью. Если метод не поределен, то кнопка редактирования строки не показывается
+ onRowDelete,// Метод вызывается с удаленной записью. Если метод не поределен, то кнопка удаления строки не показывается
+ ...otherTableProps}) => {
+
+ const [form] = Form.useForm()
+ const [data, setData] = useState(dataSource?? [])
+ const [editingKey, setEditingKey] = useState('')
+
+ const isEditing = (record) => record.key === editingKey
+
+ const edit = (record) => {
+ form.setFieldsValue({...record})
+ setEditingKey(record.key)
+ }
+
+ const cancel = () => {
+ if(editingKey == newRowKeyValue)
+ {
+ const newData = [...data]
+ const index = newData.findIndex((item) => newRowKeyValue === item.key)
+ newData.splice(index, 1)
+ setData(newData)
+ }
+ setEditingKey('')
+ }
+
+ const addNewRow = () => {
+ let newRow = {
+ key:newRowKeyValue
+ }
+ const newData = [...data, newRow]
+ setData(newData)
+ edit(newRow)
+ }
+
+ const save = async (record) => {
+ try {
+ const row = await form.validateFields()
+ const newData = [...data]
+ const index = newData.findIndex((item) => record.key === item.key)
+ let item = newData[index]
+
+ newData.splice(index, 1, { ...item, ...row })
+
+ if(item.key === newRowKeyValue)
+ item.key = newRowKeyValue + newData.length
+
+ setEditingKey('')
+ setData(newData)
+
+ if (editingKey === newRowKeyValue)
+ onRowAdd(item)
+ else
+ onRowEdit(item)
+
+ if(onChange)
+ onChange(newData)
+
+ } catch (errInfo) {
+ console.log('Validate Failed:', errInfo)
+ }
+ }
+
+ const deleteRow = (record) =>{
+ const newData = [...data]
+ const index = newData.findIndex((item) => record.key === item.key)
+
+ newData.splice(index, 1)
+ setData(newData)
+
+ onRowDelete(record)
+
+ if(onChange)
+ onChange(newData)
+ }
+
+ const operationColumn = {
+ title: (!!onRowAdd) &&