dynamic-modal 1.1.18 → 1.1.19

package/dist/components/input-upload/input-upload.js

@@ -43,7 +43,7 @@ const InputUpload = ({ onChange, readAsArrayBuffer, read, helpText, label, ...pr
     };
     return (react_1.default.createElement("div", { className: "flex flex-col w-full gap-1 text-center" },
         label && (react_1.default.createElement("label", { className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white", htmlFor: `file-input-${props.id}` }, label)),
-        react_1.default.createElement("input", { className: "file:transition-all file:delay-150 block w-full text-sm text-slate-500\n        file:mr-4 file:py-2 file:px-4 file:rounded-md\n        file:border-0 file:text-sm file:font-semibold\n        file:bg-gray-100 file:text-blue-600\n        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed", "aria-describedby": `file-input-${props.id}-help`, id: `file-input-${props.id}`, type: "file", onChange: onChangeHandler, ...props }),
+        react_1.default.createElement("input", { className: "file:transition-all file:delay-150 block w-full text-sm text-slate-500\r\n        file:mr-4 file:py-2 file:px-4 file:rounded-md\r\n        file:border-0 file:text-sm file:font-semibold\r\n        file:bg-gray-100 file:text-blue-600\r\n        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed", "aria-describedby": `file-input-${props.id}-help`, id: `file-input-${props.id}`, type: "file", onChange: onChangeHandler, ...props }),
         react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-300 text-start", id: `file-input-${props.id}-help` }, helpText?.toUpperCase())));
 };
 exports.default = InputUpload;

package/dist/components/make-table/make-table.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IMakeTableProps } from '../../interfaces/make-table';
+declare const MakeTable: FC<IMakeTableProps>;
+export default MakeTable;

package/dist/components/make-table/make-table.js

@@ -0,0 +1,146 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const use_render_if_1 = __importDefault(require("../../hooks/use-render-if"));
+const component_state_1 = require("../../context/component/component-state");
+const use_live_data_1 = __importDefault(require("../../hooks/use-live-data"));
+const react_hook_form_1 = require("react-hook-form");
+const MakeTable = ({ element, watch, control, setValue }) => {
+    const [liveSearching, setLiveSearching] = (0, react_1.useState)(false);
+    const [selected, setSelected] = (0, react_1.useState)('');
+    const [rowSelected, setRowSelected] = (0, react_1.useState)(new Map());
+    const { Select } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
+    const { Button } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
+    const { selectTitleName, selectValueName, selectActionName, selectPlaceholder, renderIf, columns, name: elementName, data, liveData: elementLiveData, style, buttonStyle } = element;
+    const { checkLiveData, liveData, setLiveData } = (0, use_live_data_1.default)({
+        elementLiveData,
+    });
+    const { checkRender, render, setRender } = (0, use_render_if_1.default)({
+        elementRenderIf: renderIf,
+    });
+    const addToTable = (0, react_1.useCallback)((selected) => {
+        if (selected === '')
+            return;
+        const elementSelected = data.find((e) => e[selectValueName] === selected);
+        if (elementSelected) {
+            const currentElements = new Map(rowSelected.entries());
+            currentElements.set(selected, elementSelected);
+            setValue(elementName, Array.from(currentElements.values()));
+            setRowSelected(currentElements);
+            setSelected('');
+        }
+    }, [data, rowSelected, setRowSelected, setSelected]);
+    const tableButtonAction = (0, react_1.useCallback)((row, isDeleteAction, action) => {
+        const id = row[selectValueName];
+        if (isDeleteAction) {
+            const currentElements = new Map(rowSelected.entries());
+            currentElements.delete(id);
+            setRowSelected(currentElements);
+            return;
+        }
+        if (action)
+            action(row);
+    }, [rowSelected, setRowSelected]);
+    (0, react_1.useEffect)(() => {
+        const { unsubscribe } = watch((formData, { name, type }) => {
+            if (!name)
+                return;
+            if (renderIf) {
+                checkRender(formData, { name, type }).then((renderStatus) => {
+                    if (renderStatus === undefined || renderStatus === null)
+                        return;
+                    if (render !== renderStatus) {
+                        setRender(!!renderStatus);
+                    }
+                });
+            }
+            if (elementLiveData) {
+                setLiveSearching(true);
+                checkLiveData(formData, { name, type })
+                    .then((options) => {
+                    if (options === undefined || options === null)
+                        return;
+                    setLiveData(options);
+                })
+                    .finally(() => {
+                    setLiveSearching(false);
+                });
+            }
+        });
+        return () => unsubscribe();
+    }, [watch, render, liveData]);
+    if (!render)
+        return null;
+    const selectOptions = (0, react_1.useMemo)(() => {
+        return data.map((e) => {
+            const id = e[selectValueName];
+            const name = e[selectTitleName];
+            return {
+                id,
+                name
+            };
+        });
+    }, [data]);
+    const keyColumns = (0, react_1.useMemo)(() => {
+        return columns.map((e) => e.title);
+    }, [columns]);
+    const tableData = (0, react_1.useMemo)(() => {
+        return Array.from(rowSelected.values());
+    }, [rowSelected]);
+    return (react_1.default.createElement("div", { className: 'flex flex-col gap-2', style: { ...style } },
+        react_1.default.createElement("div", { className: "flex w-full justify-between gap-4" },
+            react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: elementName, defaultValue: [], render: ({ field: { value } }) => (react_1.default.createElement("input", { type: 'hidden', value: value })) }),
+            react_1.default.createElement(Select, { name: 'table-select-field', placeholder: selectPlaceholder, isSearch: true, value: selected, invalid: false, options: liveData || selectOptions, liveSearching: liveSearching, onChange: (selected) => {
+                    setSelected(selected);
+                } }),
+            react_1.default.createElement(Button, { style: buttonStyle, text: selectActionName, onClick: () => addToTable(selected) })),
+        react_1.default.createElement("table", { className: "text-[11px] w-full shadow-md sm:rounded-lg" },
+            react_1.default.createElement("thead", { className: "sticky top-0 text-gray-700 bg-gray-50 text-center z-10" },
+                react_1.default.createElement("tr", null, keyColumns.map((title) => (react_1.default.createElement("th", { scope: 'col', className: 'px-6 py-3' }, title))))),
+            react_1.default.createElement("tbody", null, tableData.map((row, index) => {
+                return (react_1.default.createElement("tr", { key: `row-${row[selectValueName]}-i-${index}`, className: "bg-white border-b hover:bg-gray-50 text-center" }, columns.map(({ Icon, isButton, action, isDeleteAction, style, ...column }) => {
+                    if (!isButton)
+                        return (react_1.default.createElement("td", { className: 'px-6 py-4', style: style }, row[column.key] ?? ''));
+                    return (react_1.default.createElement("td", null,
+                        react_1.default.createElement("button", { className: 'p-2 rounded-md text-lg', onClick: () => { tableButtonAction(row, isDeleteAction, action); }, style: style }, Icon && react_1.default.createElement(Icon, null))));
+                })));
+            })))));
+};
+exports.default = MakeTable;

package/dist/interfaces/make-button.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { IFieldProps } from './field';
 import { FieldValues, UseFormGetValues } from 'react-hook-form';
 export interface IMakeButton {
@@ -12,6 +12,7 @@ export interface IMakeButton {
     type?: 'button' | 'submit' | 'reset';
     onClick?: (formData: FieldValues) => void;
     color?: string;
+    children?: ReactNode;
 }
 export interface IMakeButtonProps extends IFieldProps {
     element: Omit<IMakeButton, 'elementType'>;

package/dist/interfaces/make-table.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties, JSX } from 'react';
+import { IField, IFieldProps } from './field';
+import { IModalLiveDataCondition } from './modal';
+export interface ITableColumn extends Pick<IField, 'style'> {
+    title: string;
+    key?: string;
+    isButton?: boolean;
+    isDeleteAction?: boolean;
+    Icon?: (props: any) => JSX.Element;
+    action?: (row: any) => void;
+}
+export interface IMakeTable extends Omit<IField, 'label' | 'defaultValue' | 'validation' | 'disabled' | 'enableIf' | 'id'> {
+    elementType: 'table';
+    selectValueName: string;
+    selectTitleName: string;
+    selectPlaceholder?: string;
+    selectActionName: string;
+    buttonStyle?: CSSProperties;
+    columns: Array<ITableColumn>;
+    defaultSelected?: Array<string>;
+    data: Array<any>;
+    liveData?: IModalLiveDataCondition;
+}
+export interface IMakeTableProps extends Omit<IFieldProps, 'unregister'> {
+    element: Omit<IMakeTable, 'elementType'>;
+}

package/dist/interfaces/make-table.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/modal.d.ts

@@ -10,7 +10,8 @@ import { IOption } from './option';
 import { IMakeButton } from './make-button';
 import { IMakeCustomUpload } from './make-custom-upload';
 import { IMakeWatcher } from './make-watcher';
-export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeTextarea | IMakeToggle | IMakeDescription | IMakeUpload | IMakeCustomUpload | IMakeWatcher | IMakeButton;
+import { IMakeTable } from './make-table';
+export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeTextarea | IMakeToggle | IMakeDescription | IMakeUpload | IMakeCustomUpload | IMakeWatcher | IMakeButton | IMakeTable;
 export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle;
 export interface IModalRenderAction {
     action: (data: string, ...args: any[]) => Promise<boolean>;

package/dist/modal.js

@@ -51,6 +51,7 @@ const make_button_1 = __importDefault(require("./components/make-button/make-but
 const component_state_1 = require("./context/component/component-state");
 const make_custom_upload_1 = __importDefault(require("./components/make-custom-upload/make-custom-upload"));
 const make_watcher_1 = __importDefault(require("./components/make-watcher/make-watcher"));
+const make_table_1 = __importDefault(require("./components/make-table/make-table"));
 const Modal = ({ open, close, config }) => {
     const { ModalButtonAction, ModalButtonCancel } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
     const [modalReady, setModalReady] = (0, react_1.useState)(undefined);
@@ -105,7 +106,7 @@ const Modal = ({ open, close, config }) => {
             setValue,
             unregister,
         };
-        return elementType === 'input' ? (react_1.default.createElement(make_input_1.default, { ...props, key: `modal-input-${index}`, element: element })) : elementType === 'select' ? (react_1.default.createElement(make_select_1.default, { ...props, key: `modal-select-${index}`, element: element })) : elementType === 'textarea' ? (react_1.default.createElement(make_textarea_1.default, { ...props, key: `modal-textarea-${index}`, element: element })) : elementType === 'toggle' ? (react_1.default.createElement(make_toggle_1.default, { ...props, key: `modal-toggle-${index}`, element: element })) : elementType === 'text' ? (react_1.default.createElement(make_description_1.default, { ...props, key: `modal-text-${index}`, element: element })) : elementType === 'upload' ? (react_1.default.createElement(make_upload_1.default, { ...props, key: `modal-upload-${index}`, element: element })) : elementType === 'custom-upload' ? (react_1.default.createElement(make_custom_upload_1.default, { ...props, key: `modal-custom-upload-${index}`, element: element })) : elementType === 'watcher' ? (react_1.default.createElement(make_watcher_1.default, { ...props, key: `modal-watcher-${index}`, element: element })) : elementType === 'button' ? (react_1.default.createElement(make_button_1.default, { ...props, key: `modal-button-${index}`, element: element, getValues: getValues })) : null;
+        return elementType === 'input' ? (react_1.default.createElement(make_input_1.default, { ...props, key: `modal-input-${index}`, element: element })) : elementType === 'select' ? (react_1.default.createElement(make_select_1.default, { ...props, key: `modal-select-${index}`, element: element })) : elementType === 'textarea' ? (react_1.default.createElement(make_textarea_1.default, { ...props, key: `modal-textarea-${index}`, element: element })) : elementType === 'toggle' ? (react_1.default.createElement(make_toggle_1.default, { ...props, key: `modal-toggle-${index}`, element: element })) : elementType === 'text' ? (react_1.default.createElement(make_description_1.default, { ...props, key: `modal-text-${index}`, element: element })) : elementType === 'upload' ? (react_1.default.createElement(make_upload_1.default, { ...props, key: `modal-upload-${index}`, element: element })) : elementType === 'custom-upload' ? (react_1.default.createElement(make_custom_upload_1.default, { ...props, key: `modal-custom-upload-${index}`, element: element })) : elementType === 'watcher' ? (react_1.default.createElement(make_watcher_1.default, { ...props, key: `modal-watcher-${index}`, element: element })) : elementType === 'button' ? (react_1.default.createElement(make_button_1.default, { ...props, key: `modal-button-${index}`, element: element, getValues: getValues })) : elementType === 'table' ? (react_1.default.createElement(make_table_1.default, { ...props, key: `modal-table-${index}`, element: element })) : null;
     };
     const closeHandler = () => {
         if (modalReady?.onClose)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-modal",
-  "version": "1.1.18",
+  "version": "1.1.19",
   "description": "The dynamic-modal is a solution of creation different modals into project using a json configuration file",
   "main": "index.js",
   "scripts": {

package/src/components/make-table/make-table.tsx

@@ -0,0 +1,201 @@
+'use client';
+
+import React, { FC, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+
+import useRenderIf from '../../hooks/use-render-if';
+import { IMakeTableProps } from '../../interfaces/make-table';
+import { ComponentStateContext } from '../../context/component/component-state';
+import { IOption } from '../../interfaces/option';
+import useLiveData from '../../hooks/use-live-data';
+import { Controller } from 'react-hook-form';
+
+const MakeTable: FC<IMakeTableProps> = ({
+    element,
+    watch,
+    control,
+    setValue
+}) => {
+    const [liveSearching, setLiveSearching] = useState<boolean>(false);
+    const [selected, setSelected] = useState<string>('')
+    const [rowSelected, setRowSelected] = useState<Map<string, any>>(new Map())
+
+    const { Select } = useContext(ComponentStateContext);
+
+    const { Button } = useContext(ComponentStateContext);
+
+    const {
+        selectTitleName,
+        selectValueName,
+        selectActionName,
+        selectPlaceholder,
+        renderIf,
+        columns,
+        name: elementName,
+        data,
+        liveData: elementLiveData,
+        style,
+        buttonStyle
+    } = element;
+
+    const { checkLiveData, liveData, setLiveData } = useLiveData({
+        elementLiveData,
+    });
+
+    const { checkRender, render, setRender } = useRenderIf({
+        elementRenderIf: renderIf,
+    });
+
+    const addToTable = useCallback((selected: string) => {
+        if (selected === '') return
+
+        const elementSelected: any = data.find((e) => e[selectValueName] === selected)
+
+        if (elementSelected) {
+            const currentElements = new Map(rowSelected.entries())
+            currentElements.set(selected, elementSelected)
+            setValue(elementName, Array.from(currentElements.values()))
+            setRowSelected(currentElements)
+            setSelected('')
+        }
+    }, [data, rowSelected, setRowSelected, setSelected])
+
+    const tableButtonAction = useCallback((row: any, isDeleteAction?: boolean, action?: (data: any) => void) => {
+        const id: string = row[selectValueName]
+
+        if (isDeleteAction) {
+            const currentElements = new Map(rowSelected.entries())
+            currentElements.delete(id)
+            setRowSelected(currentElements)
+
+            return
+        }
+
+        if (action) action(row)
+    }, [rowSelected, setRowSelected])
+
+    useEffect(() => {
+        const { unsubscribe } = watch((formData, { name, type }) => {
+            if (!name) return;
+
+            if (renderIf) {
+                checkRender(formData, { name, type }).then((renderStatus) => {
+                    if (renderStatus === undefined || renderStatus === null) return;
+
+                    if (render !== renderStatus) {
+                        setRender(!!renderStatus);
+                    }
+                });
+            }
+
+            if (elementLiveData) {
+                setLiveSearching(true);
+
+                checkLiveData(formData, { name, type })
+                    .then((options) => {
+                        if (options === undefined || options === null) return;
+
+                        setLiveData(options);
+                    })
+                    .finally(() => {
+                        setLiveSearching(false);
+                    });
+            }
+        });
+
+        return () => unsubscribe();
+    }, [watch, render, liveData]);
+
+    if (!render) return null;
+
+    const selectOptions = useMemo<Array<IOption>>(() => {
+        return data.map((e) => {
+            const id: string = e[selectValueName]
+            const name: string = e[selectTitleName]
+
+            return {
+                id,
+                name
+            }
+        })
+    }, [data])
+
+    const keyColumns = useMemo(() => {
+        return columns.map((e) => e.title)
+    }, [columns])
+
+    const tableData = useMemo(() => {
+        return Array.from(rowSelected.values())
+    }, [rowSelected])
+
+    return (
+        <div className='flex flex-col gap-2' style={{ ...style }}>
+            <div className="flex w-full justify-between gap-4">
+                <Controller
+                    control={control}
+                    name={elementName}
+                    defaultValue={[]}
+                    render={({ field: { value } }) => (
+                        <input type='hidden' value={value} />
+                    )}
+                />
+                <Select
+                    name='table-select-field'
+                    placeholder={selectPlaceholder}
+                    isSearch={true}
+                    value={selected}
+                    invalid={false}
+                    options={liveData || selectOptions}
+                    liveSearching={liveSearching}
+                    onChange={(selected: string) => {
+                        setSelected(selected)
+                    }}
+                />
+                <Button
+                    style={buttonStyle}
+                    text={selectActionName}
+                    onClick={() => addToTable(selected)}
+                />
+            </div>
+
+            <table className="text-[11px] w-full shadow-md sm:rounded-lg">
+                <thead className="sticky top-0 text-gray-700 bg-gray-50 text-center z-10">
+                    <tr>
+                        {
+                            keyColumns.map((title) => (
+                                <th scope='col' className='px-6 py-3'>{title}</th>
+                            ))
+                        }
+                    </tr>
+                </thead>
+                <tbody>
+                    {
+                        tableData.map((row, index) => {
+                            return (
+                                <tr key={`row-${row[selectValueName]}-i-${index}`} className="bg-white border-b hover:bg-gray-50 text-center">
+                                    {
+                                        columns.map(({ Icon, isButton, action, isDeleteAction, style, ...column }) => {
+                                            if (!isButton)
+                                                return (
+                                                    <td className='px-6 py-4' style={style}>{row[column.key!!] ?? ''}</td>
+                                                )
+
+                                            return (
+                                                <td>
+                                                    <button className='p-2 rounded-md text-lg'  onClick={() => { tableButtonAction(row, isDeleteAction, action) }} style={style}>
+                                                        {Icon && <Icon />}
+                                                    </button>
+                                                </td>
+                                            )
+                                        })
+                                    }
+                                </tr>
+                            )
+                        })
+                    }
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+export default MakeTable;

package/src/interfaces/component-state.ts

@@ -21,7 +21,6 @@ export interface IComponentState {
   ModalButtonCancel: FC<Omit<IMakeButton, 'elementType'>>;
   ModalButtonAction: FC<Omit<IMakeButton, 'elementType'>>;
   Button: FC<Omit<IMakeButton, 'elementType'>>;
-  //Description: FC<Omit<IMakeDescription, 'elementType'>>
   Input: FC<
     Omit<IMakeInput, 'elementType' | 'validation' | 'renderIf' | 'enableIf'> &
       IComponentAditionalProps

package/src/interfaces/make-button.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
 import { IFieldProps } from './field';
 import { FieldValues, UseFormGetValues } from 'react-hook-form';
@@ -14,6 +14,7 @@ export interface IMakeButton {
   type?: 'button' | 'submit' | 'reset';
   onClick?: (formData: FieldValues) => void;
   color?: string;
+  children?: ReactNode
 }
 
 export interface IMakeButtonProps extends IFieldProps {

package/src/interfaces/make-table.ts

@@ -0,0 +1,29 @@
+import { CSSProperties, JSX } from 'react';
+import { IField, IFieldProps } from './field';
+import { IModalLiveDataCondition } from './modal';
+
+export interface ITableColumn extends Pick<IField, 'style'>{
+  title: string,
+  key?: string,
+  isButton?: boolean
+  isDeleteAction?: boolean
+  Icon?: (props: any) => JSX.Element
+  action?: (row: any) => void
+}
+
+export interface IMakeTable extends Omit<IField, 'label' | 'defaultValue' | 'validation' | 'disabled' | 'enableIf' | 'id'> {
+  elementType: 'table';
+  selectValueName: string
+  selectTitleName: string
+  selectPlaceholder?: string
+  selectActionName: string
+  buttonStyle?: CSSProperties
+  columns: Array<ITableColumn>
+  defaultSelected?: Array<string>
+  data: Array<any>
+  liveData?: IModalLiveDataCondition;
+}
+
+export interface IMakeTableProps extends Omit<IFieldProps, 'unregister'> {
+  element: Omit<IMakeTable, 'elementType'>;
+}

package/src/interfaces/modal.ts

@@ -11,6 +11,7 @@ import { IOption } from './option';
 import { IMakeButton } from './make-button';
 import { IMakeCustomUpload } from './make-custom-upload';
 import { IMakeWatcher } from './make-watcher';
+import { IMakeTable } from './make-table';
 
 export type IModalField =
   | IMakeSelect
@@ -22,7 +23,8 @@ export type IModalField =
   | IMakeUpload
   | IMakeCustomUpload
   | IMakeWatcher
-  | IMakeButton;
+  | IMakeButton
+  | IMakeTable;
 
 export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle;
 

package/src/modal.tsx

@@ -30,6 +30,8 @@ import MakeCustomUpload from './components/make-custom-upload/make-custom-upload
 import { IMakeCustomUpload } from './interfaces/make-custom-upload';
 import MakeWatcher from './components/make-watcher/make-watcher';
 import { IMakeWatcher } from './interfaces/make-watcher';
+import MakeTable from './components/make-table/make-table';
+import { IMakeTable } from './interfaces/make-table';
 
 export const Modal = ({ open, close, config }: IModal) => {
   const { ModalButtonAction, ModalButtonCancel } = useContext(
@@ -175,6 +177,12 @@ export const Modal = ({ open, close, config }: IModal) => {
         element={element as IMakeButton}
         getValues={getValues}
       />
+    ) :  elementType === 'table' ? (
+      <MakeTable
+        {...props}
+        key={`modal-table-${index}`}
+        element={element as IMakeTable}
+      />
     ) : null;
   };