- {components.map((id) => (
+ {sortedComponents.map((id) => (
state.checkIfAnyWidgetVisibilityChanged(), shallow);
+ const getExposedValueOfComponent = useStore((state) => state.getExposedValueOfComponent, shallow);
+ const setReorderContainerChildren = useStore((state) => state.setReorderContainerChildren, shallow);
useEffect(() => {
const selectedSet = new Set(selectedComponents);
@@ -318,7 +319,7 @@ export default function Grid({ gridWidth, currentLayout }) {
useEffect(() => {
reloadGrid();
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [selectedComponents, openModalWidgetId, boxList, currentLayout]);
+ }, [selectedComponents, openModalWidgetId, boxList, currentLayout, checkIfAnyWidgetVisibilityChanged]);
const updateNewPosition = (events, parent = null) => {
const posWithParent = {
@@ -330,6 +331,8 @@ export default function Grid({ gridWidth, currentLayout }) {
const isComponentVisible = (id) => {
const component = getResolvedComponent(id);
+ const componentExposedVisibility = getExposedValueOfComponent(id)?.isVisible;
+ if (componentExposedVisibility === false) return false;
let visibility;
if (isArray(component)) {
visibility = component?.[0]?.properties?.visibility ?? component?.[0]?.styles?.visibility ?? null;
@@ -536,6 +539,7 @@ export default function Grid({ gridWidth, currentLayout }) {
})
);
}
+ setReorderContainerChildren(draggedOverElemId ?? 'canvas');
} catch (error) {
console.error('Error dragging group', error);
}
@@ -631,13 +635,13 @@ export default function Grid({ gridWidth, currentLayout }) {
// When clicked on widget boundary/resizer, select the component
setSelectedComponents([e.target.id]);
}
- showGridLines();
if (!isComponentVisible(e.target.id)) {
return false;
}
handleActivateNonDraggingComponents();
useGridStore.getState().actions.setResizingComponentId(e.target.id);
e.setMin([gridWidth, GRID_HEIGHT]);
+ showGridLines();
}}
onResizeEnd={(e) => {
try {
@@ -646,10 +650,12 @@ export default function Grid({ gridWidth, currentLayout }) {
return id === e.target.id;
});
hideGridLines();
+ if (!e.lastEvent) {
+ return;
+ }
let _gridWidth = useGridStore.getState().subContainerWidths[currentWidget.component?.parent] || gridWidth;
let width = Math.round(e?.lastEvent?.width / _gridWidth) * _gridWidth;
const height = Math.round(e?.lastEvent?.height / GRID_HEIGHT) * GRID_HEIGHT;
-
const currentWidth = currentWidget.width * _gridWidth;
const diffWidth = e.lastEvent?.width - currentWidth;
const diffHeight = e.lastEvent?.height - currentWidget?.height;
@@ -696,6 +702,7 @@ export default function Grid({ gridWidth, currentLayout }) {
resizeData.gw = _gridWidth;
}
handleResizeStop([resizeData]);
+ setReorderContainerChildren(currentWidget?.parent ?? 'canvas');
} catch (error) {
console.error('ResizeEnd error ->', error);
}
@@ -775,6 +782,11 @@ export default function Grid({ gridWidth, currentLayout }) {
ev.target.style.transform = `translate(${posX}px, ${posY}px)`;
});
}
+
+ const groupParentId =
+ boxList.find(({ id }) => id === groupResizeDataRef.current[0].target.id)?.parent ?? 'canvas';
+ setReorderContainerChildren(groupParentId);
+
groupResizeDataRef.current = [];
reloadGrid();
} catch (error) {
@@ -841,6 +853,8 @@ export default function Grid({ gridWidth, currentLayout }) {
useStore.getState().setDraggingComponentId(null);
isDraggingRef.current = false;
}
+
+ const oldParentId = boxList.find((b) => b.id === e.target.id)?.parent ?? 'canvas';
prevDragParentId.current = null;
newDragParentId.current = null;
setDragParentId(null);
@@ -872,7 +886,6 @@ export default function Grid({ gridWidth, currentLayout }) {
left = dragged.left * sourcegridWidth;
top = dragged.top;
-
!isModalToCanvas ??
toast.error(`${dragged.widgetType} is not compatible as a child component of ${target.widgetType}`);
}
@@ -880,6 +893,12 @@ export default function Grid({ gridWidth, currentLayout }) {
// Apply transform for smooth transition
e.target.style.transform = `translate(${left}px, ${top}px)`;
+ // Force reordering of conatiner if the parent has not changed
+ const newParentId = target.slotId === 'real-canvas' ? 'canvas' : target.slotId;
+ if (oldParentId === newParentId) {
+ setReorderContainerChildren(newParentId);
+ }
+
// Select the dragged component after drop
setTimeout(() => setSelectedComponents([dragged.id]));
} catch (error) {
diff --git a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
index b26586dc08..7862db5676 100644
--- a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
@@ -7,10 +7,15 @@ import { renderTooltip } from '@/_helpers/appUtils';
import { useTranslation } from 'react-i18next';
import ErrorBoundary from '@/_ui/ErrorBoundary';
import { BOX_PADDING } from './appCanvasConstants';
+
const shouldAddBoxShadowAndVisibility = [
'Table',
'TextInput',
+ 'TextArea',
'PasswordInput',
+ 'EmailInput',
+ 'PhoneInput',
+ 'CurrencyInput',
'NumberInput',
'Text',
'Checkbox',
@@ -25,6 +30,7 @@ const shouldAddBoxShadowAndVisibility = [
'DaterangePicker',
'DatePickerV2',
'TimePicker',
+ 'Link',
];
const RenderWidget = ({
@@ -86,6 +92,7 @@ const RenderWidget = ({
...{ widgetValue: value },
...{ validationObject: unResolvedValidation },
customResolveObjects: customResolvables,
+ componentType,
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
[validateWidget, customResolvables, unResolvedValidation, resolvedValidation]
diff --git a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
index 0f1cb3359f..df78a8afa4 100644
--- a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
@@ -37,6 +37,8 @@ const WidgetWrapper = memo(
});
const visibility = useStore((state) => {
const component = state.getResolvedComponent(id, subContainerIndex);
+ const componentExposedVisibility = state.getExposedValueOfComponent(id)?.isVisible;
+ if (componentExposedVisibility === false) return false;
if (component?.properties?.visibility === false || component?.styles?.visibility === false) return false;
return true;
});
@@ -52,7 +54,7 @@ const WidgetWrapper = memo(
height: visibility === false ? '10px' : `${height}px`,
transform: `translate(${layoutData.left * gridWidth}px, ${layoutData.top}px)`,
WebkitFontSmoothing: 'antialiased',
- border: visibility === false ? `1px solid var(--border-default)` : 'none',
+ border: visibility === false && mode === 'edit' ? `1px solid var(--border-default)` : 'none',
};
if (!componentType) return null;
@@ -91,6 +93,7 @@ const WidgetWrapper = memo(
showHandle={isWidgetActive}
componentType={componentType}
visibility={visibility}
+ subContainerIndex={subContainerIndex}
/>
)}
NO_OF_GRIDS) {
+ left = Math.max(0, NO_OF_GRIDS - width);
+ width = Math.min(width, NO_OF_GRIDS);
+ }
if (currentLayout === 'mobile') {
componentData.definition.others.showOnDesktop.value = `{{false}}`;
componentData.definition.others.showOnMobile.value = `{{true}}`;
@@ -248,6 +265,12 @@ const getSelectedText = () => {
// TODO: Move this function to componentSlice
export const copyComponents = ({ isCut = false, isCloning = false }) => {
+ const selectedText = window.getSelection()?.toString().trim();
+ if (selectedText) {
+ navigator.clipboard.writeText(selectedText);
+ return;
+ }
+
const selectedComponents = useStore.getState().getSelectedComponentsDefinition();
if (selectedComponents.length < 1) return getSelectedText();
const allComponents = useStore.getState().getCurrentPageComponents();
@@ -498,7 +521,7 @@ export function pasteComponents(targetParentId, copiedComponentObj) {
targetParentId === key ||
(components?.[key]?.component.component === 'Tabs' &&
targetParentId?.split('-')?.slice(0, -1)?.join('-') === key) ||
- (['Container', 'Form', 'Modal'].includes(components?.[key]?.component.component) &&
+ (['Container', 'Form', 'ModalV2'].includes(components?.[key]?.component.component) &&
['header', 'footer'].some((section) => targetParentId.includes(section)))
)
) {
@@ -510,6 +533,7 @@ export function pasteComponents(targetParentId, copiedComponentObj) {
}
pastedComponents.forEach((component) => {
+ component = deepClone(component);
const newComponentId = isCut ? component.id : uuidv4();
const componentName = computeComponentName(component.component.component, {
...components,
@@ -550,15 +574,28 @@ export function pasteComponents(targetParentId, copiedComponentObj) {
componentData.definition.others.showOnMobile.value = currentLayout === 'mobile' ? `{{true}}` : `{{false}}`;
// Adjust width if parent changed
- let width = component.layouts.desktop.width;
+ let width = component.layouts[currentLayout].width;
if (targetParentId !== component.component?.parent) {
const containerWidth = useGridStore.getState().subContainerWidths[targetParentId || 'canvas'];
const oldContainerWidth = useGridStore.getState().subContainerWidths[component?.component?.parent || 'canvas'];
width = Math.round((width * oldContainerWidth) / containerWidth);
+
+ // Ensure minimum width
+ width = Math.max(width, 1);
+
+ // Adjust position and width if exceeding grid bounds
+ if (width + component.layouts[currentLayout].left > NO_OF_GRIDS) {
+ component.layouts[currentLayout].left = Math.max(0, NO_OF_GRIDS - width);
+ width = Math.min(width, NO_OF_GRIDS);
+ }
}
- component.layouts[currentLayout].width = width;
+ component.layouts[currentLayout] = {
+ ...component.layouts[currentLayout],
+ width,
+ };
+
const newComponent = {
component: {
...componentData,
@@ -706,3 +743,25 @@ export const getSubContainerIdWithSlots = (parentId) => {
}
return cleanParentId;
};
+
+export const getSubContainerWidthAfterPadding = (canvasWidth, componentType, componentId) => {
+ let padding = 2; //Need to update this 2 to correct value for other subcontainers
+ if (componentType === 'Container' || componentType === 'Form') {
+ padding = 2 * CONTAINER_FORM_CANVAS_PADDING + 2 * SUBCONTAINER_CANVAS_BORDER_WIDTH + 2 * BOX_PADDING;
+ }
+ if (componentType === 'Tabs') {
+ padding = 2 * TAB_CANVAS_PADDING + 2 * SUBCONTAINER_CANVAS_BORDER_WIDTH + 2 * BOX_PADDING;
+ }
+ if (componentType === 'ModalV2') {
+ const isModalHeader = componentId?.includes('header');
+ if (isModalHeader) {
+ const isModalHeaderCloseBtnEnabled = !useStore.getState().getResolvedComponent(componentId)?.properties
+ ?.hideCloseButton;
+ console.log('isModalHeaderCloseBtnEnabled', isModalHeaderCloseBtnEnabled);
+ padding = 2 * (MODAL_CANVAS_PADDING + (isModalHeaderCloseBtnEnabled ? 56 : 0));
+ } else {
+ padding = 2 * MODAL_CANVAS_PADDING;
+ }
+ }
+ return canvasWidth - padding;
+};
diff --git a/frontend/src/AppBuilder/AppCanvas/selecto.scss b/frontend/src/AppBuilder/AppCanvas/selecto.scss
index 5602b35d5a..7366e2fd06 100644
--- a/frontend/src/AppBuilder/AppCanvas/selecto.scss
+++ b/frontend/src/AppBuilder/AppCanvas/selecto.scss
@@ -1,5 +1,5 @@
.active-target {
- outline: 1px solid #4af;
+ outline: 1px solid #4af !important;
}
.main-editor-canvas .widget-target:not(:has(.widget-target:hover)):hover {
diff --git a/frontend/src/AppBuilder/CodeBuilder/Elements/Color.jsx b/frontend/src/AppBuilder/CodeBuilder/Elements/Color.jsx
index e37b545ef2..50325de224 100644
--- a/frontend/src/AppBuilder/CodeBuilder/Elements/Color.jsx
+++ b/frontend/src/AppBuilder/CodeBuilder/Elements/Color.jsx
@@ -9,12 +9,16 @@ export const Color = ({
value,
onChange,
pickerStyle = {},
+ colorMap = {},
cyLabel,
asBoxShadowPopover = true,
meta,
outerWidth = '142px',
component,
styleDefinition,
+ componentType = 'color',
+ CustomOptionList = () => {},
+ SwatchesToggle = () => {},
}) => {
value = component == 'Button' ? computeColor(styleDefinition, value, meta) : value;
const [showPicker, setShowPicker] = useState(false);
@@ -68,9 +72,11 @@ export const Color = ({
const ColorPicker = () => {
return (
<>
- {showPicker && (
+ {SwatchesToggle()}
+ {showPicker && componentType === 'swatches' && CustomOptionList()}
+ {showPicker && componentType === 'color' && (
diff --git a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/index.jsx b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/index.jsx
index 869677928c..d85917c797 100644
--- a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/index.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/index.jsx
@@ -7,6 +7,9 @@ import AppExport from './AppExport';
import useStore from '@/AppBuilder/_stores/store';
import { shallow } from 'zustand/shallow';
import AppModeToggle from './AppModeToggle';
+import { ThemeSelect } from '@/modules/Appbuilder/components';
+import MaintenanceMode from './MaintenanceMode';
+import HideHeaderToggle from './HideHeaderToggle';
const GlobalSettings = ({ darkMode }) => {
const shouldFreeze = useStore((state) => state.getShouldFreeze());
@@ -16,16 +19,27 @@ const GlobalSettings = ({ darkMode }) => {
-
- {
- setFirstTimeFocus(false);
- handleOnChange(val);
- onInputChange && onInputChange(val);
+
diff --git a/frontend/src/AppBuilder/CodeEditor/styles.scss b/frontend/src/AppBuilder/CodeEditor/styles.scss
index 5c66bc37ee..d7f715fb3b 100644
--- a/frontend/src/AppBuilder/CodeEditor/styles.scss
+++ b/frontend/src/AppBuilder/CodeEditor/styles.scss
@@ -655,6 +655,11 @@
background-color: #F28F2D !important;
}
+
+.cm-custom-singleline-completion-info {
+ display: none;
+}
+
.tjdb-hinter-portal{
.cm-theme{
height: 100% ;
diff --git a/frontend/src/AppBuilder/CodeEditor/utils.js b/frontend/src/AppBuilder/CodeEditor/utils.js
index 03473a629f..73d11e6f62 100644
--- a/frontend/src/AppBuilder/CodeEditor/utils.js
+++ b/frontend/src/AppBuilder/CodeEditor/utils.js
@@ -337,6 +337,7 @@ export const FxParamTypeMapping = Object.freeze({
color: 'Color',
json: 'Json',
code: 'Code',
+ colorSwatches: 'ColorSwatches',
toggle: 'Toggle',
select: 'Select',
alignButtons: 'AlignButtons',
diff --git a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppExport.jsx b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppExport.jsx
index 4ffa20d26d..a70799ea54 100644
--- a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppExport.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppExport.jsx
@@ -3,6 +3,7 @@ import { Button } from '@/components/ui/Button/Button';
import ExportAppModal from '@/HomePage/ExportAppModal';
import useStore from '@/AppBuilder/_stores/store';
import { shallow } from 'zustand/shallow';
+import cx from 'classnames';
const AppExport = ({ darkMode }) => {
const { app } = useStore(
@@ -28,22 +29,20 @@ const AppExport = ({ darkMode }) => {
darkMode={darkMode}
/>
)}
- setShowPicker(false)} />
+ {/*
{!isPortalOpen && (
{
+ // Force position update on first render
+ // This is done to avoid scroll issue
+ if (state.elements.popper) {
+ state.elements.popper.style.position = 'fixed';
+ }
+ },
}}
>
{(props) => React.cloneElement(popover, props)}
diff --git a/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx b/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx
index 5506a94fed..7f8765e287 100644
--- a/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx
@@ -1,5 +1,5 @@
/* eslint-disable import/no-unresolved */
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
import { PreviewBox } from './PreviewBox';
import { ToolTip } from '@/Editor/Inspector/Elements/Components/ToolTip';
import { useTranslation } from 'react-i18next';
@@ -31,6 +31,7 @@ const SingleLineCodeEditor = ({ componentName, fieldMeta = {}, componentId, ...r
const [currentValue, setCurrentValue] = useState('');
const [errorStateActive, setErrorStateActive] = useState(false);
const [cursorInsidePreview, setCursorInsidePreview] = useState(false);
+ const [showSuggestions, setShowSuggestions] = useState(true);
const validationFn = restProps?.validationFn;
const componentDefinition = useStore((state) => state.getComponentDefinition(componentId), shallow);
const parentId = componentDefinition?.component?.parent;
@@ -38,6 +39,30 @@ const SingleLineCodeEditor = ({ componentName, fieldMeta = {}, componentId, ...r
const customVariables = customResolvables?.[parentId]?.[0] || {};
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.intersectionRatio < 1) {
+ setShowPreview(false);
+ setShowSuggestions(false);
+ } else {
+ setShowSuggestions(true);
+ }
+ },
+ { root: null, threshold: [1] } // Fires when any part of the element is out of view
+ );
+
+ if (wrapperRef.current) {
+ observer.observe(wrapperRef.current);
+ }
+
+ return () => {
+ if (wrapperRef.current) {
+ observer.unobserve(wrapperRef.current);
+ }
+ };
+ }, []);
+
const isPreviewFocused = useRef(false);
const wrapperRef = useRef(null);
@@ -136,6 +161,7 @@ const SingleLineCodeEditor = ({ componentName, fieldMeta = {}, componentId, ...r
componentName={componentName}
setShowPreview={setShowPreview}
showPreview={showPreview}
+ showSuggestions={showSuggestions}
{...restProps}
/>
@@ -168,6 +194,7 @@ const EditorInput = ({
previewRef,
setShowPreview,
onInputChange,
+ showSuggestions,
}) => {
const getSuggestions = useStore((state) => state.getSuggestions, shallow);
function autoCompleteExtensionConfig(context) {
@@ -223,7 +250,7 @@ const EditorInput = ({
defaultKeymap: true,
positionInfo: () => {
return {
- class: 'cm-completionInfo-top cm-custom-completion-info',
+ class: 'cm-completionInfo-top cm-custom-completion-info cm-custom-singleline-completion-info',
};
},
maxRenderedOptions: 10,
@@ -286,7 +313,7 @@ const EditorInput = ({
const isInsideQueryPane = !!currentEditorHeightRef?.current?.closest('.query-details');
const showLineNumbers = lang == 'jsx' || type === 'extendedSingleLine' || false;
- const customClassNames = cx('codehinter-input', {
+ const customClassNames = cx('codehinter-input single-line-codehinter-input', {
'border-danger': error,
focused: isFocused,
'focus-box-shadow-active': firstTimeFocus,
@@ -339,15 +366,6 @@ const EditorInput = ({
data-cy={`${cyLabel.replace(/_/g, '-')}-input-field`}
>
{/* sticky element to position the preview box correctly on top without flowing out of container */}
-
{usePortalEditor && (
setShowPicker(false)} /> */}
setShowPicker(true)}
@@ -107,7 +113,9 @@ export const Color = ({
>
);
diff --git a/frontend/src/AppBuilder/CodeBuilder/utils.js b/frontend/src/AppBuilder/CodeBuilder/utils.js
index 7a75bdb3b8..be3674aa1f 100644
--- a/frontend/src/AppBuilder/CodeBuilder/utils.js
+++ b/frontend/src/AppBuilder/CodeBuilder/utils.js
@@ -74,6 +74,7 @@ export function getSuggestionKeys(refState) {
'setVariable',
'getVariable',
'unSetVariable',
+ 'unsetAllVariables',
'showAlert',
'logout',
'showModal',
@@ -85,6 +86,7 @@ export function getSuggestionKeys(refState) {
'setPageVariable',
'getPageVariable',
'unsetPageVariable',
+ 'unsetAllPageVariables',
'switchPage',
];
diff --git a/frontend/src/AppBuilder/CodeEditor/DynamicFxTypeRenderer.jsx b/frontend/src/AppBuilder/CodeEditor/DynamicFxTypeRenderer.jsx
index 20b196476d..9a204b9cf2 100644
--- a/frontend/src/AppBuilder/CodeEditor/DynamicFxTypeRenderer.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/DynamicFxTypeRenderer.jsx
@@ -18,9 +18,11 @@ import { NumberInput } from '../CodeBuilder/Elements/NumberInput';
import { Datepicker } from '../CodeBuilder/Elements/Datepicker';
import TableRowHeightInput from '../CodeBuilder/Elements/TableRowHeightInput';
import { TimePicker } from '../CodeBuilder/Elements/TimePicker';
+import { ColorSwatches } from '@/modules/Appbuilder/components';
const AllElements = {
Color,
+ ColorSwatches,
Json,
Toggle,
Select,
diff --git a/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx b/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx
index 2429973c25..6c28bdbb21 100644
--- a/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx
@@ -294,13 +294,9 @@ const PreviewContainer = ({
...restProps
}) => {
const { validationSchema, isWorkspaceVariable, errorStateActive, previewPlacement, validationFn } = restProps;
-
const [errorMessage, setErrorMessage] = useState('');
-
const typeofError = getCurrentNodeType(errorMessage);
-
const errorMsg = typeofError === 'Array' ? errorMessage[0] : errorMessage;
-
const darkMode = localStorage.getItem('darkMode') === 'true';
const popover = (
- {value}
+ {colorMap?.[value]
+ ? 'Brand/' + colorMap?.[value]?.charAt(0).toUpperCase() + colorMap?.[value]?.slice(1)
+ : value}
handleFocus()}
- onBlur={() => handleOnBlur()}
- className={customClassNames}
- theme={theme}
- indentWithTab={false}
- readOnly={disabled}
- />
+ className="check-here"
+ ref={previewRef}
+ >
+ {
+ setFirstTimeFocus(false);
+ handleOnChange(val);
+ onInputChange && onInputChange(val);
+ }}
+ basicSetup={{
+ lineNumbers: showLineNumbers,
+ syntaxHighlighting: true,
+ bracketMatching: true,
+ foldGutter: false,
+ highlightActiveLine: false,
+ autocompletion: showSuggestions,
+ completionKeymap: true,
+ searchKeymap: false,
+ }}
+ onMouseDown={() => handleFocus()}
+ onBlur={() => handleOnBlur()}
+ className={customClassNames}
+ theme={theme}
+ indentWithTab={false}
+ readOnly={disabled}
+ />
+
- toggleAppMaintenance()}
- onCancel={() => setConfirmationShow(false)}
- darkMode={darkMode}
- />
-
- Export app
-
-
-
+
+
{/* {isExportingApp &&
- globalSettingsChanged({ hideHeader: e })}
- data-cy={`toggle-hide-header-for-launched-apps`}
- className="tw-w-full"
- />
-
-
- setConfirmationShow(true)}
- data-cy={`toggle-maintenance-mode`}
- className="tw-w-full"
- />
-
{t('leftSidebar.Settings.maxWidthOfCanvas', 'Max width of canvas')}
diff --git a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/HideHeaderToggle.jsx b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/HideHeaderToggle.jsx
new file mode 100644
index 0000000000..e95b18128f
--- /dev/null
+++ b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/HideHeaderToggle.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import SwitchComponent from '@/components/ui/Switch/Index';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+const HideHeaderToggle = () => {
+ const { globalSettings, globalSettingsChanged } = useStore(
+ (state) => ({
+ globalSettings: state.globalSettings,
+ globalSettingsChanged: state.globalSettingsChanged,
+ }),
+ shallow
+ );
+
+ const { hideHeader } = globalSettings || {};
+
+ return (
+ toggleAppMaintenance()}
+ onCancel={() => setConfirmationShow(false)}
+ darkMode={darkMode}
+ />
+
)}
+ globalSettingsChanged({ hideHeader: e })}
+ data-cy={`toggle-hide-header-for-launched-apps`}
+ className="tw-w-full"
+ />
+
+ );
+};
+
+export default HideHeaderToggle;
diff --git a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/MaintenanceMode.jsx b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/MaintenanceMode.jsx
new file mode 100644
index 0000000000..c2b969146f
--- /dev/null
+++ b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/MaintenanceMode.jsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import useStore from '@/AppBuilder/_stores/store';
+import SwitchComponent from '@/components/ui/Switch/Index';
+import { shallow } from 'zustand/shallow';
+import { Confirm } from '@/Editor/Viewer/Confirm';
+
+const MaintenanceMode = ({ darkMode }) => {
+ const [showConfirmation, setConfirmationShow] = useState(false);
+ const { isMaintenanceOn, toggleAppMaintenance } = useStore(
+ (state) => ({
+ isMaintenanceOn: state.app.isMaintenanceOn,
+ toggleAppMaintenance: state.toggleAppMaintenance,
+ }),
+ shallow
+ );
+
+ return (
+ <>
+
+ setConfirmationShow(true)}
+ data-cy={`toggle-maintenance-mode`}
+ className="tw-w-full"
+ />
+
+
+ );
+};
+
+export default MaintenanceMode;
diff --git a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/SlugInput.jsx b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/SlugInput.jsx
index ae69b4cbf6..c996b09005 100644
--- a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/SlugInput.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/SlugInput.jsx
@@ -132,7 +132,11 @@ const SlugInput = () => {
+
+
+
diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx
index 4146c4a28e..aaf12714b9 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx
@@ -34,6 +34,7 @@ export const BaseLeftSidebar = ({
resetUnreadErrorCount,
toggleLeftSidebar,
isSidebarOpen,
+ isDraggingQueryPane,
] = useStore(
(state) => [
state.isLeftSideBarPinned,
@@ -46,6 +47,7 @@ export const BaseLeftSidebar = ({
state.debugger.resetUnreadErrorCount,
state.toggleLeftSidebar,
state.isSidebarOpen,
+ state.queryPanel.isDraggingQueryPane,
],
shallow
);
@@ -68,11 +70,15 @@ export const BaseLeftSidebar = ({
};
useEffect(() => {
- setPopoverContentHeight(
- ((window.innerHeight - (queryPanelHeight == 0 ? 40 : queryPanelHeight) - 45) / window.innerHeight) * 100
- );
+ if (!isDraggingQueryPane) {
+ setPopoverContentHeight(
+ ((window.innerHeight - (queryPanelHeight == 0 ? 40 : queryPanelHeight) - 45) / window.innerHeight) * 100
+ );
+ } else {
+ setPopoverContentHeight(100);
+ }
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [queryPanelHeight]);
+ }, [queryPanelHeight, isDraggingQueryPane]);
const renderPopoverContent = () => {
if (selectedSidebarItem === null || !isSidebarOpen) return null;
diff --git a/frontend/src/AppBuilder/QueryManager/Components/ParameterDetails.jsx b/frontend/src/AppBuilder/QueryManager/Components/ParameterDetails.jsx
index 6ff93ee9b6..2b9d03dc28 100644
--- a/frontend/src/AppBuilder/QueryManager/Components/ParameterDetails.jsx
+++ b/frontend/src/AppBuilder/QueryManager/Components/ParameterDetails.jsx
@@ -4,6 +4,7 @@ import cx from 'classnames';
import PlusRectangle from '@/_ui/Icon/solidIcons/PlusRectangle';
import Remove from '@/_ui/Icon/bulkIcons/Remove';
import ParameterForm from './ParameterForm';
+import usePopoverObserver from '@/AppBuilder/_hooks/usePopoverObserver';
const ParameterDetails = ({ darkMode, onSubmit, isEdit, name, defaultValue, onRemove, otherParams }) => {
const [showModal, setShowModal] = useState(false);
@@ -47,6 +48,17 @@ const ParameterDetails = ({ darkMode, onSubmit, isEdit, name, defaultValue, onRe
}
};
+ usePopoverObserver(
+ document.getElementsByClassName('query-details')[0],
+ isEdit
+ ? document.getElementById(`query-param-${String(name).toLowerCase()}`)
+ : document.getElementById('runjs-param-add-btn'),
+ document.getElementById('parameter-form-popover'),
+ showModal,
+ () => setShowModal(true),
+ closeMenu
+ );
+
return (
+
+
+ Canvas Styles
+
-
+
+
{index > 0 && (
handleRemove(colDetails.id, colDetails.name, colDetails.table)}
>
setJoinOrderByOptions(joinOrderByOptions.filter((opt, idx) => idx !== i))}
>
removeFilterConditionEntry(index)}
>
removeColumnOptionsPair(id)}
>
removeFilterConditionPair(id)}
>
removeSortConditionPair(id)}
>
{options?.map((item, index) => {
return (
-
+
{(provided, snapshot) => (
{
+ const {
+ layoutPropertyChanged,
+ component,
+ paramUpdated,
+ dataQueries,
+ currentState,
+ eventsChanged,
+ apps,
+ allComponents,
+ } = restProps;
+
+ const properties = Object.keys(componentMeta.properties);
+ const events = Object.keys(componentMeta.events);
+ const validations = Object.keys(componentMeta.validation || {});
+ const resolvedProperties = useStore((state) => state.getResolvedComponent(component.id)?.properties);
+ const defaultCountry = resolvedProperties?.defaultCountry || 'US';
+ const isDefaultCountryFxOn = componentMeta?.definition?.properties?.dateFormat?.fxActive || false;
+
+ const options = useMemo(() => {
+ return Object.keys(CurrencyMap).map((country) => ({
+ label: `${CurrencyMap[country].prefix} (${CurrencyMap[country].currency})`,
+ value: country,
+ }));
+ }, []);
+
+ const renderCustomOption = ({ label, value: optionValue }) => {
+ const optionStyle = {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'start',
+ height: '18px',
+ gap: '6px',
+ cursor: 'pointer',
+ fontFamily: 'IBM Plex Sans',
+ fontSize: '12px',
+ lineHeight: '18px',
+ fontWeight: '400',
+ color: darkMode ? '#fff' : '#1B1F24',
+ };
+ const FlagIcon = flags[optionValue];
+
+ return (
+
+
+ );
+ };
+
+ const getCountryDropdown = () => {
+ return (
+ {FlagIcon ?
+ {label}
+
+ paramUpdated({ name: 'defaultCountry' }, 'value', value, 'properties')}
+ />
+ ) : (
+
+ );
+ };
+
+ const filteredProperties = properties.filter(
+ (property) => componentMeta.properties[property].section !== 'additionalActions'
+ );
+
+ const additionalActions = properties.filter(
+ (property) => componentMeta.properties[property].section === 'additionalActions'
+ );
+
+ const accordionItems = baseComponentProperties(
+ filteredProperties,
+ events,
+ component,
+ componentMeta,
+ layoutPropertyChanged,
+ paramUpdated,
+ dataQueries,
+ currentState,
+ eventsChanged,
+ apps,
+ allComponents,
+ validations,
+ darkMode,
+ null,
+ additionalActions
+ );
+
+ accordionItems[0].children.splice(4, 0, getCountryDropdown());
+
+ return
+
+
+ {isDefaultCountryFxOn ? (
+
+ {
+ paramUpdated({ name: 'dateFormat' }, 'fxActive', !isDefaultCountryFxOn, 'properties');
+ }}
+ />
+
+
+
+ );
+ };
+
+ const getCountryDropdown = () => {
+ return (
+ {FlagIcon ?
+ {label}
+
+ paramUpdated({ name: 'defaultCountry' }, 'value', value, 'properties')}
+ />
+ ) : (
+
+ );
+ };
+
+ const filteredProperties = properties.filter(
+ (property) => componentMeta.properties[property].section !== 'additionalActions'
+ );
+
+ const additionalActions = properties.filter(
+ (property) => componentMeta.properties[property].section === 'additionalActions'
+ );
+
+ const accordionItems = baseComponentProperties(
+ filteredProperties,
+ events,
+ component,
+ componentMeta,
+ layoutPropertyChanged,
+ paramUpdated,
+ dataQueries,
+ currentState,
+ eventsChanged,
+ apps,
+ allComponents,
+ validations,
+ darkMode,
+ null,
+ additionalActions
+ );
+
+ accordionItems[0].children.splice(3, 0, getCountryDropdown());
+
+ return
+
+
+ {isDefaultCountryFxOn ? (
+
+ {
+ paramUpdated({ name: 'dateFormat' }, 'fxActive', !isDefaultCountryFxOn, 'properties');
+ }}
+ />
+
+ {
+ if (!isOpen) {
+ document.activeElement?.blur(); // Manually trigger blur when popover closes
+ }
+ }}
>
-
+
setHoveredOptionIndex(index)}
@@ -399,7 +404,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
{
+ onEvent('onBulkUpdate', tableComponentEvents).then(() => {
+ handleChangesSaved();
+ });
+ }}
+ data-cy={`table-button-save-changes`}
+ size="md"
+ // isLoading={tableDetails.isSavingChanges ? true : false}
+ customStyles={{ minWidth: '32px', padding: width > 650 ? '6px 16px' : 0 }}
+ leftIcon={width > 650 ? '' : 'save'}
+ fill="#FDFDFE"
+ iconWidth="16"
+ >
+ {width > 650 ? Save changes : ''}
+
+ 650 ? '6px 16px' : 0 }}
+ leftIcon={width > 650 ? '' : 'cross'}
+ fill={'var(--slate11)'}
+ iconWidth="16"
+ >
+ {width > 650 ? Discard : ''}
+
+
+ );
+});
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/ControlButtons.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/ControlButtons.jsx
new file mode 100644
index 0000000000..d91b84da40
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/ControlButtons.jsx
@@ -0,0 +1,184 @@
+import React, { memo } from 'react';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+import { Tooltip } from 'react-tooltip';
+import { OverlayTriggerComponent } from './OverlayTriggerComponent';
+import useTableStore from '../../../_stores/tableStore';
+import { shallow } from 'zustand/shallow';
+import IndeterminateCheckbox from '../../IndeterminateCheckbox';
+import Popover from 'react-bootstrap/Popover';
+import { exportToCSV, exportToExcel, exportToPDF } from '@/AppBuilder/Widgets/NewTable/_utils/exportData';
+
+export const ControlButtons = memo(
+ ({ id, table, darkMode, height, componentName, setShowAddNewRowPopup, fireEvent }) => {
+ const showAddNewRowButton = useTableStore((state) => state.getTableProperties(id)?.showAddNewRowButton, shallow);
+ const showDownloadButton = useTableStore((state) => state.getTableProperties(id)?.showDownloadButton, shallow);
+ const hideColumnSelectorButton = useTableStore(
+ (state) => state.getTableProperties(id)?.hideColumnSelectorButton,
+ shallow
+ );
+ const clientSidePagination = useTableStore((state) => state.getTableProperties(id)?.clientSidePagination, shallow);
+ const hasDownloadEvent = useTableStore((state) => state.getHasDownloadEvent(id), shallow);
+
+ const renderButton = (icon, onClick, tooltipId, tooltipContent) => {
+ return (
+ <>
+
+ {renderButton(icon, onClick, tooltipId, tooltipContent)}
+
+
+ );
+ };
+
+ // Haven't seperated this into a separate component because of UI issues
+ const hideColumnsPopover = () => (
+
+
+ );
+
+ // Haven't seperated this into a separate component because of UI issues
+ const downlaodPopover = () => (
+
+
+
+
+ );
+
+ const renderDownloadButton = () => {
+ // if server side pagination is enabled and download event is associated with the table, then directly fire download event without displaying popover
+ if (hasDownloadEvent && !clientSidePagination) {
+ const onClick = () => {
+ fireEvent('onTableDataDownload');
+ };
+ return renderButton('filedownload', onClick, 'tooltip-for-download-serverside-pagingation', 'Download');
+ }
+
+ return renderOverlay(id, 'filedownload', downlaodPopover, 'tooltip-for-download', 'Download');
+ };
+
+ return (
+ {
+ setOpen(show);
+ }}
+ >
+ {modifiedChild}
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/Pagination.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/Pagination.jsx
new file mode 100644
index 0000000000..a16b00a242
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/Pagination.jsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { PaginationButton } from './PaginationButton';
+import { PaginationInput } from './PaginationInput';
+import useTableStore from '../../../../_stores/tableStore';
+import { shallow } from 'zustand/shallow';
+
+// TODO: Need to replace all the default data
+
+export const Pagination = function Pagination({ id, pageIndex = 1, tableWidth, table, pageCount }) {
+ const serverSidePagination = useTableStore((state) => state.getTableProperties(id)?.serverSidePagination, shallow);
+ const enablePrevButton = useTableStore((state) => state.getTableProperties(id)?.enablePrevButton, shallow);
+ const enableNextButton = useTableStore((state) => state.getTableProperties(id)?.enableNextButton, shallow);
+
+ const canGoToNextPage = serverSidePagination ? enableNextButton : table.getCanNextPage();
+ const canGoToPreviousPage = serverSidePagination ? enablePrevButton : table.getCanPreviousPage();
+
+ const showGoToFirstAndLast = !serverSidePagination && tableWidth > 460;
+
+ function goToNextPage() {
+ table.nextPage();
+ }
+
+ function goToPreviousPage() {
+ table.previousPage();
+ }
+
+ return (
+
+
+));
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Loader/index.js b/frontend/src/AppBuilder/Widgets/NewTable/_components/Loader/index.js
new file mode 100644
index 0000000000..771bddd231
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Loader/index.js
@@ -0,0 +1 @@
+export { Loader as default } from './Loader';
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableContainer/TableContainer.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableContainer/TableContainer.jsx
new file mode 100644
index 0000000000..11a3fbe18f
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableContainer/TableContainer.jsx
@@ -0,0 +1,193 @@
+import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react';
+import useTableStore from '../../_stores/tableStore';
+import TableExposedVariables from '../TableExposedVariables';
+import Header from '../Header';
+import Footer from '../Footer';
+import { buildTableColumn } from '../../_utils/buildTableColumn';
+import { useTable } from '../../_hooks/useTable';
+import { shallow } from 'zustand/shallow';
+import TableData from '../TableData';
+
+export const TableContainer = ({
+ id,
+ data,
+ width,
+ height,
+ darkMode,
+ componentName,
+ fireEvent,
+ setExposedVariables,
+}) => {
+ const { getColumnProperties, getEditedRowFromIndex, getEditedFieldsOnIndex, updateEditedRowsAndFields } =
+ useTableStore();
+
+ const columnProperties = getColumnProperties(id);
+ // Table properties
+ const showBulkSelector = useTableStore((state) => state.getTableProperties(id)?.showBulkSelector, shallow);
+ const enableSorting = useTableStore((state) => state.getTableProperties(id)?.enabledSort, shallow);
+ const columnSizes = useTableStore((state) => state.getTableProperties(id)?.columnSizes, shallow);
+
+ // Server side properties
+ const serverSidePagination = useTableStore((state) => state.getTableProperties(id)?.serverSidePagination, shallow);
+ const serverSideSort = useTableStore((state) => state.getTableProperties(id)?.serverSideSort, shallow);
+ const serverSideFilter = useTableStore((state) => state.getTableProperties(id)?.serverSideFilter, shallow);
+ const serverSideSearch = useTableStore((state) => state.getTableProperties(id)?.serverSideSearch, shallow);
+ const rowsPerPage = useTableStore((state) => state.getTableProperties(id)?.rowsPerPage, shallow);
+ const clearEditedRows = useTableStore((state) => state.clearEditedRows, shallow);
+
+ const actions = useTableStore((state) => state.getActions(id), shallow);
+
+ const [globalFilter, setGlobalFilter] = useState('');
+ const lastClickedRowRef = useRef([]);
+ const tableBodyRef = useRef(null);
+
+ const handleCellValueChange = useCallback(
+ (index, name, value, row) => {
+ const rowDetails = getEditedRowFromIndex(id, index) ?? row;
+ const editedFields = getEditedFieldsOnIndex(id, index) ?? {};
+ updateEditedRowsAndFields(id, index, { ...rowDetails, [name]: value }, { ...editedFields, [name]: value });
+ },
+ [getEditedRowFromIndex, id, getEditedFieldsOnIndex, updateEditedRowsAndFields]
+ );
+
+ const columns = useMemo(() => {
+ return buildTableColumn(
+ showBulkSelector,
+ actions,
+ fireEvent,
+ setExposedVariables,
+ id,
+ columnProperties,
+ columnSizes,
+ data,
+ darkMode,
+ handleCellValueChange,
+ globalFilter,
+ serverSideSearch,
+ tableBodyRef
+ );
+ }, [
+ actions,
+ fireEvent,
+ setExposedVariables,
+ id,
+ columnProperties,
+ columnSizes,
+ data,
+ darkMode,
+ handleCellValueChange,
+ globalFilter,
+ showBulkSelector,
+ serverSideSearch,
+ ]);
+
+ const { table, pagination, setPagination, columnVisibility, setColumnFilters, columnOrder, setColumnOrder } =
+ useTable({
+ data,
+ columns,
+ enableSorting,
+ showBulkSelector,
+ serverSidePagination,
+ serverSideSort,
+ serverSideFilter,
+ rowsPerPage,
+ globalFilter,
+ setGlobalFilter,
+ });
+
+ // Memoizing allColumns to avoid re-rendering on every render
+ // New reference for columnOrder is created on every render, so stringifying it
+ const allColumns = useMemo(() => {
+ return table.getAllLeafColumns();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [JSON.stringify(table.getState().columnOrder), table]);
+
+ useEffect(() => {
+ setPagination((prev) => ({
+ ...prev,
+ pageSize: rowsPerPage,
+ }));
+ }, [rowsPerPage, setPagination]);
+
+ useEffect(() => {
+ if (serverSideSearch && globalFilter?.trim() !== '') {
+ setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+ }
+ }, [globalFilter, serverSideSearch, setPagination]);
+
+ useEffect(() => {
+ setColumnOrder(columns.map((column) => column.id));
+ }, [columns, setColumnOrder]);
+
+ const handleFilterChange = useCallback(
+ (filters) => {
+ setColumnFilters(filters);
+ },
+ [setColumnFilters]
+ );
+
+ const clearChangeSet = useCallback(() => {
+ setExposedVariables({ dataUpdates: [], changeSet: {} });
+ clearEditedRows(id);
+ }, [setExposedVariables, clearEditedRows, id]);
+
+ const handleChangesDiscarded = useCallback(() => {
+ clearChangeSet();
+ fireEvent('onCancelChanges');
+ }, [clearChangeSet, fireEvent]);
+
+ return (
+ <>
+
+
+ );
+};
+
+export const TableHeader = ({ id, table, darkMode, columnOrder, setColumnOrder }) => {
+ const { getLoadingState } = useTableStore();
+ const loadingState = getLoadingState(id);
+
+ const sensors = useSensors(
+ useSensor(PointerSensor, {
+ activationConstraint: {
+ distance: 1,
+ delay: 250,
+ },
+ })
+ );
+
+ const onDragEnd = (event) => {
+ const { active, over } = event;
+ if (!over || active.id === over.id) return;
+
+ setColumnOrder((currentOrder) => {
+ const oldIndex = currentOrder.indexOf(active.id);
+ const newIndex = currentOrder.indexOf(over.id);
+ return arrayMove(columnOrder, oldIndex, newIndex);
+ });
+ };
+
+ if (loadingState) {
+ return (
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+
+ {headerGroup.headers.map((header) => (
+
+
+ ))}
+
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableRow.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableRow.jsx
new file mode 100644
index 0000000000..56009fd71b
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableRow.jsx
@@ -0,0 +1,129 @@
+import React from 'react';
+import cx from 'classnames';
+import { flexRender } from '@tanstack/react-table';
+import useTableStore from '../../../_stores/tableStore';
+import { shallow } from 'zustand/shallow';
+import { determineJustifyContentValue } from '@/_helpers/utils';
+
+export const TableRow = ({
+ id,
+ row,
+ virtualRow,
+ cellHeight,
+ getResolvedValue,
+ handleRowClick,
+ allowSelection,
+ contentWrap,
+ highlightSelectedRow,
+ setExposedVariables,
+ fireEvent,
+ rowStyles,
+ measureElement,
+}) => {
+ const selectRowOnCellEdit = useTableStore((state) => state.getTableProperties(id)?.selectRowOnCellEdit, shallow);
+ const hasHoveredEvent = useTableStore((state) => state.getHasHoveredEvent(id), shallow);
+
+ if (!row) return null;
+
+ return (
+ {
+ handleRowClick(row);
+ }}
+ onMouseEnter={() => {
+ if (hasHoveredEvent) {
+ const hoveredRowDetails = { hoveredRowId: row.id, hoveredRow: row.original };
+ setExposedVariables(hoveredRowDetails);
+ fireEvent('onRowHovered');
+ }
+ }}
+ >
+ {row.getVisibleCells().map((cell) => {
+ const cellStyles = {
+ width: cell.column.getSize(),
+ backgroundColor: getResolvedValue(cell.column.columnDef?.meta?.cellBackgroundColor ?? 'inherit', {
+ rowData: row.original,
+ cellValue: cell.getValue(),
+ }),
+ justifyContent: determineJustifyContentValue(cell.column.columnDef?.meta?.horizontalAlignment),
+ display: 'flex',
+ alignItems: 'center',
+ textAlign: cell.column.columnDef?.meta?.horizontalAlignment,
+ };
+
+ const isEditable = getResolvedValue(cell.column.columnDef?.meta?.isEditable ?? false, {
+ rowData: row.original,
+ cellValue: cell.getValue(),
+ });
+
+ return (
+ {
+ if (
+ (isEditable || ['rightActions', 'leftActions'].includes(cell.column.id)) &&
+ allowSelection &&
+ !selectRowOnCellEdit
+ ) {
+ // to avoid on click event getting propagating to row when td is editable or has action button and allowSelection is true and selectRowOnCellEdit is false
+ e.stopPropagation();
+ }
+ setExposedVariables({
+ selectedCell: {
+ columnName: cell.column.columnDef?.header,
+ columnKey: cell.column.columnDef?.accessorKey,
+ value: cell.getValue(),
+ },
+ });
+ }}
+ >
+
+ );
+ })}
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/index.js b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/index.js
new file mode 100644
index 0000000000..db7bd89d00
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/index.js
@@ -0,0 +1 @@
+export { TableData as default } from './TableData';
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx
new file mode 100644
index 0000000000..6ec4f66994
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx
@@ -0,0 +1,333 @@
+import { useEffect, useCallback, useRef } from 'react';
+import useTableStore from '../../_stores/tableStore';
+import { shallow } from 'zustand/shallow';
+import useStore from '@/AppBuilder/_stores/store';
+import { exportToCSV, exportToExcel, exportToPDF } from '@/AppBuilder/Widgets/NewTable/_utils/exportData';
+import { filterFunctions } from '../Header/_components/Filter/filterUtils';
+import { isArray, debounce } from 'lodash';
+import { useMounted } from '@/_hooks/use-mount';
+import { usePrevious } from '@dnd-kit/utilities';
+// Component to expose variables & fire events from the table
+// It might miss some variables which are tightly coupled with the component state
+export const TableExposedVariables = ({
+ id,
+ data,
+ setExposedVariables,
+ fireEvent,
+ table,
+ componentName,
+ pageIndex = 1,
+ lastClickedRow,
+}) => {
+ const editedRows = useTableStore((state) => state.getAllEditedRows(id), shallow);
+ const editedFields = useTableStore((state) => state.getAllEditedFields(id), shallow);
+ const addNewRowDetails = useTableStore((state) => state.getAllAddNewRowDetails(id), shallow);
+ const allowSelection = useTableStore((state) => state.getTableProperties(id)?.allowSelection, shallow);
+ const showBulkSelector = useTableStore((state) => state.getTableProperties(id)?.showBulkSelector, shallow);
+ const clientSidePagination = useTableStore((state) => state.getTableProperties(id)?.clientSidePagination, shallow);
+ const defaultSelectedRow = useTableStore((state) => state.getTableProperties(id)?.defaultSelectedRow, shallow);
+ const columnSizes = useTableStore((state) => state.getTableProperties(id)?.columnSizes, shallow);
+
+ const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
+
+ const mounted = useMounted();
+ const previousLastClickedRow = usePrevious(lastClickedRow);
+
+ const {
+ selectedRows,
+ sorting,
+ currentPageData,
+ filteredData,
+ searchText,
+ appliedFilters,
+ toggleAllRowsSelected,
+ setPageIndex,
+ setRowSelection,
+ setColumnFilters,
+ tableData,
+ columns,
+ columnSizing,
+ resetRowSelection,
+ } = {
+ selectedRows: table.getFilteredSelectedRowModel()?.rows,
+ sorting: table.getState()?.sorting,
+ currentPageData: table.getPaginationRowModel()?.rows,
+ filteredData: table.getFilteredRowModel()?.rows,
+ searchText: table.getState().globalFilter ?? '',
+ appliedFilters: table.getState().columnFilters,
+ toggleAllRowsSelected: table.toggleAllRowsSelected,
+ setPageIndex: table.setPageIndex,
+ setRowSelection: table.setRowSelection,
+ setColumnFilters: table.setColumnFilters,
+ tableData: table.getRowModel().rows,
+ columns: table.getAllColumns(),
+ columnSizing: table.getState().columnSizing,
+ resetRowSelection: table.resetRowSelection,
+ };
+
+ const prevSortingLength = useRef(null);
+
+ const getColumnName = useCallback(
+ (columnId) => {
+ const column = table.getColumn(columnId);
+ return column.columnDef.header;
+ },
+ [table]
+ );
+
+ useEffect(() => {
+ setExposedVariables({
+ currentData: data,
+ });
+ }, [data, setExposedVariables]);
+
+ useEffect(() => {
+ let updatedData = [...data];
+ editedRows.forEach((value, key) => {
+ updatedData[key] = value;
+ });
+
+ setExposedVariables({
+ changeSet: Object.fromEntries(editedFields),
+ dataUpdates: Object.fromEntries(editedRows),
+ updatedData: updatedData,
+ });
+ if (editedRows.size > 0) {
+ fireEvent('onCellValueChanged');
+ }
+ }, [editedRows, editedFields, data, setExposedVariables, fireEvent]);
+
+ useEffect(() => {
+ if (addNewRowDetails) {
+ setExposedVariables({
+ newRows: [...addNewRowDetails.values()],
+ });
+ }
+ }, [addNewRowDetails, setExposedVariables]);
+
+ useEffect(() => {
+ if (!allowSelection) {
+ return table.toggleAllRowsSelected(false);
+ }
+ if (allowSelection && !showBulkSelector) {
+ return table.toggleAllRowsSelected(false);
+ }
+ }, [allowSelection, showBulkSelector, table, setExposedVariables]);
+
+ // Expose selected rows
+ useEffect(() => {
+ if (allowSelection && showBulkSelector) {
+ setExposedVariables({
+ selectedRows: selectedRows.map((row) => row.original),
+ selectedRowsId: selectedRows.map((row) => row.id),
+ });
+ } else {
+ setExposedVariables({
+ selectedRows: [],
+ selectedRowsId: [],
+ });
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [selectedRows, allowSelection, setExposedVariables, fireEvent, lastClickedRow, showBulkSelector]); // Didn't add mounted as it's not a dependency
+
+ useEffect(() => {
+ if (allowSelection) {
+ if (previousLastClickedRow?.id !== lastClickedRow?.id) {
+ fireEvent('onRowClicked');
+ }
+ }
+ }, [previousLastClickedRow, lastClickedRow, fireEvent, allowSelection]);
+
+ // Expose page index
+ useEffect(() => {
+ setExposedVariables({ pageIndex });
+ mounted && fireEvent('onPageChanged');
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [pageIndex, setExposedVariables, fireEvent]); // Didn't add mounted as it's not a dependency
+
+ // Expose sort applied
+ useEffect(() => {
+ if (sorting.length > 0) {
+ const sortApplied = [{ column: getColumnName(sorting[0].id), direction: sorting[0].desc ? 'desc' : 'asc' }];
+ setExposedVariables({ sortApplied });
+ fireEvent('onSort');
+ prevSortingLength.current = sorting.length;
+ } else {
+ setExposedVariables({ sortApplied: undefined });
+ prevSortingLength.current && fireEvent('onSort');
+ prevSortingLength.current = null;
+ }
+ }, [sorting, getColumnName, setExposedVariables, fireEvent]);
+
+ // // Expose current page data
+ useEffect(() => {
+ setExposedVariables({ currentPageData: currentPageData.map((row) => row.original) });
+ }, [currentPageData, setExposedVariables]);
+
+ // Expose filtered data
+ useEffect(() => {
+ setExposedVariables({ filteredData: filteredData.map((row) => row.original) });
+ }, [filteredData, setExposedVariables, fireEvent]);
+
+ // Expose search text
+ useEffect(() => {
+ setExposedVariables({ searchText });
+ mounted && fireEvent('onSearch');
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [searchText, setExposedVariables, fireEvent]); // Didn't add mounted as it's not a dependency
+
+ // Expose applied filters
+ useEffect(() => {
+ setExposedVariables({ filters: appliedFilters.map((filter) => filter.value) });
+ mounted && fireEvent('onFilterChanged');
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [appliedFilters, setExposedVariables, fireEvent]); // Didn't add mounted as it's not a dependency
+
+ // CSA for select & deselect all rows in table
+ useEffect(() => {
+ function selectAllRows() {
+ if (showBulkSelector) {
+ toggleAllRowsSelected(true);
+ }
+ }
+ function deselectAllRows() {
+ if (showBulkSelector) {
+ toggleAllRowsSelected(false);
+ }
+ }
+ setExposedVariables({
+ selectAllRows,
+ deselectAllRows,
+ });
+ }, [setExposedVariables, showBulkSelector, toggleAllRowsSelected]);
+
+ // CSA to set page index
+ useEffect(() => {
+ function setPage(targetPageIndex) {
+ setExposedVariables({ pageIndex: targetPageIndex });
+ if (clientSidePagination) setPageIndex(targetPageIndex - 1);
+ }
+ setExposedVariables({ setPage });
+ }, [setPageIndex, setExposedVariables, clientSidePagination]);
+
+ useEffect(() => {
+ resetRowSelection();
+ function selectRow(key, value) {
+ const index = data.findIndex((item) => item[key] == value);
+ const item = index !== -1 ? data[index] : null;
+ if (item) {
+ setRowSelection({ [index]: true });
+ }
+ setExposedVariables({
+ selectedRow: item,
+ selectedRowId: isNaN(item?.id) ? String(item?.id) : item?.id,
+ });
+ }
+ if (defaultSelectedRow) {
+ const key = Object?.keys(defaultSelectedRow)[0] ?? '';
+ const value = defaultSelectedRow?.[key] ?? undefined;
+ if (key && value) {
+ selectRow(key, value);
+ }
+ } else {
+ setExposedVariables({
+ selectedRow: {},
+ selectedRowId: null,
+ });
+ }
+ }, [data, defaultSelectedRow, setExposedVariables, setRowSelection, resetRowSelection]);
+
+ useEffect(() => {
+ if (lastClickedRow) {
+ setExposedVariables({
+ selectedRow: lastClickedRow,
+ selectedRowId: isNaN(lastClickedRow?.id) ? String(lastClickedRow?.id) : lastClickedRow?.id,
+ });
+ }
+ }, [lastClickedRow, setExposedVariables]);
+
+ useEffect(() => {
+ function selectRow(key, value) {
+ const index = data.findIndex((item) => item[key] == value);
+ const item = index !== -1 ? data[index] : null;
+ if (item) {
+ setRowSelection({ [index]: true });
+ }
+ setExposedVariables({
+ selectedRow: item,
+ selectedRowId: isNaN(item?.id) ? String(item?.id) : item?.id,
+ });
+ }
+
+ function deselectRow(key, value) {
+ const index = data.findIndex((item) => item[key] == value);
+ const item = index !== -1 ? data[index] : null;
+ if (item) {
+ setRowSelection({ [index]: false });
+ }
+ setExposedVariables({
+ selectedRow: {},
+ selectedRowId: null,
+ });
+ }
+ setExposedVariables({ selectRow, deselectRow });
+ }, [data, setExposedVariables, setRowSelection]);
+
+ // CSA to set & clear filters
+ useEffect(() => {
+ function setFilters(_filters) {
+ if (!isArray(_filters)) return;
+ const filterArr = [];
+ _filters.forEach((_filter) => {
+ const { column = '', value = '', condition = '' } = _filter;
+ const columnId = columns.find((col) => col.columnDef?.header === column)?.id;
+ if (columnId && filterFunctions[condition]) {
+ filterArr.push({ id: columnId, value: { column, condition, value } });
+ }
+ });
+ setColumnFilters(filterArr);
+ }
+ function clearFilters() {
+ setColumnFilters([]);
+ }
+ setExposedVariables({ clearFilters, setFilters });
+ }, [setColumnFilters, setExposedVariables, columns]);
+
+ // CSA to download table data
+ useEffect(() => {
+ function downloadTableData(format) {
+ switch (format) {
+ case 'csv':
+ exportToCSV(table, componentName);
+ break;
+ case 'xlsx':
+ exportToExcel(table, componentName);
+ break;
+ case 'pdf':
+ exportToPDF(table, componentName);
+ break;
+ }
+ }
+ setExposedVariables({ downloadTableData });
+ }, [componentName, setExposedVariables, table]);
+
+ // Create debounced function using useRef to persist between renders
+ const debouncedSetProperty = useRef(
+ debounce((sizing) => {
+ setComponentProperty(id, 'columnSizes', sizing, 'properties');
+ }, 300)
+ ).current;
+
+ useEffect(() => {
+ if (Object.keys(columnSizing).length > 0) {
+ debouncedSetProperty({ ...columnSizes, ...columnSizing });
+ }
+
+ // Cleanup debounced function on unmount
+ return () => {
+ debouncedSetProperty.cancel();
+ };
+ }, [columnSizing, columnSizes, debouncedSetProperty, id]);
+
+ return null;
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/index.js b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/index.js
new file mode 100644
index 0000000000..c4f2a78571
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/index.js
@@ -0,0 +1 @@
+export { TableExposedVariables as default } from './TableExposedVariables';
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_hooks/useTable.js b/frontend/src/AppBuilder/Widgets/NewTable/_hooks/useTable.js
new file mode 100644
index 0000000000..45d2b4bd11
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_hooks/useTable.js
@@ -0,0 +1,90 @@
+import { useState, useMemo } from 'react';
+import {
+ getCoreRowModel,
+ useReactTable,
+ getSortedRowModel,
+ getPaginationRowModel,
+ getFilteredRowModel,
+} from '@tanstack/react-table';
+import { applyFilters } from '../_components/Header/_components/Filter/filterUtils';
+
+export function useTable({
+ data,
+ columns,
+ enableSorting,
+ showBulkSelector,
+ serverSidePagination,
+ serverSideSort,
+ serverSideFilter,
+ rowsPerPage,
+ globalFilter,
+ setGlobalFilter,
+}) {
+ // Pagination state
+ const [pagination, setPagination] = useState({
+ pageIndex: 0,
+ pageSize: rowsPerPage,
+ });
+
+ const [columnVisibility, setColumnVisibility] = useState({});
+ const [columnFilters, setColumnFilters] = useState([]);
+ const [columnOrder, setColumnOrder] = useState(columns.map((column) => column.id));
+
+ // When the columns change, the data is not getting re-rendered. So, we need to create a new data array
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ const newData = useMemo(() => [...data], [data, columns]);
+
+ const table = useReactTable({
+ data: newData,
+ columns,
+ enableSorting,
+ getCoreRowModel: getCoreRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ getFilteredRowModel: getFilteredRowModel(),
+ enableColumnResizing: true,
+ columnResizeMode: 'onChange',
+ enableRowSelection: true,
+ enableMultiRowSelection: showBulkSelector,
+ state: {
+ pagination,
+ columnVisibility,
+ columnOrder,
+ globalFilter,
+ columnFilters,
+ },
+ onPaginationChange: setPagination,
+ onColumnVisibilityChange: setColumnVisibility,
+ onColumnOrderChange: setColumnOrder,
+ onGlobalFilterChange: setGlobalFilter,
+ onColumnFiltersChange: setColumnFilters,
+ filterFns: {
+ applyFilters: (row, columnId) => {
+ const filters = columnFilters.filter((f) => f.id === columnId);
+ if (filters.length === 0) return true;
+ return applyFilters(row, columnId, filters);
+ },
+ },
+ globalFilterFn: (row, columnId, filterValue) => {
+ const value = String(row.getValue(columnId) || '').toLowerCase();
+ return value.includes(String(filterValue).toLowerCase());
+ },
+ manualPagination: serverSidePagination,
+ manualSorting: serverSideSort,
+ manualFiltering: serverSideFilter,
+ });
+
+ return {
+ table,
+ pagination,
+ setPagination,
+ columnVisibility,
+ setColumnVisibility,
+ globalFilter,
+ setGlobalFilter,
+ columnFilters,
+ setColumnFilters,
+ columnOrder,
+ setColumnOrder,
+ };
+}
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_hooks/useTableProperties.js b/frontend/src/AppBuilder/Widgets/NewTable/_hooks/useTableProperties.js
new file mode 100644
index 0000000000..493461ca99
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_hooks/useTableProperties.js
@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+
+export function useTableProperties(properties) {
+ return useMemo(() => {
+ let visibility = properties?.visibility ?? true;
+ visibility = visibility ? '' : 'none';
+ const disabledState = properties?.disabledState ?? false;
+ const displaySearchBox = properties?.displaySearchBox ?? true;
+ const showFilterButton = properties?.showFilterButton ?? true;
+
+ return {
+ visibility,
+ disabledState,
+ displaySearchBox,
+ showFilterButton,
+ };
+ }, [properties]);
+}
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_hooks/useTableStyles.js b/frontend/src/AppBuilder/Widgets/NewTable/_hooks/useTableStyles.js
new file mode 100644
index 0000000000..95eba338af
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_hooks/useTableStyles.js
@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+
+export function useTableStyles(styles) {
+ return useMemo(() => {
+ const { borderRadius = 0, boxShadow, borderColor } = styles;
+
+ return {
+ borderRadius: Number.parseFloat(borderRadius),
+ boxShadow,
+ borderColor,
+ };
+ }, [styles]);
+}
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_stores/helper.js b/frontend/src/AppBuilder/Widgets/NewTable/_stores/helper.js
new file mode 100644
index 0000000000..6252cab3be
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_stores/helper.js
@@ -0,0 +1,20 @@
+export const removeNullValues = (arr = []) => arr.filter((element) => element !== null);
+
+// utilityForNestedNewRow function is used to construct nested object while adding or updating new row when '.' is present in column key for adding new row
+export const utilityForNestedNewRow = (row) => {
+ let obj = {};
+
+ Object.keys(row).forEach((key) => {
+ let nestedKeys = key.split('.');
+ let tempObj = obj;
+
+ nestedKeys.forEach((nestedKey, i) => {
+ if (!tempObj[nestedKey]) {
+ tempObj[nestedKey] = i === nestedKeys.length - 1 ? row[key] : {};
+ }
+ tempObj = tempObj[nestedKey];
+ });
+ });
+
+ return obj;
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_stores/slices/columnSlice.js b/frontend/src/AppBuilder/Widgets/NewTable/_stores/slices/columnSlice.js
new file mode 100644
index 0000000000..6663f4f2f9
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_stores/slices/columnSlice.js
@@ -0,0 +1,104 @@
+import useStore from '@/AppBuilder/_stores/store';
+import autogenerateColumns from '../../_utils/autoGenerateColumns';
+import { removeNullValues } from '../helper';
+import { isEqual } from 'lodash';
+export const createColumnSlice = (set, get) => ({
+ getColumnProperties: (id) => {
+ return get().components[id]?.columnDetails?.columnProperties ?? [];
+ },
+ setColumnDetails: (
+ id,
+ columns,
+ useDynamicColumn,
+ columnData,
+ firstRowOfTable,
+ autogenerateColumnsFlag,
+ columnDeletionHistory,
+ shouldAutogenerateColumns
+ ) => {
+ set(
+ (state) => {
+ const isDynamicColumnSelected = useDynamicColumn ?? false;
+ if (isDynamicColumnSelected) {
+ state.components[id].columnDetails.useDynamicColumn = isDynamicColumnSelected;
+ state.components[id].columnDetails.columnData = columnData ?? [];
+ } else {
+ state.components[id].columnDetails.useDynamicColumn = false;
+ }
+ if (shouldAutogenerateColumns) {
+ const columnProperties = get().generateColumns(
+ id,
+ columns,
+ firstRowOfTable,
+ isDynamicColumnSelected,
+ autogenerateColumnsFlag,
+ columnDeletionHistory,
+ columnData
+ );
+ state.components[id].columnDetails.columnProperties = columnProperties;
+ state.components[id].columnDetails.transformations = get().generateColumnTransformations(
+ id,
+ columnProperties
+ );
+ } else {
+ const columnProperties = removeNullValues(columns);
+ state.components[id].columnDetails.columnProperties = columnProperties;
+ state.components[id].columnDetails.transformations = get().generateColumnTransformations(
+ id,
+ columnProperties
+ );
+ }
+ },
+ false,
+ { type: 'setColumnDetails', payload: { id, columns, useDynamicColumn, columnData } }
+ );
+ },
+ generateColumns: (
+ id,
+ columns,
+ firstRowOfTable,
+ isDynamicColumnSelected,
+ autogenerateColumnsFlag,
+ columnDeletionHistory,
+ columnData
+ ) => {
+ if (autogenerateColumnsFlag) {
+ const setComponentProperty = useStore.getState().setComponentProperty;
+ const existingGeneratedColumn = get().getColumnProperties(id);
+ const generatedColumns = autogenerateColumns(
+ firstRowOfTable,
+ columns,
+ columnDeletionHistory ?? [],
+ isDynamicColumnSelected,
+ columnData ?? [],
+ autogenerateColumns ?? false
+ );
+
+ if (!isDynamicColumnSelected && !isEqual(existingGeneratedColumn, generatedColumns)) {
+ setComponentProperty(id, 'columns', generatedColumns, 'properties', 'value', false, 'canvas', {
+ skipUndoRedo: true,
+ saveAfterAction: true,
+ });
+ }
+ return generatedColumns;
+ }
+ },
+ generateColumnTransformations: (id, columnProperties) => {
+ const transformations = columnProperties
+ .filter((column) => column.transformation && column.transformation != '{{cellValue}}')
+ .map((column) => {
+ return {
+ key: column.key ? column.key : column.name,
+ transformation: column.transformation,
+ };
+ });
+ const existingTransformations = get().getColumnTransformations(id);
+ if (!isEqual(existingTransformations, transformations)) {
+ return transformations;
+ }
+ return existingTransformations;
+ },
+ getColumnTransformations: (id) => {
+ return get().components[id]?.columnDetails?.transformations ?? [];
+ },
+});
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_stores/slices/initSlice.js b/frontend/src/AppBuilder/Widgets/NewTable/_stores/slices/initSlice.js
new file mode 100644
index 0000000000..f6b8b8cb09
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_stores/slices/initSlice.js
@@ -0,0 +1,282 @@
+import { has } from 'lodash';
+import { utilityForNestedNewRow } from '../helper';
+import { deepClone } from '@/_helpers/utilities/utils.helpers';
+
+export const createInitSlice = (set, get) => ({
+ initializeComponent: (id) => {
+ set(
+ (state) => {
+ if (!state.components[id]) {
+ state.components[id] = {
+ properties: {},
+ styles: {},
+ filters: {},
+ addNewRow: new Map(),
+ shouldPersistAddNewRow: false,
+ editedRowDetails: {
+ editedRows: new Map(),
+ editedFields: new Map(),
+ },
+ events: {
+ hasHoveredEvent: false,
+ hasDownloadEvent: false,
+ tableComponentEvents: [],
+ tableColumnEvents: [],
+ tableActionEvents: [],
+ },
+ columnDetails: {
+ columnProperties: [],
+ transformations: [],
+ },
+ };
+ }
+ },
+ false,
+ { type: 'initializeComponent', payload: { id } }
+ );
+ },
+
+ setTableProperties: (id, properties) =>
+ set(
+ (state) => {
+ const visibility = properties?.visibility ?? true;
+ state.components[id].properties.visibility = visibility ? '' : 'none';
+ state.components[id].properties.disabledState = properties?.disabledState ?? false;
+ state.components[id].loadingState = properties?.loadingState ?? false;
+ state.components[id].properties.displaySearchBox = properties?.displaySearchBox ?? true;
+ state.components[id].properties.showFilterButton = properties?.showFilterButton ?? true;
+ state.components[id].properties.showAddNewRowButton = properties?.showAddNewRowButton ?? true;
+ state.components[id].properties.showDownloadButton = properties?.showDownloadButton ?? true;
+ state.components[id].properties.showBulkUpdateActions = properties?.showBulkUpdateActions ?? true;
+ state.components[id].properties.totalRecords = properties?.totalRecords ?? 10;
+ state.components[id].properties.enablePrevButton = properties?.enablePrevButton ?? true;
+ state.components[id].properties.enableNextButton = properties?.enableNextButton ?? true;
+ state.components[id].properties.hideColumnSelectorButton = properties?.hideColumnSelectorButton ?? false;
+ state.components[id].properties.serverSideSearch = properties?.serverSideSearch ?? false;
+ state.components[id].properties.serverSideSort = properties?.serverSideSort ?? false;
+ state.components[id].properties.serverSideFilter = properties?.serverSideFilter ?? false;
+ state.components[id].properties.showBulkSelector = properties?.showBulkSelector ?? false;
+ state.components[id].properties.highlightSelectedRow = properties?.highlightSelectedRow ?? false;
+ state.components[id].properties.rowsPerPage = properties?.rowsPerPage ?? 10;
+ state.components[id].properties.enabledSort = properties?.enabledSort ?? true;
+ state.components[id].properties.columnSizes = properties?.columnSizes ?? {};
+ state.components[id].properties.allowSelection =
+ properties?.allowSelection ?? (properties?.showBulkSelector || properties?.highlightSelectedRow)
+ ? true
+ : false;
+ state.components[id].properties.defaultSelectedRow = properties?.defaultSelectedRow ?? { id: 1 };
+ state.components[id].properties.selectRowOnCellEdit = properties?.selectRowOnCellEdit ?? true;
+
+ let serverSidePagination = properties.serverSidePagination ?? false;
+ if (typeof serverSidePagination !== 'boolean') state.components[id].properties.serverSidePagination = false;
+ else state.components[id].properties.serverSidePagination = serverSidePagination;
+
+ let clientSidePagination = false;
+ if (
+ properties.clientSidePagination ||
+ typeof clientSidePagination !== 'boolean' ||
+ (properties.enablePagination && !serverSidePagination)
+ ) {
+ clientSidePagination = true;
+ }
+ state.components[id].properties.clientSidePagination = clientSidePagination;
+ if (
+ !has(properties, 'enablePagination') &&
+ (properties.clientSidePagination || properties.serverSidePagination)
+ ) {
+ state.components[id].properties.enablePagination = true;
+ } else {
+ state.components[id].properties.enablePagination = properties.enablePagination;
+ }
+ },
+ false,
+ { type: 'setProperties', payload: { id, properties } }
+ ),
+
+ setTableStyles: (id, styles, darkMode) =>
+ set(
+ (state) => {
+ const {
+ borderRadius = 0,
+ boxShadow,
+ borderColor = 'var(--borders-weak-disabled)',
+ contentWrap = true,
+ textColor,
+ tableType = 'table-bordered',
+ cellSize,
+ actionButtonRadius = 0,
+ maxRowHeight = 'auto',
+ maxRowHeightValue = 80,
+ columnHeaderWrap = 'fixed',
+ headerCasing = 'uppercase',
+ } = styles;
+
+ state.components[id].styles.borderRadius = Number.parseFloat(borderRadius);
+ state.components[id].styles.boxShadow = boxShadow;
+ state.components[id].styles.borderColor = borderColor;
+ state.components[id].styles.contentWrap = contentWrap;
+ state.components[id].styles.textColor = textColor !== '#000' ? textColor : darkMode && '#fff';
+ state.components[id].styles.rowStyle = tableType;
+ state.components[id].styles.cellHeight = cellSize;
+ state.components[id].styles.actionButtonRadius = parseFloat(actionButtonRadius);
+ state.components[id].styles.isMaxRowHeightAuto = maxRowHeight === 'auto';
+ state.components[id].styles.maxRowHeightValue = maxRowHeightValue;
+ state.components[id].styles.columnHeaderWrap = columnHeaderWrap;
+ state.components[id].styles.headerCasing = headerCasing;
+ },
+ false,
+ { type: 'setStyles', payload: { id, styles } }
+ ),
+
+ setTableActions: (id, actions = []) =>
+ set(
+ (state) => {
+ state.components[id].properties.actions = actions.map((action) => {
+ return {
+ ...action,
+ position: action?.position ?? 'right',
+ actionButtonRadius: 0,
+ };
+ });
+ },
+ false,
+ { type: 'setTableActions', payload: { id, actions } }
+ ),
+
+ setTableEvents: (id, events = []) =>
+ set(
+ (state) => {
+ const tableEvents = events.filter((event) => event.sourceId === id);
+ const tableComponentEvents = tableEvents.filter((event) => event.target === 'component');
+ state.components[id].events.tableComponentEvents = tableComponentEvents;
+ state.components[id].events.hasHoveredEvent = tableComponentEvents.some(
+ (event) => event.event.eventId === 'onRowHovered'
+ );
+ state.components[id].events.hasDownloadEvent = tableComponentEvents.some(
+ (event) => event.event.eventId === 'onTableDataDownload'
+ );
+ state.components[id].events.tableColumnEvents = tableEvents.filter((event) => event.target === 'table_column');
+ state.components[id].events.tableActionEvents = tableEvents.filter((event) => event.target === 'table_action');
+ },
+ false,
+ { type: 'setTableEvents', payload: { id, events } }
+ ),
+
+ updateEditedRowsAndFields: (id, index, rowDetail, editedFields) =>
+ set(
+ (state) => {
+ state.components[id].editedRowDetails.editedRows.set(index, rowDetail);
+ state.components[id].editedRowDetails.editedFields.set(index, editedFields);
+ },
+ false,
+ { type: 'updateEditedRowsAndFields', payload: { id, index, rowDetail, editedFields } }
+ ),
+
+ removeComponent: (id) =>
+ set(
+ (state) => {
+ // if the component is not present in the DOM, then remove it - this is to handle the case where the component is removed from the DOM and then added back
+ // Like when the component is moved from one container to another
+ if (state.components[id] && !document.querySelector(`[id="${id}"]`)) {
+ delete state.components[id];
+ }
+ },
+ false,
+ { type: 'removeComponent', payload: { id } }
+ ),
+
+ getTableStyles: (id) => {
+ return get().components[id] ? get().components[id].styles : {};
+ },
+ getTableProperties: (id) => {
+ return get().components[id] ? get().components[id].properties : {};
+ },
+ getLoadingState: (id) => {
+ return get().components[id] ? get().components[id].loadingState : false;
+ },
+ getHeaderVisibility: (id) => {
+ return get().components[id]
+ ? get().components[id].properties.showFilterButton || get().components[id].properties.displaySearchBox
+ : false;
+ },
+ getFooterVisibility: (id) => {
+ return get().components[id]
+ ? get().components[id].properties.enablePagination ||
+ get().components[id].properties.showAddNewRowButton ||
+ get().components[id].properties.showDownloadButton
+ : false;
+ },
+ getMaxRowHeightValue: (id) => {
+ return get().components[id] ? get().components[id].styles.maxRowHeightValue : 80;
+ },
+ getSelectRowOnCellEdit: (id) => {
+ return get().components[id] ? get().components[id].properties.selectRowOnCellEdit : false;
+ },
+ getActions: (id) => {
+ return get().components[id] ? get().components[id].properties.actions : [];
+ },
+ getEnablePagination: (id) => get().components[id]?.properties.enablePagination ?? true,
+ getRowsPerPage: (id) => get().components[id]?.properties.rowsPerPage ?? 10,
+ getAllEditedRows: (id) => get().components[id]?.editedRowDetails.editedRows ?? new Map(),
+ getAllEditedFields: (id) => get().components[id]?.editedRowDetails.editedFields ?? new Map(),
+ getEditedRowFromIndex: (id, index) => get().components[id]?.editedRowDetails.editedRows.get(index),
+ getEditedFieldsOnIndex: (id, index) => get().components[id]?.editedRowDetails.editedFields.get(index),
+ clearEditedRows: (id) =>
+ set(
+ (state) => {
+ state.components[id].editedRowDetails.editedRows.clear();
+ state.components[id].editedRowDetails.editedFields.clear();
+ },
+ false,
+ { type: 'clearEditedRows', payload: { id } }
+ ),
+ getAllAddNewRowDetails: (id) => get().components[id]?.addNewRow,
+ getAddNewRowDetailFromIndex: (id, index) => get().components[id]?.addNewRow.get(index),
+ updateAddNewRowDetails: (id, index, newRow) =>
+ set(
+ (state) => {
+ let transformedNewRow = deepClone(newRow);
+ if (Object.keys(newRow).find((key) => key.includes('.'))) {
+ transformedNewRow = utilityForNestedNewRow(transformedNewRow);
+ }
+ state.components[id].addNewRow.set(index, transformedNewRow);
+ },
+ false,
+ { type: 'updateAddNewRowDetails', payload: { id, index, newRow } }
+ ),
+ clearAddNewRowDetails: (id) =>
+ set(
+ (state) => {
+ if (!state.components[id].shouldPersistAddNewRow) {
+ state.components[id].addNewRow.clear();
+ }
+ },
+ false,
+ { type: 'clearNewRow', payload: { id } }
+ ),
+ updateShouldPersistAddNewRow: (id, value) =>
+ set(
+ (state) => {
+ state.components[id].shouldPersistAddNewRow = value;
+ },
+ false,
+ { type: 'updateShouldPersistAddNewRow', payload: { id, value } }
+ ),
+ getTableComponentEvents: (id) => {
+ return get().components[id]?.events?.tableComponentEvents || [];
+ },
+ getTableActionEvents: (id) => {
+ return get().components[id]?.events?.tableActionEvents || [];
+ },
+ // Remove this when the toggle column is removed as it is used only for the toggle column
+ // TODO: Remove the above comment if this function is added for other columns
+ getTableColumnEvents: (id) => {
+ return get().components[id]?.events?.tableColumnEvents || [];
+ },
+ getHasHoveredEvent: (id) => {
+ return get().components[id]?.events?.hasHoveredEvent || false;
+ },
+ getHasDownloadEvent: (id) => {
+ return get().components[id]?.events?.hasDownloadEvent || false;
+ },
+});
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_stores/tableStore.js b/frontend/src/AppBuilder/Widgets/NewTable/_stores/tableStore.js
new file mode 100644
index 0000000000..93929a14d8
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_stores/tableStore.js
@@ -0,0 +1,113 @@
+import { create, zustandDevTools } from '@/_stores/utils';
+import { immer } from 'zustand/middleware/immer';
+// eslint-disable-next-line import/no-unresolved
+import { enableMapSet } from 'immer';
+
+import { createInitSlice } from './slices/initSlice';
+import { createColumnSlice } from './slices/columnSlice';
+const initialState = {
+ components: {},
+};
+
+enableMapSet();
+const useTableStore = create(
+ zustandDevTools(
+ immer((set, get) => ({
+ ...initialState,
+ ...createInitSlice(set, get),
+ ...createColumnSlice(set, get),
+ })),
+ { name: 'Table Store' }
+ )
+);
+
+export default useTableStore;
+
+// // filterSlice.js
+// export const createFilterSlice = (set) => ({
+// components: {},
+// setFilter: (id, key, value) =>
+// set((state) => {
+// state.components[id] = state.components[id] || { filters: {} };
+// state.components[id].filters[key] = value;
+// }, false, 'filters/setFilter'),
+
+// clearFilters: (id) =>
+// set((state) => {
+// state.components[id] = state.components[id] || { filters: {} };
+// state.components[id].filters = {};
+// }, false, 'filters/clearFilters'),
+// });
+
+// // addRowSlice.js
+// export const createAddRowSlice = (set) => ({
+// components: {},
+// addNewRow: (id, key, value) =>
+// set((state) => {
+// state.components[id] = state.components[id] || { addRow: {} };
+// state.components[id].addRow[key] = value;
+// }, false, 'addRow/addNewRow'),
+
+// removeRow: (id, key) =>
+// set((state) => {
+// if (state.components[id]?.addRow) {
+// delete state.components[id].addRow[key];
+// }
+// }, false, 'addRow/removeRow'),
+// });
+
+// // store.js
+// import { create } from 'zustand';
+// import { devtools } from 'zustand/middleware';
+// import { immer } from 'zustand/middleware/immer';
+// import { createCommonSlice } from './commonSlice';
+// import { createFilterSlice } from './filterSlice';
+// import { createAddRowSlice } from './addRowSlice';
+
+// export const useStore = create(
+// devtools(
+// immer((set) => ({
+// ...createCommonSlice(set),
+// ...createFilterSlice(set),
+// ...createAddRowSlice(set),
+
+// initializeComponent: (id) =>
+// set((state) => {
+// state.components[id] = {
+// filters: {},
+// addRow: {},
+// };
+// }, false, 'components/initialize'),
+
+// removeComponent: (id) =>
+// set((state) => {
+// delete state.components[id];
+// }, false, 'components/remove'),
+// }))
+// )
+// );
+
+// // Selectors
+// export const useCommon = () => useStore((state) => ({
+// darkMode: state.darkMode,
+// toggleDarkMode: state.toggleDarkMode,
+// }));
+
+// export const useFilters = (id) => useStore((state) => ({
+// filters: state.components[id]?.filters || {},
+// setFilter: state.setFilter.bind(null, id),
+// clearFilters: state.clearFilters.bind(null, id),
+// }));
+
+// export const useAddRow = (id) => useStore((state) => ({
+// addRow: state.components[id]?.addRow || {},
+// addNewRow: state.addNewRow.bind(null, id),
+// removeRow: state.removeRow.bind(null, id),
+// }));
+
+// export const useInitializeComponent = () => useStore((state) => ({
+// initializeComponent: state.initializeComponent,
+// removeComponent: state.removeComponent,
+// }));
+
+// export default useStore;
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_utils/autoGenerateColumns.js b/frontend/src/AppBuilder/Widgets/NewTable/_utils/autoGenerateColumns.js
new file mode 100644
index 0000000000..b48f055344
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_utils/autoGenerateColumns.js
@@ -0,0 +1,118 @@
+import _ from 'lodash';
+import { v4 as uuidv4 } from 'uuid';
+
+export default function autogenerateColumns(
+ firstRow = {},
+ existingColumns = [],
+ columnDeletionHistory,
+ useDynamicColumn,
+ dynamicColumn = [],
+ generateNestedColumns
+) {
+ if (useDynamicColumn) {
+ if (dynamicColumn.length > 0 && dynamicColumn[0].name) {
+ const generatedColumns = dynamicColumn.map((item) => {
+ return {
+ id: uuidv4(),
+ ...item,
+ name: item?.name,
+ key: item?.key || item?.name,
+ autogenerated: true,
+ };
+ });
+ return generatedColumns;
+ }
+ return [];
+ }
+
+ const isValueIsPremitiveOrArray = (value) => {
+ if (typeof value !== 'object' || Array.isArray(value)) return true;
+ };
+
+ const isValueIsPlainObject = (value) => {
+ if (typeof value === 'object' && !Array.isArray(value) && value !== null) return true;
+ };
+
+ const limitToOneLevelNestingHelperFunc = (data, presentKey) => {
+ return Object.entries(data).reduce((accumulator, [key, value]) => {
+ if (isValueIsPremitiveOrArray(value)) {
+ accumulator.push(`${presentKey}.${key}`);
+ }
+ return accumulator;
+ }, []);
+ };
+ const generateNestedColumnsHelperFunc = (data, parentKey = '') => {
+ return Object.entries(data).reduce((accumulator, [key, value]) => {
+ const currentKey = parentKey ? `${parentKey}.${key}` : key;
+ if (isValueIsPlainObject(value)) {
+ // if value is object particularly, then we only want nested keys till one level of nesting
+ accumulator.push(...limitToOneLevelNestingHelperFunc(value, currentKey));
+ } else if (isValueIsPremitiveOrArray(value)) {
+ // check if value is premitive or array then simply push current key in the accumulator.
+ accumulator.push(currentKey);
+ }
+ return accumulator;
+ }, []);
+ };
+
+ const generateColumnKeys = (firstRow, generateNestedColumns) => {
+ if (generateNestedColumns) {
+ // This block is responsible to get all the keys, nested keys till one level of nesting from the firstRow
+ return generateNestedColumnsHelperFunc(firstRow);
+ } else {
+ /*
+ return keys whose value is premitive data type to support backward compatibility for older app,
+ where we do not auto-generate column for nested data
+ */
+ return Object.entries(firstRow).reduce((accumulator, [key, value]) => {
+ if (typeof value !== 'object') accumulator.push(key);
+ return accumulator;
+ }, []);
+ }
+ };
+
+ // mapping the keys of first row with one level of nested elements.
+ const keysOfTableData = generateColumnKeys(firstRow, generateNestedColumns);
+
+ const keysOfExistingColumns = existingColumns.map((column) => column?.key || column?.name);
+
+ const keysFromWhichNewColumnsShouldBeGenerated = _.difference(keysOfTableData, [
+ ...keysOfExistingColumns,
+ ...columnDeletionHistory,
+ ]);
+
+ const keysAndDataTypesToGenerateNewColumns = keysFromWhichNewColumnsShouldBeGenerated?.map((key) => [
+ key,
+ typeof firstRow[key],
+ ]);
+
+ const keysOfExistingColumnsThatNeedToPersist = existingColumns
+ .filter((column) => !column?.autogenerated || keysOfTableData.includes(column.key || column.name))
+ .map((column) => column?.key || column?.name);
+
+ const generatedColumns = keysAndDataTypesToGenerateNewColumns.map(([key, dataType]) => ({
+ id: uuidv4(),
+ name: key,
+ key: key,
+ columnType: convertDataTypeToColumnType(dataType),
+ autogenerated: true,
+ }));
+
+ const finalKeys = [...keysFromWhichNewColumnsShouldBeGenerated, ...keysOfExistingColumnsThatNeedToPersist];
+ const finalColumns = [...existingColumns, ...generatedColumns].filter((column) =>
+ finalKeys.includes(column?.key || column?.name)
+ );
+
+ return finalColumns;
+}
+
+const dataTypeToColumnTypeMapping = {
+ string: 'string',
+ number: 'number',
+ boolean: 'boolean',
+};
+
+const convertDataTypeToColumnType = (dataType) => {
+ if (Object.keys(dataTypeToColumnTypeMapping).includes(dataType)) return dataTypeToColumnTypeMapping[dataType];
+ else return 'string';
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_utils/buildTableColumn.js b/frontend/src/AppBuilder/Widgets/NewTable/_utils/buildTableColumn.js
new file mode 100644
index 0000000000..c46dac58bf
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_utils/buildTableColumn.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { generateActionColumns } from './generateActionColumns';
+import generateColumnsData from './generateColumnsData';
+import IndeterminateCheckbox from '../_components/IndeterminateCheckbox';
+
+export const buildTableColumn = (
+ showBulkSelector,
+ actions,
+ fireEvent,
+ setExposedVariables,
+ id,
+ columnProperties,
+ columnSizes,
+ data,
+ darkMode,
+ handleCellValueChange,
+ globalFilter,
+ serverSideSearch,
+ tableBodyRef
+) => {
+ return [
+ {
+ id: 'selection',
+ accessorKey: 'selection',
+ enableSorting: false,
+ enableResizing: false,
+ meta: { columnType: 'selector', skipExport: true, skipFilter: true, skipAddNewRow: true },
+ size: 40,
+ header: ({ table }) =>
+ showBulkSelector ? (
+
+ handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original)
+ }
+ toggleOnBg={column?.toggleOnBg}
+ toggleOffBg={column?.toggleOffBg}
+ />
+ );
+
+ case 'tags':
+ return handleCellValueChange(row.index, column.key || column.name, value, row.original)}
+ readOnly={!isEditable}
+ darkMode={darkMode}
+ containerWidth={columnSize}
+ isEditable={isEditable}
+ multiple={columnType === 'multiselect'}
+ />
+ );
+
+ case 'select':
+ case 'newMultiSelect':
+ return (
+ handleCellValueChange(row.index, column.key || column.name, value, row.original)}
+ disabled={!isEditable}
+ darkMode={darkMode}
+ containerWidth={columnSize}
+ defaultOptionsList={column?.defaultOptionsList || []}
+ optionsLoadingState={
+ getResolvedValue(column?.useDynamicOptions) && getResolvedValue(column?.optionsLoadingState)
+ ? true
+ : false
+ }
+ isEditable={isEditable}
+ isMulti={columnType === 'newMultiSelect'}
+ className="select-search table-select-search"
+ column={column}
+ isNewRow={columnForAddNewRow}
+ horizontalAlignment={column?.horizontalAlignment}
+ textColor={getResolvedValue(column.textColor, { cellValue, rowData })}
+ id={id}
+ />
+ );
+
+ case 'badge':
+ case 'badges':
+ return (
+ handleCellValueChange(row.index, column.key || column.name, value, row.original)}
+ readOnly={!isEditable}
+ darkMode={darkMode}
+ multiple={columnType === 'badges'}
+ width={columnSize}
+ isEditable={isEditable}
+ />
+ );
+
+ case 'radio':
+ return (
+ handleCellValueChange(row.index, column.key || column.name, value, row.original)}
+ containerWidth={columnSize}
+ />
+ );
+
+ case 'toggle':
+ return (
+ {
+ handleCellValueChange(row.index, column.key || column.name, value, row.original);
+ fireEvent('OnTableToggleCellChanged', {
+ column: column,
+ tableColumnEvents,
+ });
+ }}
+ />
+ );
+
+ case 'datepicker':
+ return (
+ handleCellValueChange(row.index, column.key || column.name, value, row.original)}
+ tableRef={tableRef}
+ isDateSelectionEnabled={
+ getResolvedValue(column?.isDateSelectionEnabled, { cellValue, rowData }) ?? true
+ }
+ isTwentyFourHrFormatEnabled={
+ getResolvedValue(column?.isTwentyFourHrFormatEnabled, { cellValue, rowData }) ?? false
+ }
+ darkMode={darkMode}
+ textColor={getResolvedValue(column.textColor, { cellValue, rowData })}
+ id={id}
+ />
+ );
+
+ case 'link':
+ return (
+
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomValueContainer.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomValueContainer.jsx
new file mode 100644
index 0000000000..6cea56d47c
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomValueContainer.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { components } from 'react-select';
+// eslint-disable-next-line import/no-unresolved
+import flags from 'react-phone-number-input/flags';
+import Planet from '@/_ui/Icon/bulkIcons/Planet';
+import { getCountryCallingCodeSafe } from './utils';
+import { CurrencyMap } from './constants';
+
+export const CustomValueContainer = ({ getValue, ...props }) => {
+ const selectedValue = getValue()[0];
+ const country = selectedValue?.value;
+ const { isCurrencyInput, isCountryChangeEnabled } = props?.selectProps || {};
+ const FlagIcon = selectedValue ? flags[selectedValue.value] : null;
+ const countryCode = getCountryCallingCodeSafe(selectedValue.value);
+
+ return (
+
+ {FlagIcon ? (
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/PhoneInput.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/PhoneInput.jsx
new file mode 100644
index 0000000000..70fd463f94
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/PhoneInput.jsx
@@ -0,0 +1,254 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+// eslint-disable-next-line import/no-unresolved
+import Input, { getCountries, getCountryCallingCode } from 'react-phone-number-input/input';
+import { getCountryCallingCodeSafe } from './utils';
+// eslint-disable-next-line import/no-unresolved
+import en from 'react-phone-number-input/locale/en';
+import 'react-phone-number-input/style.css';
+import { useInput } from '../BaseComponents/hooks/useInput';
+import Loader from '@/ToolJetUI/Loader/Loader';
+import Label from '@/_ui/Label';
+import { CountrySelect } from './CountrySelect';
+
+const tinycolor = require('tinycolor2');
+
+export const PhoneInput = (props) => {
+ const { properties, styles, componentName, darkMode, setExposedVariables, fireEvent } = props;
+ const transformedProps = {
+ ...props,
+ inputType: 'phone',
+ };
+ const inputLogic = useInput(transformedProps);
+ const {
+ inputRef,
+ labelRef,
+ visibility,
+ loading,
+ disable,
+ showValidationError,
+ isFocused,
+ labelWidth,
+ isValid,
+ validationError,
+ isMandatory,
+ handleBlur,
+ handleFocus,
+ value,
+ handlePhoneCurrencyInputChange,
+ country,
+ setCountry,
+ } = inputLogic;
+ const { label, placeholder, isCountryChangeEnabled, defaultCountry = 'US' } = properties;
+
+ const {
+ textColor,
+ backgroundColor,
+ alignment,
+ width,
+ direction,
+ auto,
+ color,
+ borderColor,
+ accentColor,
+ errTextColor,
+ boxShadow,
+ borderRadius,
+ } = styles;
+ const _width = (width / 100) * 70;
+ const defaultAlignment = alignment === 'side' || alignment === 'top' ? alignment : 'side';
+ const isInitialRender = useRef(true);
+
+ const options = useMemo(
+ () =>
+ getCountries()
+ .map((country) => ({
+ label: `${en[country]} +${getCountryCallingCodeSafe(country)}`,
+ value: country,
+ }))
+ .sort((a, b) => a.label.localeCompare(b.label)),
+ []
+ );
+
+ const onInputValueChange = (value) => {
+ setExposedVariables({
+ country: country,
+ countryCode: `+${getCountryCallingCodeSafe(country)}`,
+ formattedValue: `+${getCountryCallingCodeSafe(country)} ${inputRef.current?.value}`,
+ });
+ handlePhoneCurrencyInputChange(value);
+ };
+
+ const handleKeyUp = (e) => {
+ if (e.key === 'Enter') {
+ fireEvent('onEnterPressed');
+ }
+ };
+
+ useEffect(() => {
+ if (isInitialRender.current) {
+ setExposedVariables({
+ country: country,
+ countryCode: `+${getCountryCallingCodeSafe(country)}`,
+ formattedValue: `+${getCountryCallingCodeSafe(country)} ${inputRef.current?.value}`,
+ value: value,
+ setCountryCode: (code) => {
+ let value = getCountryCallingCodeSafe(code);
+ if (value) {
+ setCountry(code);
+ } else {
+ value = getCountries().find((country) => `+${getCountryCallingCode(country)}` === code);
+ setCountry(value ? value : '');
+ }
+ },
+ });
+ isInitialRender.current = false;
+ }
+ }, []);
+
+ useEffect(() => {
+ if (!isInitialRender.current) {
+ setCountry(defaultCountry);
+ }
+ }, [defaultCountry]);
+
+ const disabledState = disable || loading;
+
+ const loaderStyle = {
+ right:
+ direction === 'right' &&
+ defaultAlignment === 'side' &&
+ ((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0))
+ ? `${labelWidth + 11}px`
+ : '11px',
+ top:
+ defaultAlignment === 'top'
+ ? ((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0)) &&
+ 'calc(50% + 10px)'
+ : '',
+ transform:
+ defaultAlignment === 'top' &&
+ ((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0)) &&
+ ' translateY(-50%)',
+ zIndex: 3,
+ };
+
+ const computedStyles = {
+ height: '100%',
+ borderRadius: `${borderRadius}px`,
+ color: !['#1B1F24', '#000', '#000000ff'].includes(textColor)
+ ? textColor
+ : disabledState
+ ? 'var(--text-disabled)'
+ : 'var(--text-primary)',
+ borderColor: isFocused
+ ? accentColor != '4368E3'
+ ? accentColor
+ : 'var(--primary-accent-strong)'
+ : borderColor != '#CCD1D5'
+ ? borderColor
+ : disabledState
+ ? '1px solid var(--borders-disabled-on-white)'
+ : 'var(--borders-default)',
+ '--tblr-input-border-color-darker': tinycolor(borderColor).darken(24).toString(),
+ backgroundColor:
+ backgroundColor != '#fff'
+ ? backgroundColor
+ : disabledState
+ ? darkMode
+ ? 'var(--surfaces-app-bg-default)'
+ : 'var(--surfaces-surface-03)'
+ : 'var(--surfaces-surface-01)',
+ padding: '8px 10px',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ borderBottomLeftRadius: '0px',
+ borderTopLeftRadius: '0px',
+ borderLeft: 'none',
+ };
+
+ return (
+ <>
+
- {getResolvedValue(item.label)}
+ {getResolvedValue(item?.label)}
{index === hoveredOptionIndex && (
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx
index 2e975109d2..0568b85ccd 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx
@@ -53,6 +53,7 @@ export const PropertiesTabElements = ({
{ label: 'Image', value: 'image' },
{ label: 'Link', value: 'link' },
{ label: 'JSON', value: 'json' },
+ { label: 'Markdown', value: 'markdown' },
// Following column types are deprecated
{ label: 'Default', value: 'default' },
{ label: 'Dropdown', value: 'dropdown' },
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/StylesTabElements.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/StylesTabElements.jsx
index 5091e56c6c..2b91a8dd15 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/StylesTabElements.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/StylesTabElements.jsx
@@ -128,6 +128,7 @@ export const StylesTabElements = ({
undefined,
'number',
'json',
+ 'markdown',
'boolean',
'select',
'text',
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx
index b11a675e80..bb6c1d94bb 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx
@@ -177,7 +177,7 @@ class TableComponent extends React.Component {
style={{
width: '280px',
maxHeight: resolveReferences(column.isEditable) ? '100vh' : 'inherit',
- overflowY: 'auto',
+ // overflowY: 'auto',
zIndex: '9999',
}}
>
@@ -327,7 +327,12 @@ class TableComponent extends React.Component {
placement="left"
rootClose={this.state.actionPopOverRootClose}
overlay={this.actionPopOver(action, index)}
- onToggle={(showing) => this.setState({ showPopOver: showing })}
+ onToggle={(showing) => {
+ if (!showing) {
+ document.activeElement?.blur(); // Manually trigger blur when popover closes
+ }
+ this.setState({ showPopOver: showing });
+ }}
>
}
+ trigger={_showOverlay && ['hover', 'focus']}
+ rootClose={true}
+ show={_showOverlay && hovered && !isEditing}
+ >
+ {!isEditable ? (
+
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Select.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Select.jsx
new file mode 100644
index 0000000000..44e6d3c54a
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Select.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { CustomSelect } from './CustomSelect';
+
+export const SelectColumn = ({
+ options,
+ value,
+ onChange,
+ isEditable,
+ darkMode,
+ defaultOptionsList,
+ textColor,
+ containerWidth,
+ optionsLoadingState,
+ horizontalAlignment,
+ isMaxRowHeightAuto,
+}) => {
+ return (
+ = 1 ? ['click'] : []}
+ rootClose={true}
+ show={isOverflowing() && value?.length >= 1 && showOverlay}
+ >
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Text.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Text.jsx
new file mode 100644
index 0000000000..48f37bd589
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Text.jsx
@@ -0,0 +1,188 @@
+import React, { useState, useRef, useCallback, useMemo } from 'react';
+import { determineJustifyContentValue } from '@/_helpers/utils';
+import DOMPurify from 'dompurify';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import HighLightSearch from '@/AppBuilder/Widgets/NewTable/_components/HighLightSearch';
+import useTableStore from '@/AppBuilder/Widgets/NewTable/_stores/tableStore';
+import { getMaxHeight } from '../../_utils/helper';
+import useTextColor from '../DataTypes/_hooks/useTextColor';
+
+export const TextColumn = ({
+ id,
+ isEditable,
+ darkMode,
+ handleCellValueChange,
+ textColor,
+ cellValue,
+ column,
+ containerWidth,
+ cell,
+ horizontalAlignment,
+ searchText,
+}) => {
+ const cellHeight = useTableStore((state) => state.getTableStyles(id)?.cellHeight, shallow);
+ const isMaxRowHeightAuto = useTableStore((state) => state.getTableStyles(id)?.isMaxRowHeightAuto, shallow);
+ const maxRowHeightValue = useTableStore((state) => state.getTableStyles(id)?.maxRowHeightValue, shallow);
+ const cellTextColor = useTextColor(id, textColor);
+
+ const [showOverlay, setShowOverlay] = useState(false);
+ const [isEditing, setIsEditing] = useState(false);
+ const containerRef = useRef(null);
+ const cellRef = useRef(null);
+
+ const validateWidget = useStore((state) => state.validateWidget, shallow);
+ const { isValid, validationError } = validateWidget({
+ validationObject: {
+ minLength: { value: column.minLength },
+ maxLength: { value: column.maxLength },
+ customRule: { value: column.customRule },
+ },
+ widgetValue: cellValue,
+ customResolveObjects: { cellValue },
+ });
+
+ const handleContentChange = useCallback(
+ (content) => {
+ handleCellValueChange(cell.row.index, column.key || column.name, content, cell.row.original);
+ },
+ [cell.row, column, handleCellValueChange]
+ );
+
+ const handleKeyDown = useCallback(
+ (e) => {
+ if (e.key === 'Enter' && !e.shiftKey && isEditable) {
+ e.preventDefault();
+ e.target.blur();
+ }
+ },
+ [isEditable]
+ );
+
+ const isOverflowing = useCallback(() => {
+ if (!containerRef.current || !cellRef.current) return false;
+ const { clientWidth, clientHeight, scrollWidth, scrollHeight } = cellRef.current;
+ return clientWidth < scrollWidth || clientHeight < scrollHeight;
+ }, []);
+
+ const cellStyle = useMemo(
+ () => ({
+ color: cellTextColor || 'inherit',
+ maxHeight: getMaxHeight(isMaxRowHeightAuto, maxRowHeightValue, cellHeight),
+ }),
+ [cellTextColor, isMaxRowHeightAuto, maxRowHeightValue, cellHeight]
+ );
+
+ const focusInput = () => {
+ if (cellRef.current) {
+ cellRef.current.focus();
+ }
+ };
+
+ const renderContent = useCallback(() => {
+ if (!isEditable) {
+ return (
+
+
+
+ ) : (
+
+ )
+ }
+ trigger={isOverflowing() && ['hover']}
+ rootClose={true}
+ show={isOverflowing() && showOverlay && !isEditing}
+ >
+ -
@@ -626,6 +631,8 @@ class TableComponent extends React.Component {
return 'Multiselect';
case 'json':
return 'JSON';
+ case 'markdown':
+ return 'Markdown';
default:
capitalize(text ?? '');
}
@@ -649,6 +656,7 @@ class TableComponent extends React.Component {
if (show) {
this.handleToggleColumnPopover(index);
} else {
+ document.activeElement?.blur(); // Manually trigger blur when popover closes
this.handleToggleColumnPopover(null);
}
}}
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx
index c3add3f1cc..6c8398724d 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx
@@ -30,6 +30,8 @@ import { appService } from '@/_services';
import { deepClone } from '@/_helpers/utilities/utils.helpers';
import useStore from '@/AppBuilder/_stores/store';
import { useEventActions, useEvents } from '@/AppBuilder/_stores/slices/eventsSlice';
+import ToggleGroup from '@/ToolJetUI/SwitchGroup/ToggleGroup';
+import ToggleGroupItem from '@/ToolJetUI/SwitchGroup/ToggleGroupItem';
export const EventManager = ({
sourceId,
@@ -503,7 +505,7 @@ export const EventManager = ({
)}
{event.actionId === 'open-webpage' && (
-
+
{isDisabled && (
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
index 25796a9951..2615ca3d5c 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
@@ -105,9 +105,10 @@ export const ModalWidget = ({ ...restProps }) => {
+
+ handlerChanged(index, 'windowTarget', _value)}
+ defaultValue={event?.windowTarget || 'newTab'}
+ style={{ width: '74%' }}
+ >
+ New tab
+ Current tab
+
+
+
+
+ {showLeftIcon && (
+ 0 && width > 0) || (auto && width == 0 && label && label?.length != 0)
+ ? `${labelWidth + 11}px`
+ : '11px',
+ position: 'absolute',
+ top:
+ inputType === 'textarea'
+ ? defaultAlignment === 'top'
+ ? '38px'
+ : '18px'
+ : defaultAlignment === 'side'
+ ? '50%'
+ : (label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0)
+ ? 'calc(50% + 10px)'
+ : '50%',
+ transform: 'translateY(-50%)',
+ color: iconColor !== '#CFD3D859' ? iconColor : 'var(--icons-weak-disabled)',
+ zIndex: 3,
+ }}
+ stroke={1.5}
+ />
+ )}
+
+
+ {showValidationError && visibility && (
+
+ {validationError}
+
+ )}
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/BaseComponents/hooks/useInput.js b/frontend/src/AppBuilder/Widgets/BaseComponents/hooks/useInput.js
new file mode 100644
index 0000000000..57260875a2
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/BaseComponents/hooks/useInput.js
@@ -0,0 +1,235 @@
+import { useState, useRef, useEffect } from 'react';
+import { useGridStore } from '@/_stores/gridStore';
+//eslint-disable-next-line import/no-unresolved
+import { getCountryCallingCode } from 'react-phone-number-input';
+
+export const useInput = ({
+ id,
+ properties,
+ styles,
+ validation,
+ validate,
+ setExposedVariable,
+ setExposedVariables,
+ fireEvent,
+ inputType,
+}) => {
+ const isInitialRender = useRef(true);
+ const inputRef = useRef();
+ const labelRef = useRef();
+
+ const { loadingState, disabledState, label, visibility: initialVisibility } = properties;
+ const isResizing = useGridStore((state) => state.resizingComponentId === id);
+
+ const [value, setValue] = useState(properties.value ?? '');
+ const [visibility, setVisibility] = useState(initialVisibility);
+ const [loading, setLoading] = useState(loadingState);
+ const [disable, setDisable] = useState(disabledState || loadingState);
+ const [validationStatus, setValidationStatus] = useState(validate(value));
+ const [showValidationError, setShowValidationError] = useState(false);
+ const [isFocused, setIsFocused] = useState(false);
+ const [labelWidth, setLabelWidth] = useState(0);
+ const [iconVisibility, setIconVisibility] = useState(false);
+ const [country, setCountry] = useState(properties.defaultCountry || 'US');
+
+ const { isValid, validationError } = validationStatus;
+ const isMandatory = validation?.mandatory ?? false;
+
+ const getCountryCallingCodeSafe = (country) => {
+ try {
+ return getCountryCallingCode(country);
+ } catch (error) {
+ return '';
+ }
+ };
+
+ useEffect(() => {
+ if (labelRef?.current) {
+ const absolutewidth = labelRef?.current?.getBoundingClientRect()?.width;
+ setLabelWidth(absolutewidth);
+ } else setLabelWidth(0);
+ }, [
+ isResizing,
+ styles.width,
+ styles.auto,
+ styles.alignment,
+ styles.iconVisibility,
+ label?.length,
+ isMandatory,
+ styles.padding,
+ styles.direction,
+ labelRef?.current?.getBoundingClientRect()?.width,
+ ]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('label', label);
+ }, [label]);
+
+ useEffect(() => {
+ disable !== disabledState && setDisable(disabledState);
+ if (isInitialRender.current) return;
+ setExposedVariable('isDisabled', disabledState);
+ }, [disabledState]);
+
+ useEffect(() => {
+ visibility !== properties.visibility && setVisibility(properties.visibility);
+ if (isInitialRender.current) return;
+ setExposedVariable('isVisible', properties.visibility);
+ }, [properties.visibility]);
+
+ useEffect(() => {
+ loading !== loadingState && setLoading(loadingState);
+ if (isInitialRender.current) return;
+ setExposedVariable('isLoading', loadingState);
+ }, [loadingState]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('isMandatory', isMandatory);
+ }, [isMandatory]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ const validationStatus = validate(value);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ }, [validate]);
+
+ useEffect(() => {
+ if (inputType === 'phone') {
+ let code = getCountryCallingCodeSafe(country);
+ setInputValue(`+${code}${properties.value}`);
+ } else {
+ setInputValue(properties.value ?? '');
+ }
+ }, [properties.value]);
+
+ useEffect(() => {
+ if (inputType !== 'phone') return;
+ setExposedVariable('setValue', async function (value, countryCode = country) {
+ const code = getCountryCallingCodeSafe(country);
+ setInputValue(`+${code}${value}`);
+ setCountry(countryCode);
+ fireEvent('onChange');
+ });
+ }, [inputType, country]);
+
+ useEffect(() => {
+ if (inputType !== 'currency') return;
+ setExposedVariable('setValue', async function (value, countryCode = country) {
+ setInputValue(value);
+ setCountry(countryCode);
+ fireEvent('onChange');
+ });
+ }, [inputType, country]);
+
+ useEffect(() => {
+ const exposedVariables = {
+ ...(inputType !== 'phone' && {
+ setText: async function (text) {
+ setInputValue(text);
+ fireEvent('onChange');
+ },
+ }),
+ clear: async function () {
+ setInputValue('');
+ fireEvent('onChange');
+ },
+ setFocus: async function () {
+ inputRef.current.focus();
+ },
+ setBlur: async function () {
+ inputRef.current.blur();
+ },
+ setVisibility: async function (state) {
+ setVisibility(state);
+ setExposedVariable('isVisible', state);
+ },
+ setDisable: async function (disable) {
+ setDisable(disable);
+ setExposedVariable('isDisabled', disable);
+ },
+ setLoading: async function (loading) {
+ setLoading(loading);
+ setExposedVariable('isLoading', loading);
+ },
+ label,
+ isValid,
+ value: properties.value ?? '',
+ isMandatory,
+ isLoading: loading,
+ isVisible: visibility,
+ isDisabled: disable,
+ };
+
+ setExposedVariables(exposedVariables);
+ isInitialRender.current = false;
+ }, []);
+
+ const setInputValue = (value) => {
+ setValue(value);
+ setExposedVariable('value', value);
+ const validationStatus = validate(value);
+ setValidationStatus(validationStatus);
+ setExposedVariable('isValid', validationStatus?.isValid);
+ };
+
+ const handleChange = (e) => {
+ setInputValue(e.target.value);
+ fireEvent('onChange');
+ };
+
+ const handlePhoneCurrencyInputChange = (value) => {
+ setInputValue(value);
+ fireEvent('onChange');
+ };
+
+ const handleBlur = (e) => {
+ setShowValidationError(true);
+ setIsFocused(false);
+ e.stopPropagation();
+ fireEvent('onBlur');
+ };
+
+ const handleFocus = (e) => {
+ setIsFocused(true);
+ e.stopPropagation();
+ setTimeout(() => {
+ fireEvent('onFocus');
+ }, 0);
+ };
+
+ const handleKeyUp = (e) => {
+ if (e.key === 'Enter') {
+ setInputValue(e.target.value);
+ fireEvent('onEnterPressed');
+ }
+ };
+
+ return {
+ inputRef,
+ labelRef,
+ value,
+ visibility,
+ loading,
+ disable,
+ country,
+ setCountry,
+ validationStatus,
+ showValidationError,
+ isFocused,
+ labelWidth,
+ iconVisibility,
+ setIconVisibility,
+ isValid,
+ validationError,
+ isMandatory,
+ setInputValue,
+ handlePhoneCurrencyInputChange,
+ handleChange,
+ handleBlur,
+ handleFocus,
+ handleKeyUp,
+ };
+};
diff --git a/frontend/src/AppBuilder/Widgets/EmailInput.jsx b/frontend/src/AppBuilder/Widgets/EmailInput.jsx
new file mode 100644
index 0000000000..90061b0a66
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/EmailInput.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { BaseInput } from './BaseComponents/BaseInput';
+import { useInput } from './BaseComponents/hooks/useInput';
+
+export const EmailInput = (props) => {
+ const inputLogic = useInput(props);
+ const additionalInputProps = {
+ autocomplete: 'email',
+ name: 'email',
+ };
+ return
+
+ );
+ },
+ (prevProps, nextProps) => {
+ // Avoid re-rendering if the props are same
+ return Object.keys(diff(prevProps, nextProps)).length === 0;
+ }
+);
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/ActionButtons/ActionButtons.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/ActionButtons/ActionButtons.jsx
new file mode 100644
index 0000000000..f94b095946
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/ActionButtons/ActionButtons.jsx
@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import useTableStore from '../../_stores/tableStore';
+import { shallow } from 'zustand/shallow';
+import useStore from '@/AppBuilder/_stores/store';
+export const ActionButtons = ({ actions, row, cell, fireEvent, setExposedVariables, id }) => {
+ const { getTableActionEvents } = useTableStore();
+ const actionButtonRadius = useTableStore((state) => state.getTableStyles(id)?.actionButtonRadius, shallow);
+ const getResolvedValue = useStore((state) => state.getResolvedValue, shallow);
+
+ const handleActionClick = useCallback(
+ (action) => {
+ setExposedVariables({
+ selectedRowId: row.id,
+ selectedRow: row.original,
+ });
+
+ fireEvent('onTableActionButtonClicked', {
+ action,
+ tableActionEvents: getTableActionEvents(id),
+ });
+ },
+ [id, row, setExposedVariables, fireEvent, getTableActionEvents]
+ );
+
+ return (
+
+ {actions.map((action) => (
+
+ ))}
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Boolean.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Boolean.jsx
new file mode 100644
index 0000000000..96dd58e34e
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Boolean.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+
+export const BooleanColumn = ({ value = false, isEditable, onChange, toggleOnBg, toggleOffBg }) => {
+ const getCustomBgStyles = (value, toggleOnBg, toggleOffBg) => {
+ if (value && toggleOnBg) {
+ return { backgroundColor: toggleOnBg };
+ }
+ if (!value && toggleOffBg) {
+ return { backgroundColor: toggleOffBg };
+ }
+ return {};
+ };
+
+ const nonEditableContent = (isTruthyValue) =>
+ isTruthyValue ? (
+
+ {isEditable ? editableContent(isEditable, value, onChange) : nonEditableContent(value)}
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/CustomDropdown.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/CustomDropdown.jsx
new file mode 100644
index 0000000000..e69e22a5fc
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/CustomDropdown.jsx
@@ -0,0 +1,135 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import SelectSearch from 'react-select-search';
+import '@/_styles/editor/react-select-search.scss';
+import { useTranslation } from 'react-i18next';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+
+export const CustomDropdownColumn = ({
+ options = [],
+ value,
+ multiple,
+ onChange,
+ isEditable,
+ width,
+ contentWrap,
+ autoHeight,
+ darkMode,
+}) => {
+ const [showOverlay, setShowOverlay] = useState(false);
+ const { t } = useTranslation();
+
+ const sanitizedValue = useMemo(() => {
+ if (!multiple) return value;
+ if (!Array.isArray(value)) return [];
+ return value.every((val) => typeof val !== 'object') ? value : [];
+ }, [value, multiple]);
+
+ const handleMouseMove = useCallback(() => {
+ if (!showOverlay) {
+ setShowOverlay(true);
+ }
+ }, [showOverlay]);
+
+ const handleMouseLeave = useCallback(() => {
+ setShowOverlay(false);
+ }, []);
+
+ const renderValue = useCallback(
+ (valueProps) => {
+ if (!valueProps) return null;
+
+ const stringValue = String(valueProps.value);
+ const values = stringValue.includes(',') ? stringValue.split(', ') : stringValue.split(' ');
+
+ return (
+
+ {values.map((val, index) => (
+
+ {val}
+
+ ))}
+
+ );
+ },
+ [isEditable]
+ );
+
+ const getOverlay = useCallback(
+ (value, width, options) => {
+ if (!Array.isArray(value)) return ;
+
+ const labels = value
+ .map((val) => {
+ const option = options.find((opt) => opt.value === val);
+ return option?.name;
+ })
+ .filter(Boolean);
+
+ return (
+
+ {labels.map((label) => (
+
+ {label}
+
+ ))}
+
+ );
+ },
+ [darkMode]
+ );
+
+ const isOverflowing = useCallback((element) => {
+ if (!element) return false;
+ return element.clientHeight < element.scrollHeight || element.clientWidth < element.scrollWidth;
+ }, []);
+
+ return (
+
+
+ e.stopPropagation()}>
+
+ {optionsLoadingState ? (
+
+
+ );
+};
+
+const CustomOption = ({ innerRef, innerProps, children, isSelected, ...props }) => (
+
+ {!inputValue && (
+
+
+
+
+ ) : (
+ children
+ )}
+
+
+
+
+ {props.selectProps.isMulti ? (
+ e.stopPropagation()} key="" value={children} />
+ ) : (
+
+);
+
+const MultiValueRemove = ({ innerProps }) => ;
+
+const CustomMultiValueContainer = ({ children }) => (
+
+ e.stopPropagation()} key="" value={children} />
+
+ )}
+ {children}
+
+ {children}
+
+);
+
+const DropdownIndicator = ({ selectProps }) => (
+
+
+);
+
+const getOverlay = (value, containerWidth, darkMode) => {
+ if (!isArray(value)) return ;
+
+ return (
+
+ {value.map((option) => (
+
+ {option.label || option}
+
+ ))}
+
+ );
+};
+
+export const CustomSelectColumn = ({
+ options,
+ value,
+ onChange,
+ fuzzySearch = false,
+ placeholder,
+ disabled,
+ className,
+ darkMode,
+ defaultOptionsList = [],
+ textColor = '',
+ isMulti,
+ containerWidth,
+ optionsLoadingState = false,
+ horizontalAlignment = 'left',
+ isEditable,
+ column,
+ isNewRow,
+ id,
+}) => {
+ const validateWidget = useStore((state) => state.validateWidget, shallow);
+
+ const [isFocused, setIsFocused] = useState(false);
+ const containerRef = useRef(null);
+ const inputRef = useRef(null);
+ const cellTextColor = useTextColor(id, textColor);
+
+ const validationData = validateWidget({
+ validationObject: {
+ customRule: { value: column.customRule },
+ },
+ widgetValue: value,
+ customResolveObjects: { value },
+ });
+ const { isValid, validationError } = validationData;
+
+ useEffect(() => {
+ const handleDocumentClick = (event) => {
+ if ((isMulti || isNewRow) && !containerRef.current?.contains(event.target)) setIsFocused(false);
+ };
+ document.addEventListener('mousedown', handleDocumentClick);
+ return () => document.removeEventListener('mousedown', handleDocumentClick);
+ }, [isMulti, isNewRow]);
+
+ const customComponents = {
+ MenuList: (props) => {
+ if (isNewRow && isEditable) {
+ setIsFocused((prev) => !prev);
+ }
+ }}
+ >
+
+ {
+ if (!isValid) {
+ setIsFocused(true); // Open the dropdown
+ }
+ }}
+ className={` ${isValid ? 'd-none' : 'invalid-feedback d-block'}`}
+ >
+ {validationError}
+
+
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Datepicker.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Datepicker.jsx
new file mode 100644
index 0000000000..23e9640902
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Datepicker.jsx
@@ -0,0 +1,279 @@
+import React, { useState, useCallback, useEffect, useRef, forwardRef } from 'react';
+import DatePickerComponent from 'react-datepicker';
+import moment from 'moment-timezone';
+import cx from 'classnames';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import CustomDatePickerHeader from './_components/CustomDatePickerHeader';
+import 'react-datepicker/dist/react-datepicker.css';
+import useTextColor from '../DataTypes/_hooks/useTextColor';
+
+const DISABLED_DATE_FORMAT = 'MM/DD/YYYY';
+
+const DatepickerInput = forwardRef(({ value, onClick, styles, readOnly, onInputChange, onInputFocus }, ref) => (
+
+ {readOnly ? (
+
+));
+
+const getDateTimeFormat = (dateDisplayFormat, isTimeChecked, isTwentyFourHrFormatEnabled, isDateSelectionEnabled) => {
+ const timeFormat = isTwentyFourHrFormatEnabled ? 'HH:mm' : 'LT';
+ if (isTimeChecked && !isDateSelectionEnabled) return timeFormat;
+ return isTimeChecked ? `${dateDisplayFormat} ${timeFormat}` : dateDisplayFormat;
+};
+
+const parseDate = ({
+ value,
+ parseDateFormat,
+ timeZoneValue,
+ timeZoneDisplay,
+ unixTimestamp,
+ parseInUnixTimestamp,
+ isTimeChecked,
+}) => {
+ if (!value) return null;
+
+ let momentObj;
+ if (parseInUnixTimestamp && unixTimestamp) {
+ momentObj = unixTimestamp === 'seconds' ? moment.unix(value) : moment(parseInt(value));
+ } else if (isTimeChecked && timeZoneValue && timeZoneDisplay) {
+ momentObj = moment.tz(value, parseDateFormat, timeZoneValue).tz(timeZoneDisplay);
+ } else {
+ momentObj = moment(value, parseDateFormat);
+ }
+
+ return momentObj?.isValid() ? momentObj.toDate() : null;
+};
+
+export const DatepickerColumn = ({
+ value,
+ onChange,
+ readOnly,
+ isTimeChecked,
+ dateDisplayFormat,
+ parseDateFormat,
+ timeZoneValue,
+ timeZoneDisplay,
+ isDateSelectionEnabled,
+ isTwentyFourHrFormatEnabled,
+ disabledDates,
+ unixTimestamp = 'seconds',
+ parseInUnixTimestamp,
+ darkMode,
+ textColor,
+ id,
+}) => {
+ const [date, setDate] = useState(null);
+ const [excludedDates, setExcludedDates] = useState([]);
+ const [isInputFocused, setIsInputFocused] = useState(false);
+ const [inputValue, setInputValue] = useState('');
+ const dateInputRef = useRef(null);
+ const cellTextColor = useTextColor(id, textColor);
+
+ const computeDateString = useCallback(
+ (date) => {
+ if (date === null && !value) return '';
+ if (!isDateSelectionEnabled && !isTimeChecked) return '';
+ if (date === null) return 'Invalid date';
+
+ const timeFormat = isTwentyFourHrFormatEnabled ? 'HH:mm' : 'LT';
+ const selectedDateFormat = isTimeChecked ? `${dateDisplayFormat} ${timeFormat}` : dateDisplayFormat;
+
+ if (isDateSelectionEnabled) {
+ if (isTimeChecked && parseInUnixTimestamp && unixTimestamp) {
+ return timeZoneDisplay
+ ? moment(date).tz(timeZoneDisplay).format(selectedDateFormat)
+ : moment(date).format(selectedDateFormat);
+ }
+ if (isTimeChecked && timeZoneValue && timeZoneDisplay) {
+ return moment.tz(date, parseDateFormat, timeZoneValue).tz(timeZoneDisplay).format(selectedDateFormat);
+ }
+ return moment(date).format(selectedDateFormat);
+ }
+
+ if (!isDateSelectionEnabled && isTimeChecked) {
+ return moment(date).format(timeFormat);
+ }
+ },
+ [
+ value,
+ isDateSelectionEnabled,
+ isTimeChecked,
+ isTwentyFourHrFormatEnabled,
+ dateDisplayFormat,
+ parseInUnixTimestamp,
+ unixTimestamp,
+ timeZoneDisplay,
+ timeZoneValue,
+ parseDateFormat,
+ ]
+ );
+
+ const handleDateChange = useCallback(
+ (newDate) => {
+ let processedValue = newDate;
+ if (parseInUnixTimestamp && unixTimestamp) {
+ processedValue = moment(newDate).unix();
+ }
+
+ const parsedDate = parseDate({
+ value: processedValue,
+ parseDateFormat: getDateTimeFormat(
+ parseDateFormat,
+ isTimeChecked,
+ isTwentyFourHrFormatEnabled,
+ isDateSelectionEnabled
+ ),
+ timeZoneValue,
+ timeZoneDisplay,
+ unixTimestamp,
+ parseInUnixTimestamp,
+ isTimeChecked,
+ });
+
+ setDate(parsedDate);
+ if (parseInUnixTimestamp && unixTimestamp) {
+ onChange(moment(parsedDate).unix());
+ } else {
+ onChange(computeDateString(parsedDate));
+ }
+ },
+ [
+ parseInUnixTimestamp,
+ unixTimestamp,
+ parseDateFormat,
+ isTimeChecked,
+ isTwentyFourHrFormatEnabled,
+ isDateSelectionEnabled,
+ timeZoneValue,
+ timeZoneDisplay,
+ onChange,
+ computeDateString,
+ ]
+ );
+
+ const handleInputDateChange = useCallback(
+ (value) => {
+ const inputDate = moment(value, parseDateFormat).toDate();
+ handleDateChange(inputDate);
+ },
+ [parseDateFormat, handleDateChange]
+ );
+
+ // Initialize date from value
+ useEffect(() => {
+ const parsedDate = parseDate({
+ value,
+ parseDateFormat: getDateTimeFormat(
+ parseDateFormat,
+ isTimeChecked,
+ isTwentyFourHrFormatEnabled,
+ isDateSelectionEnabled
+ ),
+ timeZoneValue,
+ timeZoneDisplay,
+ unixTimestamp,
+ parseInUnixTimestamp,
+ isTimeChecked,
+ });
+ setDate(parsedDate);
+ }, [
+ value,
+ parseDateFormat,
+ isTimeChecked,
+ isTwentyFourHrFormatEnabled,
+ isDateSelectionEnabled,
+ timeZoneValue,
+ timeZoneDisplay,
+ unixTimestamp,
+ parseInUnixTimestamp,
+ ]);
+
+ // Handle disabled dates
+ useEffect(() => {
+ if (Array.isArray(disabledDates) && disabledDates.length > 0) {
+ const excludedDates = disabledDates
+ .filter((date) => moment(date, DISABLED_DATE_FORMAT).isValid())
+ .map((date) => moment(date, DISABLED_DATE_FORMAT).toDate());
+ setExcludedDates(excludedDates);
+ }
+ }, [disabledDates]);
+
+ return (
+
+ {value}
+
+ ) : (
+ <>
+
+ {!readOnly && (
+
+
+ {
+ setIsInputFocused(false);
+ handleDateChange(date);
+ }}
+ value={isInputFocused ? inputValue : computeDateString(date)}
+ dateFormat={!isDateSelectionEnabled && isTimeChecked ? 'HH:mm' : dateDisplayFormat}
+ customInput={
+ {
+ setIsInputFocused(true);
+ setInputValue(e.target.value);
+ }}
+ onInputFocus={() => setInputValue(computeDateString(date))}
+ />
+ }
+ showTimeSelect={isTimeChecked}
+ showTimeSelectOnly={!isDateSelectionEnabled && isTimeChecked}
+ showMonthDropdown
+ showYearDropdown
+ dropdownMode="select"
+ excludeDates={excludedDates}
+ showPopperArrow={false}
+ renderCustomHeader={(headerProps) =>
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Image.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Image.jsx
new file mode 100644
index 0000000000..d8787080ec
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Image.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const ImageColumn = ({ cellValue, width, height, borderRadius, objectFit }) => {
+ if (!cellValue) return null;
+
+ return (
+
+ 
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/JSON.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/JSON.jsx
new file mode 100644
index 0000000000..415af08a38
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/JSON.jsx
@@ -0,0 +1,189 @@
+/* eslint-disable no-undef */
+import React, { useState, useEffect } from 'react';
+import { determineJustifyContentValue } from '@/_helpers/utils';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import useTextColor from '../DataTypes/_hooks/useTextColor';
+import { getMaxHeight } from '../../_utils/helper';
+import useTableStore from '../../_stores/tableStore';
+import { shallow } from 'zustand/shallow';
+
+export const JsonColumn = ({
+ isEditable,
+ jsonIndentation,
+ darkMode,
+ handleCellValueChange,
+ textColor,
+ cellValue,
+ column,
+ containerWidth,
+ horizontalAlignment,
+ id,
+}) => {
+ const cellTextColor = useTextColor(id, textColor, 'json');
+ const cellHeight = useTableStore((state) => state.getTableStyles(id)?.cellHeight, shallow);
+ const isMaxRowHeightAuto = useTableStore((state) => state.getTableStyles(id)?.isMaxRowHeightAuto, shallow);
+ const maxRowHeightValue = useTableStore((state) => state.getTableStyles(id)?.maxRowHeightValue, shallow);
+
+ const ref = React.useRef(null);
+
+ const [hovered, setHovered] = useState(false);
+ const [isEditing, setIsEditing] = useState(false);
+
+ const cellStyles = {
+ color: cellTextColor ?? 'inherit',
+ };
+
+ useEffect(() => {
+ if (!isEditable && isEditing) {
+ setIsEditing(false);
+ }
+ }, [isEditable, isEditing]);
+
+ function format(obj) {
+ if (typeof obj !== 'object' || obj === null) {
+ return typeof obj === 'string' ? `"${obj}"` : obj;
+ }
+ if (Array.isArray(obj)) {
+ return `[ ${obj.map(format).join(', ')} ]`;
+ }
+ return `{ ${Object.entries(obj)
+ .map(([key, value]) => `"${key}": ${format(value)}`)
+ .join(', ')} }`;
+ }
+
+ const formatCellValue = (value, overlay = false) => {
+ try {
+ if (typeof value === 'object') {
+ if (jsonIndentation === true && !overlay) {
+ return JSON.stringify(value, null, 4).replace(/":/g, '": ');
+ }
+ const formattedJSON = format(value);
+ return formattedJSON;
+ } else {
+ if (jsonIndentation === true && !overlay) {
+ return JSON.stringify(JSON.parse(value), null, 4).replace(/":/g, '": ');
+ }
+ const formattedJSON = format(JSON.parse(value));
+ return formattedJSON;
+ }
+ } catch (error) {
+ return value;
+ }
+ };
+
+ const _renderString = () => (
+ {
+ setIsEditing(false);
+ if (cellValue !== e.target.textContent) {
+ const value = JSON.stringify(JSON.parse(e.target.textContent.replace(/\n/g, '')));
+ handleCellValueChange(row.index, column.key || column.name, value, row.original);
+ }
+ }}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ ref.current.blur();
+ if (cellValue !== e.target.textContent) {
+ const value = JSON.stringify(JSON.parse(e.target.textContent.replace(/\n/g, '')));
+ handleCellValueChange(row.index, column.key || column.name, value, row.original);
+ }
+ }
+ }}
+ onFocus={(e) => {
+ setIsEditing(true);
+ e.stopPropagation();
+ }}
+ >
+ {String(formatCellValue(cellValue))}
+
+ );
+
+ const getOverlay = () => {
+ return (
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ style={{ color: 'var(--text-primary)' }}
+ >
+
+ {String(formatCellValue(cellValue, true))}
+
+
+ );
+ };
+
+ const _showOverlay =
+ ref?.current &&
+ (ref?.current?.clientWidth < ref?.current?.children[0]?.offsetWidth ||
+ ref?.current?.clientHeight < ref?.current?.children[0]?.offsetHeight);
+
+ return (
+ <>
+ {
+ if (!hovered) setHovered(true);
+ }}
+ onMouseLeave={() => {
+ setHovered(false);
+ }}
+ ref={ref}
+ >
+
+ {String(formatCellValue(cellValue))}
+
+
+ ) : (
+
+
+ )}
+
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Link.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Link.jsx
new file mode 100644
index 0000000000..3e17d173db
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Link.jsx
@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import useTextColor from '../DataTypes/_hooks/useTextColor';
+
+export const LinkColumn = ({
+ cellValue,
+ linkTarget,
+ underline,
+ underlineColor,
+ textColor,
+ displayText,
+ darkMode,
+ id,
+}) => {
+ const cellTextColor = useTextColor(id, textColor);
+ const linkTextColor = useMemo(
+ () =>
+ cellTextColor !== '#1B1F24' ? cellTextColor : darkMode && cellTextColor === '#1B1F24' ? '#FFFFFF' : cellTextColor,
+ [cellTextColor, darkMode]
+ );
+
+ return (
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Markdown.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Markdown.jsx
new file mode 100644
index 0000000000..7ea9a7b3b0
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Markdown.jsx
@@ -0,0 +1,169 @@
+import React, { useState, useEffect, useRef } from 'react';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import { determineJustifyContentValue } from '@/_helpers/utils';
+import { default as ReactMarkdown } from 'react-markdown';
+import useTextColor from '../DataTypes/_hooks/useTextColor';
+import useTableStore from '../../_stores/tableStore';
+import { getMaxHeight } from '../../_utils/helper';
+import { shallow } from 'zustand/shallow';
+import DOMPurify from 'dompurify';
+
+export const MarkdownColumn = ({
+ id,
+ isEditable,
+ darkMode,
+ handleCellValueChange,
+ textColor,
+ cellValue,
+ column,
+ containerWidth,
+ cell,
+ horizontalAlignment,
+ cellSize,
+}) => {
+ const ref = useRef(null);
+ const cellTextColor = useTextColor(id, textColor);
+ const isMaxRowHeightAuto = useTableStore((state) => state.getTableStyles(id)?.isMaxRowHeightAuto, shallow);
+ const maxRowHeightValue = useTableStore((state) => state.getTableStyles(id)?.maxRowHeightValue, shallow);
+ const [hovered, setHovered] = useState(false);
+ const [isEditing, setIsEditing] = useState(false);
+
+ const cellStyles = {
+ color: cellTextColor ?? 'inherit',
+ };
+
+ const getCellValue = (value) => {
+ let transformedValue = value;
+ if (typeof value !== 'string') {
+ try {
+ transformedValue = String(value);
+ } catch (e) {
+ transformedValue = '';
+ }
+ }
+ return DOMPurify.sanitize(transformedValue.trim());
+ };
+
+ useEffect(() => {
+ if (!isEditable && isEditing) {
+ setIsEditing(false);
+ }
+ }, [isEditable]);
+
+ const getOverlay = () => {
+ return (
+ {
+ if (!hovered) setHovered(true);
+ }}
+ onMouseLeave={() => setHovered(false)}
+ className={`${isEditing ? 'h-100 content-editing' : ''} h-100`}
+ >
+ {_renderString()}
+
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ style={{ color: 'var(--text-primary)' }}
+ >
+
+ {getCellValue(cellValue)}
+
+
+ );
+ };
+
+ const renderEditable = () => {
+ const onChange = (e) => {
+ if (cellValue !== e.target.textContent) {
+ const value = e.target.textContent;
+ handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original);
+ }
+ };
+
+ return (
+ {
+ setIsEditing(false);
+ onChange(e);
+ }}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ ref.current.blur();
+ onChange(e);
+ }
+ }}
+ onFocus={(e) => {
+ setIsEditing(true);
+ e.stopPropagation();
+ }}
+ >
+
+ );
+ };
+
+ const _showOverlay =
+ ref?.current &&
+ (ref?.current?.clientWidth < ref?.current?.children[0]?.offsetWidth ||
+ ref?.current?.clientHeight < ref?.current?.children[0]?.offsetHeight);
+
+ return (
+ {isEditing ? cellValue : {getCellValue(cellValue)} }
+ {
+ if (!hovered) setHovered(true);
+ }}
+ onMouseLeave={() => {
+ setHovered(false);
+ }}
+ ref={ref}
+ >
+
+ {getCellValue(cellValue)}
+
+
+ ) : (
+
+
+ )}
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/MultiSelect.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/MultiSelect.jsx
new file mode 100644
index 0000000000..2ece12200c
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/MultiSelect.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { CustomSelect } from './CustomSelect';
+
+export const MultiSelectColumn = ({
+ options,
+ value,
+ onChange,
+ isEditable,
+ darkMode,
+ defaultOptionsList,
+ textColor,
+ containerWidth,
+ optionsLoadingState,
+ horizontalAlignment,
+ isMaxRowHeightAuto,
+}) => {
+ return (
+ {
+ if (!hovered) setHovered(true);
+ }}
+ onMouseLeave={() => setHovered(false)}
+ className={`${isEditing ? 'h-100 content-editing' : ''} h-100`}
+ >
+ {renderEditable()}
+
+
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Number.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Number.jsx
new file mode 100644
index 0000000000..4b168b015a
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Number.jsx
@@ -0,0 +1,164 @@
+import React, { useState, useEffect } from 'react';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import { determineJustifyContentValue } from '@/_helpers/utils';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import HighLightSearch from '@/AppBuilder/Widgets/NewTable/_components/HighLightSearch';
+import useTextColor from '../DataTypes/_hooks/useTextColor';
+
+export const NumberColumn = ({
+ id,
+ isEditable,
+ handleCellValueChange,
+ textColor,
+ horizontalAlignment,
+ cellValue,
+ column,
+ cell,
+ row,
+ searchText,
+}) => {
+ const [displayValue, setDisplayValue] = useState(cellValue);
+ const validateWidget = useStore((state) => state.validateWidget, shallow);
+ const getResolvedValue = useStore((state) => state.getResolvedValue, shallow);
+ const cellTextColor = useTextColor(id, textColor);
+
+ useEffect(() => {
+ setDisplayValue(cellValue);
+ }, [cellValue]);
+
+ const removingExcessDecimalPlaces = (value, allowedDecimalPlaces) => {
+ if (value?.toString()?.includes('.')) {
+ const [integerPart, decimalPart] = value.toString().split('.');
+ const truncatedDecimalPart = decimalPart.slice(0, allowedDecimalPlaces);
+ return Number(`${integerPart}.${truncatedDecimalPart}`);
+ }
+ return value;
+ };
+
+ const allowedDecimalPlaces = getResolvedValue(column?.decimalPlaces) ?? null;
+ cellValue = allowedDecimalPlaces ? removingExcessDecimalPlaces(cellValue, allowedDecimalPlaces) : cellValue;
+
+ const validationData = validateWidget({
+ validationObject: {
+ minValue: {
+ value: column?.minValue,
+ },
+ maxValue: {
+ value: column?.maxValue,
+ },
+ regex: {
+ value: column?.regex,
+ },
+ customRule: {
+ value: column?.customRule,
+ },
+ },
+ widgetValue: cellValue,
+ customResolveObjects: { cellValue },
+ });
+
+ const { isValid, validationError } = validationData;
+
+ const handleIncrement = (e) => {
+ e.preventDefault();
+ const newValue = (cellValue || 0) + 1;
+ if (!isNaN(newValue)) {
+ handleCellValueChange(row.index, column.key || column.name, Number(newValue), row.original);
+ }
+ };
+
+ const handleDecrement = (e) => {
+ e.preventDefault();
+ const newValue = (cellValue || 0) - 1;
+ if (!isNaN(newValue)) {
+ handleCellValueChange(row.index, column.key || column.name, Number(newValue), row.original);
+ }
+ };
+
+ const handleValueChange = (value) => {
+ if (value === '') return;
+
+ const numValue = Number(value);
+ if (isNaN(numValue)) return;
+
+ const processedValue =
+ allowedDecimalPlaces !== null ? removingExcessDecimalPlaces(numValue, allowedDecimalPlaces) : numValue;
+ setDisplayValue(processedValue);
+ handleCellValueChange(row.index, column.key || column.name, processedValue, row.original);
+ };
+
+ if (isEditable) {
+ return (
+
+ setDisplayValue(e.target.value)}
+ step={allowedDecimalPlaces !== null ? `0.${'0'.repeat(allowedDecimalPlaces - 1)}1` : 'any'}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ if (displayValue !== cellValue) {
+ handleValueChange(displayValue);
+ }
+ }
+ }}
+ onBlur={() => {
+ if (displayValue !== cellValue) {
+ handleValueChange(displayValue);
+ }
+ }}
+ onFocus={(e) => e.stopPropagation()}
+ />
+
+ );
+ }
+
+ return (
+
+
+ {!isValid &&
+
+
+
+ {validationError}
}
+
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Radio.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Radio.jsx
new file mode 100644
index 0000000000..29cfed17ae
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Radio.jsx
@@ -0,0 +1,97 @@
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+
+export const RadioColumn = ({ options = [], value, onChange, readOnly, containerWidth }) => {
+ const [showOverlay, setShowOverlay] = useState(false);
+ const [hovered, setHovered] = useState(false);
+ const containerRef = useRef(null);
+
+ useEffect(() => {
+ setShowOverlay(hovered);
+ }, [hovered]);
+
+ // Memoize sanitized value and options
+ const sanitizedValue = useMemo(() => (value === undefined ? [] : value), [value]);
+ const sanitizedOptions = useMemo(() => (Array.isArray(options) ? options : []), [options]);
+
+ const handleOptionClick = useCallback(
+ (optionValue) => {
+ if (!readOnly) {
+ onChange(optionValue);
+ }
+ },
+ [readOnly, onChange]
+ );
+
+ const renderOption = useCallback(
+ (option, index) => (
+
+ ),
+ [sanitizedValue, readOnly, handleOptionClick]
+ );
+
+ const getOverlay = useCallback(
+ (options, containerWidth) => {
+ const darkMode = localStorage.getItem('darkMode') === 'true';
+
+ return Array.isArray(options) ? (
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ role="radiogroup"
+ aria-label="Radio options overlay"
+ >
+ {options.map(renderOption)}
+
+ ) : (
+
+ );
+ },
+ [renderOption]
+ );
+
+ const isOverflowing = useCallback(() => {
+ if (!containerRef.current) return false;
+ return (
+ containerRef.current.clientHeight < containerRef.current.scrollHeight ||
+ containerRef.current.clientWidth < containerRef.current.scrollWidth
+ );
+ }, []);
+
+ return (
+ !hovered && setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ role="radiogroup"
+ aria-label="Radio options"
+ >
+
+
+ {sanitizedOptions.map(renderOption)}
+
+
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/String.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/String.jsx
new file mode 100644
index 0000000000..fbe15205f8
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/String.jsx
@@ -0,0 +1,163 @@
+import React, { useState, useEffect, useRef } from 'react';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import { determineJustifyContentValue } from '@/_helpers/utils';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import useTableStore from '@/AppBuilder/Widgets/NewTable/_stores/tableStore';
+import HighLightSearch from '@/AppBuilder/Widgets/NewTable/_components/HighLightSearch';
+import { getMaxHeight } from '../../_utils/helper';
+import useTextColor from '../DataTypes/_hooks/useTextColor';
+import useValidationStyle from '../DataTypes/_hooks/useValidationStyle';
+
+export const StringColumn = ({
+ isEditable,
+ darkMode,
+ handleCellValueChange,
+ textColor,
+ horizontalAlignment,
+ cellValue,
+ column,
+ containerWidth,
+ cell,
+ row,
+ searchText,
+ id,
+}) => {
+ const validateWidget = useStore((state) => state.validateWidget, shallow);
+
+ const cellHeight = useTableStore((state) => state.getTableStyles(id)?.cellHeight, shallow);
+ const isMaxRowHeightAuto = useTableStore((state) => state.getTableStyles(id)?.isMaxRowHeightAuto, shallow);
+ const maxRowHeightValue = useTableStore((state) => state.getTableStyles(id)?.maxRowHeightValue, shallow);
+ const cellTextColor = useTextColor(id, textColor);
+
+ const ref = useRef(null);
+ const [showOverlay, setShowOverlay] = useState(false);
+ const [hovered, setHovered] = useState(false);
+ const [isEditing, setIsEditing] = useState(false);
+
+ const validationData = validateWidget({
+ validationObject: {
+ regex: { value: column.regex },
+ minLength: { value: column.minLength },
+ maxLength: { value: column.maxLength },
+ customRule: { value: column.customRule },
+ },
+ widgetValue: cellValue,
+ customResolveObjects: { cellValue },
+ });
+ const { isValid, validationError } = validationData;
+ useValidationStyle(id, row, validationError);
+
+ useEffect(() => {
+ setShowOverlay(hovered);
+ }, [hovered]);
+
+ useEffect(() => {
+ if (!isEditable && isEditing) {
+ setIsEditing(false);
+ }
+ }, [isEditable, isEditing]);
+
+ const getOverlay = () => (
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ style={{ color: 'var(--text-primary)' }}
+ >
+ {String(cellValue)}
+
+ );
+
+ const _showOverlay =
+ ref?.current &&
+ (ref?.current?.clientWidth < ref?.current?.children[0]?.offsetWidth ||
+ ref?.current?.clientHeight < ref?.current?.children[0]?.offsetHeight);
+
+ const focusInput = () => {
+ if (ref.current) {
+ ref.current.focus();
+ }
+ };
+
+ const renderEditableContent = () => (
+
+
+ );
+
+ const renderReadOnlyContent = () => (
+ !hovered && setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ className={`${!isValid ? 'is-invalid h-100' : ''} ${isEditing ? 'h-100 content-editing' : ''} h-100`}
+ >
+
+ {!isValid && (
+ {
+ setIsEditing(false);
+ if (cellValue !== e.target.textContent) {
+ handleCellValueChange(row.index, column.key || column.name, e.target.textContent, row.original);
+ }
+ }}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ e.target.blur();
+ }
+ }}
+ onFocus={(e) => {
+ setIsEditing(true);
+ e.stopPropagation();
+ }}
+ suppressContentEditableWarning={true}
+ >
+
+
+ {validationError}
+
+ )}
+ !hovered && setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ ref={ref}
+ >
+
+
+ );
+
+ return (
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ role="list"
+ aria-label="Tags overlay"
+ >
+ {value?.map((tag, index) => (
+
+ {renderTag(tag)}
+
+ ))}
+
+ ) : (
+
+ );
+ },
+ [renderTag]
+ );
+
+ const isOverflowing = useCallback(() => {
+ if (!containerRef.current) return false;
+ return (
+ containerRef.current.clientHeight < containerRef.current.scrollHeight ||
+ containerRef.current.clientWidth < containerRef.current.scrollWidth
+ );
+ }, []);
+
+ return (
+ !hovered && setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ role="region"
+ aria-label="Tags container"
+ >
+ {!showForm && (
+
+
+ {value.map((item, index) => (
+
+ {renderTag(item)}
+
+ ))}
+
+ )}
+
+ {!showForm && !readOnly && (
+
+
+ setShowForm(true)}
+ onKeyDown={(e) => e.key === 'Enter' && setShowForm(true)}
+ role="button"
+ tabIndex={0}
+ aria-label="Add new tag"
+ >
+ +
+
+
+
+ )}
+
+ {showForm && (
+
+ handleAddTag(e.target.value)}
+ onKeyDown={handleFormKeyDown}
+ aria-label="New tag input"
+ />
+
+ )}
+
+
+ );
+ }
+
+ return (
+ {
+ setIsEditing(false);
+ if (cellValue !== e.target.textContent) {
+ handleContentChange(e.target.innerHTML);
+ }
+ }}
+ onKeyDown={handleKeyDown}
+ onFocus={() => setIsEditing(true)}
+ suppressContentEditableWarning={true}
+ >
+
+ );
+ }, [
+ isEditable,
+ isValid,
+ darkMode,
+ cellTextColor,
+ containerWidth,
+ handleKeyDown,
+ cellValue,
+ searchText,
+ horizontalAlignment,
+ cellStyle,
+ handleContentChange,
+ ]);
+
+ return (
+
+
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Toggle.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Toggle.jsx
new file mode 100644
index 0000000000..1d209bd78a
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Toggle.jsx
@@ -0,0 +1,39 @@
+// TODO: Remove getTableColumnEvents when the toggle column is removed as it is used only for the toggle column
+import React, { useState, useCallback, useEffect } from 'react';
+import useTableStore from '../../_stores/tableStore';
+
+export const ToggleColumn = ({ id, value, readOnly, onChange, activeColor }) => {
+ const [isOn, setIsOn] = useState(() => value);
+
+ const { getTableColumnEvents } = useTableStore();
+
+ // Sync internal state with external value
+ useEffect(() => {
+ setIsOn(value);
+ }, [value]);
+
+ const handleToggle = useCallback(() => {
+ if (!readOnly) {
+ const newValue = !isOn;
+ setIsOn(newValue);
+ onChange(newValue, getTableColumnEvents(id));
+ }
+ }, [isOn, readOnly, onChange, id, getTableColumnEvents]);
+
+ return (
+ setShowOverlay(true)}
+ onMouseLeave={() => setShowOverlay(false)}
+ ref={containerRef}
+ className={`${!isValid ? 'is-invalid h-100' : ''} ${isEditing ? 'h-100 content-editing' : ''}`}
+ >
+ {renderContent()}
+
+ {isEditable && !isValid && (
+
+ {validationError}
+
+ )}
+
+
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/_components/CustomDatePickerHeader.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/_components/CustomDatePickerHeader.jsx
new file mode 100644
index 0000000000..98cab64487
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/_components/CustomDatePickerHeader.jsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import moment from 'moment';
+import { range } from 'lodash';
+
+const CustomDatePickerHeader = ({
+ date,
+ changeYear,
+ changeMonth,
+ decreaseMonth,
+ increaseMonth,
+ prevMonthButtonDisabled,
+ nextMonthButtonDisabled,
+}) => {
+ const months = [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December',
+ ];
+
+ const years = range(1900, 2101);
+
+ return (
+ <>
+
+
+
+
+ );
+};
+
+export default CustomDatePickerHeader;
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/_hooks/useTextColor.js b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/_hooks/useTextColor.js
new file mode 100644
index 0000000000..e336b70a18
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/_hooks/useTextColor.js
@@ -0,0 +1,11 @@
+import useTableStore from '../../../_stores/tableStore';
+import { shallow } from 'zustand/shallow';
+
+export default function useTextColor(id, cellTextColor) {
+ const textColor = useTableStore((state) => state.getTableStyles(id)?.textColor, shallow);
+
+ if (!cellTextColor || cellTextColor === '#11181C') {
+ return textColor;
+ }
+ return cellTextColor;
+}
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/_hooks/useValidationStyle.js b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/_hooks/useValidationStyle.js
new file mode 100644
index 0000000000..2dda1603b5
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/_hooks/useValidationStyle.js
@@ -0,0 +1,10 @@
+export default function useValidationStyle(id, row, validationError) {
+ if (validationError) {
+ const elem = document.getElementById(id)?.querySelector(`[data-index="${row.index}"]`);
+ if (elem) {
+ elem.style.maxHeight = '';
+ elem.style.height = '';
+ }
+ }
+ return null;
+}
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/index.js b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/index.js
new file mode 100644
index 0000000000..ee2fb701a0
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/index.js
@@ -0,0 +1,16 @@
+export { StringColumn } from './String';
+export { NumberColumn } from './Number';
+export { BooleanColumn } from './Boolean';
+export { TagsColumn } from './Tags';
+export { RadioColumn } from './Radio';
+export { ToggleColumn } from './Toggle';
+export { DatepickerColumn } from './Datepicker';
+export { LinkColumn } from './Link';
+export { ImageColumn } from './Image';
+export { CustomSelectColumn } from './CustomSelect';
+export { CustomDropdownColumn } from './CustomDropdown';
+// export { MultiSelectColumn } from './MultiSelect';
+// export { SelectColumn } from './Select';
+export { TextColumn } from './Text';
+export { JsonColumn } from './JSON';
+export { MarkdownColumn } from './Markdown';
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/Footer.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/Footer.jsx
new file mode 100644
index 0000000000..9fb6fe7cba
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/Footer.jsx
@@ -0,0 +1,109 @@
+import React, { useState, memo } from 'react';
+// Store files
+import useTableStore from '../../_stores/tableStore';
+// Local components
+import { Pagination } from './_components/Pagination/Pagination';
+import { AddNewRow } from './_components/AddNewRow';
+import { shallow } from 'zustand/shallow';
+import { LoadingFooter } from './_components/LoadingFooter';
+import { ControlButtons } from './_components/ControlButtons';
+import { ChangeSetUI } from './_components/ChangeSetUI';
+import { RowCount } from './_components/RowCount';
+
+export const Footer = memo(
+ ({
+ id,
+ darkMode,
+ height,
+ width,
+ allColumns = [],
+ table,
+ pageIndex,
+ componentName,
+ handleChangesSaved,
+ handleChangesDiscarded,
+ fireEvent,
+ setExposedVariables,
+ pageCount,
+ dataLength,
+ columnVisibility, // Passed to trigger a re-render when columnVisibility changes
+ }) => {
+ const isFooterVisible = useTableStore((state) => state.getFooterVisibility(id), shallow);
+ const loadingState = useTableStore((state) => state.getLoadingState(id), shallow);
+ const editedRows = useTableStore((state) => state.getAllEditedRows(id), shallow);
+
+ const enablePagination = useTableStore((state) => state.getTableProperties(id)?.enablePagination, shallow);
+ const showBulkUpdateActions = useTableStore(
+ (state) => state.getTableProperties(id)?.showBulkUpdateActions,
+ shallow
+ );
+
+ const [showAddNewRowPopup, setShowAddNewRowPopup] = useState(false);
+
+ // Hide footer if the properties are not enabled
+ if (!isFooterVisible) return null;
+
+ // Loading state for footer
+ if (loadingState) {
+ return
+
+
+
+
+
+
+
+ {showAddNewRowPopup && (
+
+
+
+ {editedRows.size > 0 && showBulkUpdateActions ? renderChangeSetUI() : renderRowCount()}
+
+ {enablePagination && (
+
+
+ );
+}
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/ChangeSetUI.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/ChangeSetUI.jsx
new file mode 100644
index 0000000000..b27e429713
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/ChangeSetUI.jsx
@@ -0,0 +1,46 @@
+import React, { memo } from 'react';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+import useTableStore from '../../../_stores/tableStore';
+import { shallow } from 'zustand/shallow';
+import useStore from '@/AppBuilder/_stores/store';
+
+export const ChangeSetUI = memo(({ width, handleChangesSaved, handleChangesDiscarded, id }) => {
+ const onEvent = useStore((state) => state.eventsSlice.onEvent);
+ const tableComponentEvents = useTableStore((state) => state.getTableComponentEvents(id), shallow);
+
+ return (
+ <>
+
+
+
+
+ + Add new rows +
+
+
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+
+
+ |
+
+
+
+
+
+ {flexRender(header.column.columnDef.header, header.getContext())}
+
+ |
+ ))}
+
|---|
|
+
+ {flexRender(cell.column.columnDef.cell, {
+ ...cell.getContext(),
+ isEditable: true,
+ })}
+
+ |
+ ))}
+
+ {
+ await fireEvent('onNewRowsAdded');
+ hideAddNewRowPopup();
+ }}
+ size="sm"
+ customStyles={{ padding: '10px 20px' }}
+ >
+ Save
+
+ {
+ hideAddNewRowPopup();
+ clearAddNewRowDetails(id);
+ }}
+ size="sm"
+ customStyles={{ padding: '10px 20px' }}
+ >
+ Discard
+
+
+
+
+
+
+ {table.getAllLeafColumns().map((column) => {
+ const header = column?.columnDef?.header;
+ return (
+ typeof header === 'string' && (
+
+
+ )
+ );
+ })}
+
+
+
+
+ exportToCSV(table, componentName)}
+ >
+ Download as CSV
+
+ exportToExcel(table, componentName)}
+ >
+ Download as Excel
+
+ exportToPDF(table, componentName)}
+ >
+ Download as PDF
+
+
+
+ {showAddNewRowButton && (
+ <>
+ {
+ setShowAddNewRowPopup(true);
+ }}
+ size="md"
+ data-tooltip-id="tooltip-for-add-new-row"
+ data-tooltip-content="Add new row"
+ >
+
+ )}
+ {showDownloadButton && renderDownloadButton()}
+ {!hideColumnSelectorButton &&
+ renderOverlay(id, 'eye1', hideColumnsPopover, 'tooltip-for-manage-columns', 'Manage columns')}
+
+ );
+ }
+);
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/LoadingFooter.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/LoadingFooter.jsx
new file mode 100644
index 0000000000..2488ffa381
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/LoadingFooter.jsx
@@ -0,0 +1,20 @@
+import React, { memo } from 'react';
+import Loader from '../../Loader';
+
+export const LoadingFooter = memo(() => {
+ return (
+
+
+ );
+});
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/OverlayTriggerComponent.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/OverlayTriggerComponent.jsx
new file mode 100644
index 0000000000..df0052c225
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/OverlayTriggerComponent.jsx
@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+
+// This overlayTriggerComponent is used in the Table component, for download and manage columns popover
+export const OverlayTriggerComponent = ({
+ trigger = 'click',
+ overlay,
+ rootClose = true,
+ placement = 'top',
+ children,
+}) => {
+ const [isOpen, setOpen] = useState(false);
+ const modifiedChild = React.cloneElement(children, {
+ className: `${children.props.className} ${isOpen && 'always-active-btn'}`,
+ });
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationButton.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationButton.jsx
new file mode 100644
index 0000000000..4d8902cad7
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationButton.jsx
@@ -0,0 +1,21 @@
+import React, { memo } from 'react';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+
+export const PaginationButton = memo(({ onClick, disabled, icon, dataCy }) => {
+ return (
+
+
+
+ {showGoToFirstAndLast && (
+ {
+ table.firstPage();
+ }}
+ disabled={!canGoToPreviousPage}
+ icon="cheveronleftdouble"
+ dataCy="pagination-button-to-first"
+ />
+ )}
+
+ {
+ goToPreviousPage();
+ }}
+ disabled={!canGoToPreviousPage}
+ icon="cheveronleft"
+ dataCy="pagination-button-to-previous"
+ />
+
+
+
+ {
+ goToNextPage();
+ }}
+ disabled={!canGoToNextPage}
+ icon="cheveronright"
+ dataCy="pagination-button-to-next"
+ />
+ {showGoToFirstAndLast && (
+ {
+ table.lastPage();
+ }}
+ disabled={!canGoToNextPage}
+ icon="cheveronrightdouble"
+ dataCy="pagination-button-to-last"
+ />
+ )}
+
+
+ {serverSidePagination && {pageIndex}}
+ {!serverSidePagination && (
+ <>
+ {
+ const value = event.target.value;
+
+ // Only update page if value is a valid number and within range
+ const pageNumber = parseInt(value, 10);
+ if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= pageCount) {
+ setInputValue(pageNumber);
+ gotoPage(pageNumber);
+ } else if (value === '') {
+ setInputValue('');
+ }
+ }}
+ />
+
+ of {pageCount || 1}
+
+
+ )}
+
+ );
+});
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/RowCount.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/RowCount.jsx
new file mode 100644
index 0000000000..fad96e5933
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/RowCount.jsx
@@ -0,0 +1,16 @@
+import React, { memo } from 'react';
+import useTableStore from '../../../_stores/tableStore';
+import { shallow } from 'zustand/shallow';
+
+export const RowCount = memo(({ dataLength, id }) => {
+ const clientSidePagination = useTableStore((state) => state.getTableProperties(id)?.clientSidePagination, shallow);
+ const serverSidePagination = useTableStore((state) => state.getTableProperties(id)?.serverSidePagination, shallow);
+ const totalRecords = useTableStore((state) => state.getTableProperties(id)?.totalRecords, shallow);
+
+ return (
+
+ {clientSidePagination && !serverSidePagination && `${dataLength} Records`}
+ {serverSidePagination && totalRecords ? `${totalRecords} Records` : ''}
+
+ );
+});
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/index.js b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/index.js
new file mode 100644
index 0000000000..467bde3164
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/index.js
@@ -0,0 +1 @@
+export { Footer as default } from './Footer';
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/Header.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/Header.jsx
new file mode 100644
index 0000000000..9e9a6f656f
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/Header.jsx
@@ -0,0 +1,125 @@
+import React, { useState, memo } from 'react';
+import { Tooltip } from 'react-tooltip';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+// Store files
+import useTableStore from '../../_stores/tableStore';
+import { shallow } from 'zustand/shallow';
+// Local Components
+import { SearchBar } from './_components/SearchBar';
+import Loader from '../Loader';
+import { Filter } from './_components/Filter/Filter';
+
+export const Header = memo(
+ ({
+ id,
+ darkMode,
+ fireEvent,
+ setExposedVariables,
+ setGlobalFilter,
+ globalFilter,
+ table,
+ setFilters,
+ appliedFiltersLength,
+ }) => {
+ const displaySearchBox = useTableStore((state) => state.getTableProperties(id)?.displaySearchBox, shallow);
+ const showFilterButton = useTableStore((state) => state.getTableProperties(id)?.showFilterButton, shallow);
+
+ const loadingState = useTableStore((state) => state.getLoadingState(id), shallow);
+ const headerVisibility = useTableStore((state) => state.getHeaderVisibility(id), shallow);
+
+ const appliedFilters = table.getState().columnFilters;
+
+ const [showFilter, setShowFilter] = useState(false);
+
+ // Hide header if the properties are not enabled
+ if (!headerVisibility) return null;
+
+ // Loading state for header
+ if (loadingState) {
+ return (
+
+
+ );
+ }
+
+ const renderFilter = () => {
+ return (
+
+
+
+ {
+ if (showFilter) {
+ setShowFilter(false);
+ if (document.activeElement === e.currentTarget) {
+ e.currentTarget.blur();
+ }
+ } else {
+ setShowFilter(true);
+ }
+ }}
+ size="md"
+ data-tooltip-id="tooltip-for-filter-data"
+ data-tooltip-content="Filter data"
+ >
+ {appliedFiltersLength > 0 && (
+
+ );
+ };
+
+ const renderSearchBox = () => (
+
+
+
+ )}
+
+
+ {showFilter && (
+ {showFilterButton && renderFilter()}
+
+ {displaySearchBox && renderSearchBox()}
+
+
+
+ );
+});
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/FilterFooter.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/FilterFooter.jsx
new file mode 100644
index 0000000000..cbdbb62dc2
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/FilterFooter.jsx
@@ -0,0 +1,30 @@
+import React, { memo } from 'react';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+
+export const FilterFooter = memo(({ addFilter, clearFilters }) => {
+ return (
+
+ {localFilters.map((filter, index) => (
+
+
+
+ no filters yet.
+
+
+ )}
+
+
+ + add filter
+
+
+
+ clear filters
+
+
+ );
+});
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/FilterHeader.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/FilterHeader.jsx
new file mode 100644
index 0000000000..18372739aa
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/FilterHeader.jsx
@@ -0,0 +1,24 @@
+import React, { memo } from 'react';
+
+export const FilterHeader = memo(({ setShowFilter }) => {
+ return (
+
+
+ );
+});
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/FilterRow.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/FilterRow.jsx
new file mode 100644
index 0000000000..1a3ad2b30d
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/FilterRow.jsx
@@ -0,0 +1,76 @@
+import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import Select from '@/_ui/Select';
+import defaultStyles from '@/_ui/Select/styles';
+import { FILTER_OPTIONS } from './filterConstants';
+
+export const FilterRow = memo(
+ ({ filter, index, columns, darkMode, onColumnChange, onOperationChange, onValueChange, onRemove }) => {
+ const { t } = useTranslation();
+
+ const selectStyles = (width) => {
+ return {
+ ...defaultStyles(darkMode, width),
+ menuPortal: (provided) => ({ ...provided, zIndex: 999 }),
+ menuList: (base) => ({
+ ...base,
+ }),
+ };
+ };
+
+ return (
+
+
+ + Filters +
+
+
+
+
+
+ );
+ }
+);
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/filterConstants.js b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/filterConstants.js
new file mode 100644
index 0000000000..a176ffee22
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/filterConstants.js
@@ -0,0 +1,14 @@
+export const FILTER_OPTIONS = [
+ { name: 'contains', value: 'contains' },
+ { name: 'does not contains', value: 'doesNotContains' },
+ { name: 'matches', value: 'matches' },
+ { name: 'does not match', value: 'nl' },
+ { name: 'equals', value: 'equals' },
+ { name: 'does not equal', value: 'ne' },
+ { name: 'is empty', value: 'isEmpty' },
+ { name: 'is not empty', value: 'isNotEmpty' },
+ { name: 'greater than', value: 'gt' },
+ { name: 'less than', value: 'lt' },
+ { name: 'greater than or equals', value: 'gte' },
+ { name: 'less than or equals', value: 'lte' },
+];
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/filterUtils.js b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/filterUtils.js
new file mode 100644
index 0000000000..cd85a63795
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/filterUtils.js
@@ -0,0 +1,110 @@
+// eslint-disable-next-line import/no-unresolved
+import { diff as deepDiff } from 'deep-object-diff';
+
+export const filterFunctions = {
+ contains: (row, columnId, filterValue) => {
+ const value = String(row.getValue(columnId) || '').toLowerCase();
+ return value.includes(String(filterValue.value || '').toLowerCase());
+ },
+ doesNotContains: (row, columnId, filterValue) => {
+ const value = String(row.getValue(columnId) || '').toLowerCase();
+ return !value.includes(String(filterValue.value || '').toLowerCase());
+ },
+ matches: (row, columnId, filterValue) => {
+ const value = String(row.getValue(columnId) || '');
+ try {
+ const regex = new RegExp(filterValue.value);
+ return regex.test(value);
+ } catch (e) {
+ return false;
+ }
+ },
+ nl: (row, columnId, filterValue) => {
+ const value = String(row.getValue(columnId) || '');
+ try {
+ const regex = new RegExp(filterValue.value);
+ return !regex.test(value);
+ } catch (e) {
+ return false;
+ }
+ },
+ equals: (row, columnId, filterValue) => {
+ const value = String(row.getValue(columnId) || '').toLowerCase();
+ return value === String(filterValue.value || '').toLowerCase();
+ },
+ ne: (row, columnId, filterValue) => {
+ const value = String(row.getValue(columnId) || '').toLowerCase();
+ return value !== String(filterValue.value || '').toLowerCase();
+ },
+ isEmpty: (row, columnId) => {
+ const value = row.getValue(columnId);
+ return !value || value.length === 0;
+ },
+ isNotEmpty: (row, columnId) => {
+ const value = row.getValue(columnId);
+ return value && value.length > 0;
+ },
+ gt: (row, columnId, filterValue) => {
+ const value = row.getValue(columnId);
+ return Number(value) > Number(filterValue.value);
+ },
+ lt: (row, columnId, filterValue) => {
+ const value = row.getValue(columnId);
+ return Number(value) < Number(filterValue.value);
+ },
+ gte: (row, columnId, filterValue) => {
+ const value = row.getValue(columnId);
+ return Number(value) >= Number(filterValue.value);
+ },
+ lte: (row, columnId, filterValue) => {
+ const value = row.getValue(columnId);
+ return Number(value) <= Number(filterValue.value);
+ },
+};
+
+export const findFilterDiff = (oldFilters, newFilters) => {
+ const filterDiff = deepDiff(oldFilters, newFilters);
+
+ const getType = (obj) => {
+ if (!obj?.column && !obj?.condition) return 'value';
+ if (obj?.column) return 'column';
+ if (obj?.condition) return 'condition';
+ };
+
+ const diff = Object.entries(filterDiff).reduce((acc, [key, value]) => {
+ const type = getType(value?.value);
+ return { ...acc, keyIndex: key, type: type, diff: value?.value?.[type] };
+ }, {});
+
+ return shouldFireEvent(diff, newFilters);
+};
+
+const shouldFireEvent = (diff, filter) => {
+ if (!diff || !filter) return false;
+
+ const forEmptyOperationAndNotEmptyOperation = (condition) => {
+ if (condition !== 'isEmpty' || condition !== 'isNotEmpty') {
+ return filter[diff.keyIndex]?.value?.column ? true : false;
+ }
+ return filter[diff.keyIndex]?.value?.value && filter[diff.keyIndex]?.value?.column ? true : false;
+ };
+
+ switch (diff.type) {
+ case 'value':
+ return filter[diff.keyIndex]?.value?.column && filter[diff.keyIndex]?.value?.condition ? true : false;
+ case 'column':
+ return filter[diff.keyIndex]?.value?.value && filter[diff.keyIndex]?.value?.condition ? true : false;
+ case 'condition':
+ return forEmptyOperationAndNotEmptyOperation(filter[diff.keyIndex]?.value?.condition);
+ default:
+ return false;
+ }
+};
+
+export const applyFilters = (row, columnId, columnFilters) =>
+ columnFilters.every((filter) => {
+ const { value, condition } = filter.value;
+ const filterFn = filterFunctions[condition];
+ const result = filterFn(row, columnId, { value });
+ return result;
+ });
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/SearchBar.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/SearchBar.jsx
new file mode 100644
index 0000000000..8a4945f808
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/SearchBar.jsx
@@ -0,0 +1,51 @@
+import React, { useMemo, useState, memo } from 'react';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import { debounce } from 'lodash';
+
+// Table Search
+export const SearchBar = memo(({ globalFilter = '', setGlobalFilter }) => {
+ const [value, setValue] = useState(globalFilter);
+
+ const onChange = (filterValue) => {
+ setGlobalFilter(filterValue || undefined);
+ };
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ const debouncedChange = useMemo(() => debounce(onChange, 500), []);
+
+ return (
+
+ {index > 0 ? 'and' : 'column'}
+
+
+
+
+
+
+ {!['isEmpty', 'isNotEmpty'].includes(filter.value.condition) && (
+ onValueChange(index, e.target.value)}
+ />
+ )}
+
+
+
+
+
+
+ );
+});
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/index.js b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/index.js
new file mode 100644
index 0000000000..a70ad39d09
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/index.js
@@ -0,0 +1 @@
+export { Header as default } from './Header';
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/HighLightSearch/HighLightSearch.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/HighLightSearch/HighLightSearch.jsx
new file mode 100644
index 0000000000..af44ba429b
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/HighLightSearch/HighLightSearch.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+export const HighLightSearch = React.memo(({ text, searchTerm }) => {
+ if (text === '') return null;
+
+ if (searchTerm === '' || !text.toString()?.toLowerCase().includes(searchTerm?.toLowerCase()))
+ return {text};
+
+ const parts = String(text).split(new RegExp(`(${searchTerm})`, 'gi'));
+
+ return (
+
+ {parts.map((part, index) =>
+ part?.toLowerCase() === searchTerm?.toLowerCase() ? (
+
+ {part}
+
+ ) : (
+ part
+ )
+ )}
+
+ );
+});
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/HighLightSearch/index.js b/frontend/src/AppBuilder/Widgets/NewTable/_components/HighLightSearch/index.js
new file mode 100644
index 0000000000..06aa5a2c33
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/HighLightSearch/index.js
@@ -0,0 +1 @@
+export { HighLightSearch as default } from './HighLightSearch';
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/IndeterminateCheckbox/IndeterminateCheckbox.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/IndeterminateCheckbox/IndeterminateCheckbox.jsx
new file mode 100644
index 0000000000..5c2df369da
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/IndeterminateCheckbox/IndeterminateCheckbox.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+export const IndeterminateCheckbox = React.forwardRef(({ indeterminate, fireEvent, isCell = false, ...rest }, ref) => {
+ const defaultRef = React.useRef();
+ const resolvedRef = ref || defaultRef;
+
+ React.useEffect(() => {
+ resolvedRef.current.indeterminate = indeterminate;
+ }, [resolvedRef, indeterminate]);
+
+ return (
+
+
+ {
+ // setGlobalFilter(undefined);
+ setValue('');
+ debouncedChange('');
+ }}
+ >
+
+
+ {
+ if (fireEvent) {
+ //! This is a hack to make sure the event is fired after exposed values are updated
+ setTimeout(() => {
+ fireEvent('onRowClicked');
+ }, 0);
+ }
+ }}
+ {...rest}
+ style={{
+ width: 16,
+ height: 16,
+ }}
+ onMouseDown={(e) => e.preventDefault()}
+ />
+
+ );
+});
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/IndeterminateCheckbox/index.js b/frontend/src/AppBuilder/Widgets/NewTable/_components/IndeterminateCheckbox/index.js
new file mode 100644
index 0000000000..0ae23da5cc
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/IndeterminateCheckbox/index.js
@@ -0,0 +1 @@
+export { IndeterminateCheckbox as default } from './IndeterminateCheckbox';
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Loader/Loader.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Loader/Loader.jsx
new file mode 100644
index 0000000000..e2ef0cbbae
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Loader/Loader.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+
+export const Loader = React.memo(({ width, height }) => (
+
+ {renderTableHeader()}
+
+ );
+ } else if (data.length === 0) {
+ return (
+
+ {renderTableHeader()}
+
+ );
+ }
+
+ return (
+
+
+ {renderTableHeader()}
+
+ {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+ const row = table.getRowModel().rows[virtualRow.index];
+ return (
+
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/EmptyState.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/EmptyState.jsx
new file mode 100644
index 0000000000..81df598627
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/EmptyState.jsx
@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+
+export const EmptyState = memo(() => {
+ return (
+
+
+ );
+});
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/LoadingState.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/LoadingState.jsx
new file mode 100644
index 0000000000..b3acead0cc
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/LoadingState.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+export const LoadingState = React.memo(() => {
+ return (
+
+
+
+
+ No data
+
+
+ );
+});
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableHeader.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableHeader.jsx
new file mode 100644
index 0000000000..67240c5887
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableHeader.jsx
@@ -0,0 +1,167 @@
+import React from 'react';
+import cx from 'classnames';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import Loader from '../../Loader';
+import useTableStore from '../../../_stores/tableStore';
+import { flexRender } from '@tanstack/react-table';
+import { DndContext, useSensor, useSensors, PointerSensor, closestCenter } from '@dnd-kit/core';
+import { SortableContext, horizontalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import useStore from '@/AppBuilder/_stores/store';
+import { determineJustifyContentValue } from '@/_helpers/utils';
+import { shallow } from 'zustand/shallow';
+
+const DraggableHeader = ({ header, darkMode, id }) => {
+ const { attributes, listeners, setNodeRef, transform, isDragging, setActivatorNodeRef } = useSortable({
+ id: header.id,
+ });
+
+ const columnHeaderWrap = useTableStore((state) => state.getTableStyles(id)?.columnHeaderWrap, shallow);
+ const headerCasing = useTableStore((state) => state.getTableStyles(id)?.headerCasing, shallow);
+
+ const getResolvedValue = useStore.getState().getResolvedValue;
+
+ const column = header.column.columnDef.meta;
+ const isEditable = getResolvedValue(column.isEditable);
+
+ const style = {
+ opacity: isDragging ? 0.8 : 1,
+ position: 'relative',
+ transform: CSS.Translate.toString(transform),
+ transition: 'width transform 0.2s ease-in-out',
+ whiteSpace: 'nowrap',
+ width: header.column.getSize(),
+ zIndex: isDragging ? 1 : 0,
+ };
+
+ return (
+
+
+
+ header.column.toggleSorting() : undefined}
+ style={{ cursor: header.column.getCanSort() ? 'pointer' : 'default', width: '100%' }}
+ >
+
+ {header.column.getCanResize() && (
+
+
+ {header.column.getIsSorted() && (
+
+ {column.columnType !== 'selector' && column.columnType !== 'image' && isEditable && (
+
+
+ {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+
+
+
+ )}
+
+
+
+ )}
+
+
+ );
+ }
+
+ return (
+
+
+ {flexRender(cell.column?.columnDef?.cell, cell.getContext())}
+
+
+
+ );
+
+ useEffect(() => {
+ if (isNaN(inputLogic.value) || inputLogic.value === '') {
+ props.setExposedVariable('value', null);
+ }
+ }, [inputLogic.value]);
+
+ return (
+
+ 0 && props.styles.width > 0
+ ? '21px'
+ : '1px',
+ right: '1px',
+ borderLeft:
+ inputLogic.disable || inputLogic.loading
+ ? '1px solid var(--borders-weak-disabled)'
+ : '1px solid var(--borders-default)',
+ borderBottom:
+ inputLogic.disable || inputLogic.loading
+ ? '1px solid var(--borders-weak-disabled)'
+ : '.5px solid var(--borders-default)',
+ borderTopRightRadius: props.styles.borderRadius - 1,
+ backgroundColor: 'transparent',
+ }}
+ className="numberinput-up-arrow arrow number-input-arrow"
+ name="TriangleDownCenter"
+ />
+
+
+
+
+
+ );
+
+ return (
+ {
+ if (disabledState || !isCountryChangeEnabled) return;
+ setMenuIsOpen((prev) => !prev);
+ }}
+ ref={dropdownRef}
+ >
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CurrencyInput.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CurrencyInput.jsx
new file mode 100644
index 0000000000..786299fc3a
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CurrencyInput.jsx
@@ -0,0 +1,266 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { default as ReactCurrencyInput } from 'react-currency-input-field';
+import { useInput } from '../BaseComponents/hooks/useInput';
+import Loader from '@/ToolJetUI/Loader/Loader';
+import Label from '@/_ui/Label';
+import { CountrySelect } from './CountrySelect';
+import { CurrencyMap } from './constants';
+const tinycolor = require('tinycolor2');
+
+export const CurrencyInput = (props) => {
+ const { properties, styles, componentName, darkMode, setExposedVariables, fireEvent } = props;
+ const transformedProps = {
+ ...props,
+ inputType: 'currency',
+ };
+ const inputLogic = useInput(transformedProps);
+
+ const {
+ inputRef,
+ labelRef,
+ visibility,
+ loading,
+ disable,
+ showValidationError,
+ handlePhoneCurrencyInputChange,
+ isFocused,
+ labelWidth,
+ isValid,
+ validationError,
+ isMandatory,
+ handleBlur,
+ handleFocus,
+ value,
+ country,
+ setCountry,
+ } = inputLogic;
+ const { label, placeholder, decimalPlaces, isCountryChangeEnabled, defaultCountry = 'US' } = properties;
+
+ const handleKeyUp = (e) => {
+ if (e.key === 'Enter') {
+ fireEvent('onEnterPressed');
+ }
+ };
+
+ const options = useMemo(() => {
+ return Object.keys(CurrencyMap).map((ele) => ({
+ label: `${CurrencyMap[ele].prefix} (${CurrencyMap[ele].currency})`,
+ value: ele,
+ country: CurrencyMap[ele].country,
+ }));
+ }, []);
+
+ const onInputValueChange = (value) => {
+ handlePhoneCurrencyInputChange(value);
+ setExposedVariables({
+ country: country,
+ formattedValue: `${CurrencyMap[country]?.prefix} ${inputRef.current?.value}`,
+ });
+ };
+
+ const {
+ textColor,
+ backgroundColor,
+ alignment,
+ width,
+ direction,
+ auto,
+ color,
+ borderColor,
+ accentColor,
+ errTextColor,
+ boxShadow,
+ borderRadius,
+ } = styles;
+ const _width = (width / 100) * 70;
+ const defaultAlignment = alignment === 'side' || alignment === 'top' ? alignment : 'side';
+ const disabledState = disable || loading;
+ const isInitialRender = useRef(true);
+ const computedStyles = {
+ height: '100%',
+ borderRadius: `${borderRadius}px`,
+ color: !['#1B1F24', '#000', '#000000ff'].includes(textColor)
+ ? textColor
+ : disabledState
+ ? 'var(--text-disabled)'
+ : 'var(--text-primary)',
+ borderColor: isFocused
+ ? accentColor != '4368E3'
+ ? accentColor
+ : 'var(--primary-accent-strong)'
+ : borderColor != '#CCD1D5'
+ ? borderColor
+ : disabledState
+ ? '1px solid var(--borders-disabled-on-white)'
+ : 'var(--borders-default)',
+ '--tblr-input-border-color-darker': tinycolor(borderColor).darken(24).toString(),
+ backgroundColor:
+ backgroundColor != '#fff'
+ ? backgroundColor
+ : disabledState
+ ? darkMode
+ ? 'var(--surfaces-app-bg-default)'
+ : 'var(--surfaces-surface-03)'
+ : 'var(--surfaces-surface-01)',
+ padding: '8px 10px',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ borderBottomLeftRadius: '0px',
+ borderTopLeftRadius: '0px',
+ borderLeft: 'none',
+ };
+
+ const loaderStyle = {
+ right:
+ direction === 'right' &&
+ defaultAlignment === 'side' &&
+ ((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0))
+ ? `${labelWidth + 11}px`
+ : '11px',
+ top:
+ defaultAlignment === 'top'
+ ? ((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0)) &&
+ 'calc(50% + 10px)'
+ : '',
+ transform:
+ defaultAlignment === 'top' &&
+ ((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0)) &&
+ ' translateY(-50%)',
+ zIndex: 3,
+ };
+
+ useEffect(() => {
+ if (!isInitialRender.current) {
+ setCountry(defaultCountry);
+ }
+ }, [defaultCountry]);
+
+ useEffect(() => {
+ if (!isInitialRender.current) {
+ setExposedVariables({
+ country: country,
+ formattedValue: `${CurrencyMap[country]?.prefix} ${value}`,
+ });
+ }
+ }, [country]);
+
+ useEffect(() => {
+ if (isInitialRender.current) {
+ setExposedVariables({
+ country: country,
+ formattedValue: `${CurrencyMap[country]?.prefix} ${value}`,
+ value: value,
+ setCountryCode: (code) => {
+ setCountry(code);
+ },
+ });
+ isInitialRender.current = false;
+ }
+ }, []);
+
+ return (
+ <>
+
+
+
+ {showValidationError && visibility && (
+
+ {
+ return (
+ option.label.toLowerCase().includes(inputValue.toLowerCase()) ||
+ option.data.country.toLowerCase().includes(inputValue.toLowerCase())
+ );
+ }}
+ computedStyles={computedStyles}
+ showValidationError={showValidationError}
+ darkMode={darkMode}
+ isCurrencyInput={true}
+ onChange={(selectedOption) => {
+ if (selectedOption) {
+ setCountry(selectedOption.value);
+ fireEvent('onChange');
+ setExposedVariables({
+ country: selectedOption.value,
+ formattedValue: `${CurrencyMap[selectedOption.value]?.prefix} ${selectedOption.value}`,
+ });
+ }
+ }}
+ />
+ {
+ if (newVal === value) return;
+ onInputValueChange(newVal);
+ }}
+ // prefix={`${CurrencyMap?.[country]?.prefix || ''} `}
+ prefix={''}
+ disabled={disabledState}
+ onBlur={handleBlur}
+ onFocus={handleFocus}
+ onKeyUp={handleKeyUp}
+ />
+
+ {loading &&
+ {validationError}
+
+ )}
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomMenuList.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomMenuList.jsx
new file mode 100644
index 0000000000..cff9f4fd9f
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomMenuList.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { components } from 'react-select';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import cx from 'classnames';
+
+export const CustomMenuList = (props) => {
+ const { children, selectProps } = props;
+ const { onInputChange, inputValue } = selectProps;
+
+ return (
+ e.stopPropagation()}
+ >
+
+ {children?.length > 0 ? children :
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomOption.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomOption.jsx
new file mode 100644
index 0000000000..a8dff94bed
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomOption.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { components } from 'react-select';
+// eslint-disable-next-line import/no-unresolved
+import flags from 'react-phone-number-input/flags';
+import TickV3 from '@/_ui/Icon/solidIcons/TickV3';
+
+export const CustomOption = (props) => {
+ const { label, value: optionValue, isSelected } = props;
+ const { darkMode } = props?.selectProps || {};
+
+ const optionStyle = {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'start',
+ minHeight: '32px',
+ gap: '6px',
+ cursor: 'pointer',
+ fontFamily: 'IBM Plex Sans',
+ fontSize: '12px',
+ lineHeight: '18px',
+ fontWeight: '400',
+ color: darkMode ? '#fff' : '#1B1F24',
+ width: '100%',
+ };
+ const FlagIcon = flags[optionValue];
+
+ return (
+
+
+
+
+ No options
}
+
+
+ {FlagIcon ?
+ {label}
+
+
+
+ <>
+
+ ) : (
+
+
+ )}
+
+
+
+ {showValidationError && visibility && (
+
+ {
+ if (selectedOption) {
+ setCountry(selectedOption.value);
+ }
+ }}
+ />
+
+
+ {loading &&
+ {validationError}
+
+ )}
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/constants.js b/frontend/src/AppBuilder/Widgets/PhoneCurrency/constants.js
new file mode 100644
index 0000000000..d27c7665a8
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/constants.js
@@ -0,0 +1,597 @@
+export const CurrencyMap = {
+ AE: {
+ currency: 'AED',
+ prefix: 'د.إ.',
+ country: 'United Arab Emirates',
+ },
+ AF: {
+ currency: 'AFN',
+ prefix: '؋',
+ country: 'Afghanistan',
+ },
+ AL: {
+ currency: 'ALL',
+ prefix: 'Lek',
+ country: 'Albania',
+ },
+ AM: {
+ currency: 'AMD',
+ prefix: 'դր.',
+ country: 'Armenia',
+ },
+ AR: {
+ currency: 'ARS',
+ prefix: '$',
+ country: 'Argentina',
+ },
+ AU: {
+ currency: 'AUD',
+ prefix: '$',
+ country: 'Australia',
+ },
+ AZ: {
+ currency: 'AZN',
+ prefix: 'ман.',
+ country: 'Azerbaijan',
+ },
+ BA: {
+ currency: 'BAM',
+ prefix: 'KM',
+ country: 'Bosnia and Herzegovina',
+ },
+ BD: {
+ currency: 'BDT',
+ prefix: '৳',
+ country: 'Bangladesh',
+ },
+ BG: {
+ currency: 'BGN',
+ prefix: 'лв.',
+ country: 'Bulgaria',
+ },
+ BH: {
+ currency: 'BHD',
+ prefix: 'د.ب.',
+ country: 'Bahrain',
+ },
+ BI: {
+ currency: 'BIF',
+ prefix: 'FBu',
+ country: 'Burundi',
+ },
+ BN: {
+ currency: 'BND',
+ prefix: '$',
+ country: 'Brunei Darussalam',
+ },
+ BO: {
+ currency: 'BOB',
+ prefix: 'Bs',
+ country: 'Bolivia',
+ },
+ BR: {
+ currency: 'BRL',
+ prefix: 'R$',
+ country: 'Brazil',
+ },
+ BV: {
+ currency: 'NOK',
+ prefix: 'kr',
+ country: 'Bouvet Island',
+ },
+ BW: {
+ currency: 'BWP',
+ prefix: 'P',
+ country: 'Botswana',
+ },
+ BY: {
+ currency: 'BYR',
+ prefix: 'BYR',
+ country: 'Belarus',
+ },
+ BZ: {
+ currency: 'BZD',
+ prefix: '$',
+ country: 'Belize',
+ },
+ CA: {
+ currency: 'CAD',
+ prefix: '$',
+ country: 'Canada',
+ },
+ CD: {
+ currency: 'CDF',
+ prefix: 'FrCD',
+ country: 'Congo, Democratic Republic of the',
+ },
+ CF: {
+ currency: 'XAF',
+ prefix: 'FCFA',
+ country: 'Central African Republic',
+ },
+ CH: {
+ currency: 'CHF',
+ prefix: 'CHF',
+ country: 'Switzerland',
+ },
+ CL: {
+ currency: 'CLP',
+ prefix: '$',
+ country: 'Chile',
+ },
+ CN: {
+ currency: 'CNY',
+ prefix: 'CN¥',
+ country: 'China',
+ },
+ CO: {
+ currency: 'COP',
+ prefix: '$',
+ country: 'Colombia',
+ },
+ CR: {
+ currency: 'CRC',
+ prefix: '₡',
+ country: 'Costa Rica',
+ },
+ CV: {
+ currency: 'CVE',
+ prefix: 'CV$',
+ country: 'Cape Verde',
+ },
+ CZ: {
+ currency: 'CZK',
+ prefix: 'Kč',
+ country: 'Czech Republic',
+ },
+ DJ: {
+ currency: 'DJF',
+ prefix: 'Fdj',
+ country: 'Djibouti',
+ },
+ DK: {
+ currency: 'DKK',
+ prefix: 'kr',
+ country: 'Denmark',
+ },
+ DO: {
+ currency: 'DOP',
+ prefix: 'RD$',
+ country: 'Dominican Republic',
+ },
+ DZ: {
+ currency: 'DZD',
+ prefix: 'د.ج.',
+ country: 'Algeria',
+ },
+ EG: {
+ currency: 'EGP',
+ prefix: 'ج.م.',
+ country: 'Egypt',
+ },
+ ER: {
+ currency: 'ERN',
+ prefix: 'Nfk',
+ country: 'Eritrea',
+ },
+ EU: {
+ currency: 'EUR',
+ prefix: '€',
+ country: 'European Union',
+ },
+ ET: {
+ currency: 'ETB',
+ prefix: 'Br',
+ country: 'Ethiopia',
+ },
+ GB: {
+ currency: 'GBP',
+ prefix: '£',
+ country: 'United Kingdom',
+ },
+ GE: {
+ currency: 'GEL',
+ prefix: 'GEL',
+ country: 'Georgia',
+ },
+ GH: {
+ currency: 'GHS',
+ prefix: 'GH₵',
+ country: 'Ghana',
+ },
+ GN: {
+ currency: 'GNF',
+ prefix: 'FG',
+ country: 'Guinea',
+ },
+ GT: {
+ currency: 'GTQ',
+ prefix: 'Q',
+ country: 'Guatemala',
+ },
+ HK: {
+ currency: 'HKD',
+ prefix: '$',
+ country: 'Hong Kong',
+ },
+ HN: {
+ currency: 'HNL',
+ prefix: 'L',
+ country: 'Honduras',
+ },
+ HR: {
+ currency: 'HRK',
+ prefix: 'kn',
+ country: 'Croatia',
+ },
+ HU: {
+ currency: 'HUF',
+ prefix: 'Ft',
+ country: 'Hungary',
+ },
+ ID: {
+ currency: 'IDR',
+ prefix: 'Rp',
+ country: 'Indonesia',
+ },
+ IL: {
+ currency: 'ILS',
+ prefix: '₪',
+ country: 'Israel',
+ },
+ IN: {
+ currency: 'INR',
+ prefix: '₹',
+ country: 'India',
+ },
+ IQ: {
+ currency: 'IQD',
+ prefix: 'د.ع.',
+ country: 'Iraq',
+ },
+ IR: {
+ currency: 'IRR',
+ prefix: '﷼',
+ country: 'Iran, Islamic Republic of',
+ },
+ IS: {
+ currency: 'ISK',
+ prefix: 'kr',
+ country: 'Iceland',
+ },
+ JM: {
+ currency: 'JMD',
+ prefix: '$',
+ country: 'Jamaica',
+ },
+ JO: {
+ currency: 'JOD',
+ prefix: 'د.أ.',
+ country: 'Jordan',
+ },
+ JP: {
+ currency: 'JPY',
+ prefix: '￥',
+ country: 'Japan',
+ },
+ KE: {
+ currency: 'KES',
+ prefix: 'Ksh',
+ country: 'Kenya',
+ },
+ KH: {
+ currency: 'KHR',
+ prefix: '៛',
+ country: 'Cambodia',
+ },
+ KM: {
+ currency: 'KMF',
+ prefix: 'FC',
+ country: 'Comoros',
+ },
+ KR: {
+ currency: 'KRW',
+ prefix: '₩',
+ country: 'Korea, Republic of',
+ },
+ KW: {
+ currency: 'KWD',
+ prefix: 'د.ك.',
+ country: 'Kuwait',
+ },
+ KZ: {
+ currency: 'KZT',
+ prefix: 'тңг.',
+ country: 'Kazakhstan',
+ },
+ LB: {
+ currency: 'LBP',
+ prefix: 'ل.ل.',
+ country: 'Lebanon',
+ },
+ LK: {
+ currency: 'LKR',
+ prefix: 'SL Re',
+ country: 'Sri Lanka',
+ },
+ LT: {
+ currency: 'LTL',
+ prefix: 'Lt',
+ country: 'Lithuania',
+ },
+ LY: {
+ currency: 'LYD',
+ prefix: 'د.ل.',
+ country: 'Libya',
+ },
+ MA: {
+ currency: 'MAD',
+ prefix: 'د.م.',
+ country: 'Morocco',
+ },
+ MD: {
+ currency: 'MDL',
+ prefix: 'MDL',
+ country: 'Moldova, Republic of',
+ },
+ MG: {
+ currency: 'MGA',
+ prefix: 'MGA',
+ country: 'Madagascar',
+ },
+ MK: {
+ currency: 'MKD',
+ prefix: 'MKD',
+ country: 'Macedonia, the Former Yugoslav Republic of',
+ },
+ MM: {
+ currency: 'MMK',
+ prefix: 'K',
+ country: 'Myanmar',
+ },
+ MO: {
+ currency: 'MOP',
+ prefix: 'MOP$',
+ country: 'Macao',
+ },
+ MU: {
+ currency: 'MUR',
+ prefix: 'MURs',
+ country: 'Mauritius',
+ },
+ MX: {
+ currency: 'MXN',
+ prefix: '$',
+ country: 'Mexico',
+ },
+ MY: {
+ currency: 'MYR',
+ prefix: 'RM',
+ country: 'Malaysia',
+ },
+ MZ: {
+ currency: 'MZN',
+ prefix: 'MTn',
+ country: 'Mozambique',
+ },
+ NA: {
+ currency: 'NAD',
+ prefix: 'N$',
+ country: 'Namibia',
+ },
+ NG: {
+ currency: 'NGN',
+ prefix: '₦',
+ country: 'Nigeria',
+ },
+ NI: {
+ currency: 'NIO',
+ prefix: 'C$',
+ country: 'Nicaragua',
+ },
+ NO: {
+ currency: 'NOK',
+ prefix: 'kr',
+ country: 'Norway',
+ },
+ NP: {
+ currency: 'NPR',
+ prefix: 'नेरू',
+ country: 'Nepal',
+ },
+ NZ: {
+ currency: 'NZD',
+ prefix: '$',
+ country: 'New Zealand',
+ },
+ OM: {
+ currency: 'OMR',
+ prefix: 'ر.ع.',
+ country: 'Oman',
+ },
+ PA: {
+ currency: 'PAB',
+ prefix: 'B/.',
+ country: 'Panama',
+ },
+ PE: {
+ currency: 'PEN',
+ prefix: 'S/.',
+ country: 'Peru',
+ },
+ PH: {
+ currency: 'PHP',
+ prefix: '₱',
+ country: 'Philippines',
+ },
+ PK: {
+ currency: 'PKR',
+ prefix: '₨',
+ country: 'Pakistan',
+ },
+ PL: {
+ currency: 'PLN',
+ prefix: 'zł',
+ country: 'Poland',
+ },
+ PY: {
+ currency: 'PYG',
+ prefix: '₲',
+ country: 'Paraguay',
+ },
+ QA: {
+ currency: 'QAR',
+ prefix: 'ر.ق.',
+ country: 'Qatar',
+ },
+ RO: {
+ currency: 'RON',
+ prefix: 'RON',
+ country: 'Romania',
+ },
+ RS: {
+ currency: 'RSD',
+ prefix: 'дин.',
+ country: 'Serbia',
+ },
+ RU: {
+ currency: 'RUB',
+ prefix: '₽',
+ country: 'Russian Federation',
+ },
+ RW: {
+ currency: 'RWF',
+ prefix: 'FR',
+ country: 'Rwanda',
+ },
+ SA: {
+ currency: 'SAR',
+ prefix: 'ر.س.',
+ country: 'Saudi Arabia',
+ },
+ SD: {
+ currency: 'SDG',
+ prefix: 'SDG',
+ country: 'Sudan',
+ },
+ SE: {
+ currency: 'SEK',
+ prefix: 'kr',
+ country: 'Sweden',
+ },
+ SG: {
+ currency: 'SGD',
+ prefix: '$',
+ country: 'Singapore',
+ },
+ SJ: {
+ currency: 'NOK',
+ prefix: 'kr',
+ country: 'Svalbard and Jan Mayen',
+ },
+ SN: {
+ currency: 'XOF',
+ prefix: 'CFA',
+ country: 'Senegal',
+ },
+ SO: {
+ currency: 'SOS',
+ prefix: 'Ssh',
+ country: 'Somalia',
+ },
+ SY: {
+ currency: 'SYP',
+ prefix: 'ل.س.',
+ country: 'Syrian Arab Republic',
+ },
+ TH: {
+ currency: 'THB',
+ prefix: '฿',
+ country: 'Thailand',
+ },
+ TN: {
+ currency: 'TND',
+ prefix: 'د.ت.',
+ country: 'Tunisia',
+ },
+ TO: {
+ currency: 'TOP',
+ prefix: 'T$',
+ country: 'Tonga',
+ },
+ TR: {
+ currency: 'TRY',
+ prefix: 'TL',
+ country: 'Turkey',
+ },
+ TT: {
+ currency: 'TTD',
+ prefix: '$',
+ country: 'Trinidad and Tobago',
+ },
+ TW: {
+ currency: 'TWD',
+ prefix: 'NT$',
+ country: 'Taiwan, Province of China',
+ },
+ TZ: {
+ currency: 'TZS',
+ prefix: 'TSh',
+ country: 'United Republic of Tanzania',
+ },
+ UA: {
+ currency: 'UAH',
+ prefix: '₴',
+ country: 'Ukraine',
+ },
+ UG: {
+ currency: 'UGX',
+ prefix: 'USh',
+ country: 'Uganda',
+ },
+ US: {
+ currency: 'USD',
+ prefix: '$',
+ country: 'United States',
+ },
+ UY: {
+ currency: 'UYU',
+ prefix: '$',
+ country: 'Uruguay',
+ },
+ UZ: {
+ currency: 'UZS',
+ prefix: 'UZS',
+ country: 'Uzbekistan',
+ },
+ VE: {
+ currency: 'VEF',
+ prefix: 'Bs.F.',
+ country: 'Venezuela',
+ },
+ VN: {
+ currency: 'VND',
+ prefix: '₫',
+ country: 'Vietnam',
+ },
+ VU: {
+ currency: 'VUV',
+ prefix: 'VT',
+ country: 'Vanuatu',
+ },
+ YE: {
+ currency: 'YER',
+ prefix: 'ر.ي.',
+ country: 'Yemen',
+ },
+ ZA: {
+ currency: 'ZAR',
+ prefix: 'R',
+ country: 'South Africa',
+ },
+ ZM: {
+ currency: 'ZMK',
+ prefix: 'ZK',
+ country: 'Zambia',
+ },
+};
diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/utils.js b/frontend/src/AppBuilder/Widgets/PhoneCurrency/utils.js
new file mode 100644
index 0000000000..9a23b45ca5
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/utils.js
@@ -0,0 +1,10 @@
+// eslint-disable-next-line import/no-unresolved
+import { getCountryCallingCode } from 'react-phone-number-input/input';
+
+export const getCountryCallingCodeSafe = (country) => {
+ try {
+ return getCountryCallingCode(country);
+ } catch (error) {
+ return '';
+ }
+};
diff --git a/frontend/src/AppBuilder/Widgets/PhoneInput/PhoneInput.jsx b/frontend/src/AppBuilder/Widgets/PhoneInput/PhoneInput.jsx
new file mode 100644
index 0000000000..6a7dafceea
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/PhoneInput/PhoneInput.jsx
@@ -0,0 +1,256 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+// eslint-disable-next-line import/no-unresolved
+import Input, { getCountries, getCountryCallingCode } from 'react-phone-number-input/input';
+import { getCountryCallingCodeSafe } from './utils';
+// eslint-disable-next-line import/no-unresolved
+import en from 'react-phone-number-input/locale/en';
+import 'react-phone-number-input/style.css';
+import { useInput } from '../BaseComponents/hooks/useInput';
+import Loader from '@/ToolJetUI/Loader/Loader';
+import Label from '@/_ui/Label';
+import { CountrySelect } from './CountrySelect';
+
+const tinycolor = require('tinycolor2');
+
+export const PhoneInput = (props) => {
+ const { properties, styles, componentName, darkMode, setExposedVariables, fireEvent } = props;
+ const transformedProps = {
+ ...props,
+ inputType: 'phone',
+ };
+ const inputLogic = useInput(transformedProps);
+ const {
+ inputRef,
+ labelRef,
+ visibility,
+ loading,
+ disable,
+ showValidationError,
+ isFocused,
+ labelWidth,
+ isValid,
+ validationError,
+ isMandatory,
+ handleBlur,
+ handleFocus,
+ value,
+ handlePhoneInputChange,
+ country,
+ setCountry,
+ } = inputLogic;
+ const { label, placeholder, isCountryChangeEnabled, defaultCountry = 'US' } = properties;
+
+ const {
+ textColor,
+ backgroundColor,
+ alignment,
+ width,
+ direction,
+ auto,
+ color,
+ borderColor,
+ accentColor,
+ errTextColor,
+ boxShadow,
+ borderRadius,
+ } = styles;
+ const _width = (width / 100) * 70;
+ const defaultAlignment = alignment === 'side' || alignment === 'top' ? alignment : 'side';
+ const isInitialRender = useRef(true);
+
+ const options = useMemo(
+ () =>
+ getCountries()
+ .map((country) => ({
+ label: `${en[country]} +${getCountryCallingCodeSafe(country)}`,
+ value: country,
+ }))
+ .sort((a, b) => a.label.localeCompare(b.label)),
+ []
+ );
+
+ const onInputValueChange = (value) => {
+ setExposedVariables({
+ country: country,
+ countryCode: `+${getCountryCallingCodeSafe(country)}`,
+ formattedValue: `+${getCountryCallingCodeSafe(country)} ${inputRef.current?.value}`,
+ });
+ handlePhoneInputChange(value);
+ };
+
+ const handleKeyUp = (e) => {
+ if (e.key === 'Enter') {
+ fireEvent('onEnterPressed');
+ }
+ };
+
+ useEffect(() => {
+ if (isInitialRender.current) {
+ setExposedVariables({
+ country: country,
+ countryCode: `+${getCountryCallingCodeSafe(country)}`,
+ formattedValue: `+${getCountryCallingCodeSafe(country)} ${inputRef.current?.value}`,
+ value: value,
+ setCountryCode: (code) => {
+ let value = getCountryCallingCodeSafe(code);
+ if (value) {
+ setCountry(code);
+ } else {
+ value = getCountries().find((country) => `+${getCountryCallingCode(country)}` === code);
+ setCountry(value ? value : '');
+ }
+ },
+ });
+ isInitialRender.current = false;
+ }
+ }, []);
+
+ useEffect(() => {
+ if (!isInitialRender.current) {
+ setCountry(defaultCountry);
+ }
+ }, [defaultCountry]);
+
+ const disabledState = disable || loading;
+
+ const loaderStyle = {
+ right:
+ direction === 'right' &&
+ defaultAlignment === 'side' &&
+ ((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0))
+ ? `${labelWidth + 11}px`
+ : '11px',
+ top:
+ defaultAlignment === 'top'
+ ? ((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0)) &&
+ 'calc(50% + 10px)'
+ : '',
+ transform:
+ defaultAlignment === 'top' &&
+ ((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0)) &&
+ ' translateY(-50%)',
+ zIndex: 3,
+ };
+
+ const computedStyles = {
+ height: '100%',
+ borderRadius: `0px ${borderRadius}px ${borderRadius}px 0px`,
+ color: !['#1B1F24', '#000', '#000000ff'].includes(textColor)
+ ? textColor
+ : disabledState
+ ? 'var(--text-disabled)'
+ : 'var(--text-primary)',
+ borderColor: isFocused
+ ? accentColor != '4368E3'
+ ? accentColor
+ : 'var(--primary-accent-strong)'
+ : borderColor != '#CCD1D5'
+ ? borderColor
+ : disabledState
+ ? '1px solid var(--borders-disabled-on-white)'
+ : 'var(--borders-default)',
+ '--tblr-input-border-color-darker': tinycolor(borderColor).darken(24).toString(),
+ backgroundColor:
+ backgroundColor != '#fff'
+ ? backgroundColor
+ : disabledState
+ ? darkMode
+ ? 'var(--surfaces-app-bg-default)'
+ : 'var(--surfaces-surface-03)'
+ : 'var(--surfaces-surface-01)',
+ padding: '8px 10px',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ borderBottomLeftRadius: '0px',
+ borderTopLeftRadius: '0px',
+ borderLeft: 'none',
+ };
+ const countryCode = getCountryCallingCodeSafe(country);
+ console.log(countryCode);
+ return (
+ <>
+
+
+
+ {showValidationError && visibility && (
+
+ {
+ if (selectedOption) {
+ setCountry(selectedOption.value);
+ }
+ }}
+ />
+
+
+ {loading &&
+ {validationError}
+
+ )}
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/Table/String.jsx b/frontend/src/AppBuilder/Widgets/Table/String.jsx
index af593c0e5f..733c70953b 100644
--- a/frontend/src/AppBuilder/Widgets/Table/String.jsx
+++ b/frontend/src/AppBuilder/Widgets/Table/String.jsx
@@ -66,7 +66,6 @@ const StringColumn = ({
className={`${!isValid ? 'is-invalid' : ''} h-100 text-container long-text-input d-flex align-items-center ${
darkMode ? ' textarea-dark-theme' : ''
} justify-content-${determineJustifyContentValue(horizontalAlignment)}`}
- tabIndex={-1}
style={{
color: cellTextColor ? cellTextColor : 'inherit',
outline: 'none',
diff --git a/frontend/src/AppBuilder/Widgets/Table/columns/index.jsx b/frontend/src/AppBuilder/Widgets/Table/columns/index.jsx
index 257de7c4ae..b7ebe93721 100644
--- a/frontend/src/AppBuilder/Widgets/Table/columns/index.jsx
+++ b/frontend/src/AppBuilder/Widgets/Table/columns/index.jsx
@@ -130,6 +130,8 @@ export default function generateColumnsData({
return 1;
}
};
+ } else if (columnType === 'number') {
+ sortType = 'basic';
}
const width = columnSize || defaultColumn.width;
return {
diff --git a/frontend/src/AppBuilder/Widgets/Tabs.jsx b/frontend/src/AppBuilder/Widgets/Tabs.jsx
index 7f4fb527e4..dc3a55dcd2 100644
--- a/frontend/src/AppBuilder/Widgets/Tabs.jsx
+++ b/frontend/src/AppBuilder/Widgets/Tabs.jsx
@@ -2,7 +2,7 @@ import React, { useRef, useState, useEffect } from 'react';
import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container';
import { resolveWidgetFieldValue, isExpectedDataType } from '@/_helpers/utils';
import useStore from '@/AppBuilder/_stores/store';
-
+import { TAB_CANVAS_PADDING } from '@/AppBuilder/AppCanvas/appCanvasConstants';
export const Tabs = function Tabs({
id,
component,
@@ -117,6 +117,7 @@ export const Tabs = function Tabs({
position: 'absolute',
top: parsedHideTabs ? '0px' : '41px',
width: '100%',
+ padding: TAB_CANVAS_PADDING,
}}
>
- {
+ const inputLogic = useInput(props);
+
+ return
- {label && (
-
);
diff --git a/frontend/src/Editor/Components/DropDown.jsx b/frontend/src/Editor/Components/DropDown.jsx
index 891391f0f4..b98be4e57d 100644
--- a/frontend/src/Editor/Components/DropDown.jsx
+++ b/frontend/src/Editor/Components/DropDown.jsx
@@ -236,7 +236,7 @@ export const DropDown = function DropDown({
minWidth: 'max-content',
}
: {
- backgroundColor: state.value === currentValue ? '#7A95FB' : 'white',
+ backgroundColor: state.value === currentValue ? 'var(--primary-brand)' : 'white',
color: state.isDisabled ? '#88909694' : state.value === currentValue ? 'white' : 'black',
':hover': {
backgroundColor: state.isDisabled ? 'transparent' : state.value === currentValue ? '#3650AF' : '#d8dce9',
diff --git a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
index a01ed895e0..feb3087920 100644
--- a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
+++ b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
@@ -15,6 +15,7 @@ import Label from '@/_ui/Label';
import cx from 'classnames';
import { getInputBackgroundColor, getInputBorderColor, getInputFocusedColor } from './utils';
import { isMobileDevice } from '@/_helpers/appUtils';
+import useStore from '@/AppBuilder/_stores/store';
const { DropdownIndicator, ClearIndicator } = components;
const INDICATOR_CONTAINER_WIDTH = 60;
@@ -39,7 +40,7 @@ export const CustomDropdownIndicator = (props) => {
export const CustomClearIndicator = (props) => {
return (
-
);
};
@@ -88,6 +89,7 @@ export const DropdownV2 = ({
padding,
} = styles;
const isInitialRender = useRef(true);
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
const [currentValue, setCurrentValue] = useState(() => findDefaultItem(schema));
const isMandatory = validation?.mandatory ?? false;
const options = properties?.options;
@@ -95,11 +97,14 @@ export const DropdownV2 = ({
const { isValid, validationError } = validationStatus;
const ref = React.useRef(null);
const dropdownRef = React.useRef(null);
+ const selectRef = React.useRef(null);
const [visibility, setVisibility] = useState(properties.visibility);
const [isDropdownLoading, setIsDropdownLoading] = useState(dropdownLoadingState);
const [isDropdownDisabled, setIsDropdownDisabled] = useState(disabledState);
const [searchInputValue, setSearchInputValue] = useState('');
const [userInteracted, setUserInteracted] = useState(false);
+ const currentMode = useStore((state) => state.currentMode);
+ const isEditor = currentMode === 'edit';
const _height = padding === 'default' ? `${height}px` : `${height + 4}px`;
const labelRef = useRef();
@@ -166,6 +171,12 @@ export const DropdownV2 = ({
setExposedVariable('isValid', validationStatus?.isValid);
};
+ const handleClickInEditor = (e) => {
+ if (e.target.className.includes('clear-indicator') || isMenuOpen) return;
+ e.stopPropagation();
+ selectRef.current?.onControlMouseDown(e);
+ };
+
useEffect(() => {
setInputValue(findDefaultItem(advanced ? schema : options));
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -353,15 +364,16 @@ export const DropdownV2 = ({
...provided,
padding: '0px',
}),
- option: (provided) => ({
+ option: (provided, _state) => ({
...provided,
- backgroundColor: 'var(--surfaces-surface-01)',
+ backgroundColor: _state.isFocused ? 'var(--interactive-overlays-fill-hover)' : 'var(--surfaces-surface-01)',
color:
selectedTextColor !== '#1B1F24'
? selectedTextColor
: isDropdownDisabled || isDropdownLoading
? 'var(--text-disabled)'
: 'var(--text-primary)',
+ borderRadius: _state.isFocused && '8px',
padding: '8px 6px 8px 38px',
'&:hover': {
backgroundColor: 'var(--interactive-overlays-fill-hover)',
@@ -429,8 +441,14 @@ export const DropdownV2 = ({
_width={_width}
top={'1px'}
/>
-
- {label} -
- )} +
- {data?.map((item, index) => (
-
- ))}
+ {label}
+
+ )}
+
+ {data?.map((item, index) => (
+
+ ))}
+
+
diff --git a/frontend/src/Editor/Components/FilePicker.jsx b/frontend/src/Editor/Components/FilePicker.jsx
index b2e2b1ff86..29b127ec7c 100644
--- a/frontend/src/Editor/Components/FilePicker.jsx
+++ b/frontend/src/Editor/Components/FilePicker.jsx
@@ -1,4 +1,5 @@
import React, { useEffect, useMemo, useRef } from 'react';
+// eslint-disable-next-line import/no-unresolved
import { useDropzone } from 'react-dropzone';
import { toast } from 'react-hot-toast';
// eslint-disable-next-line import/no-unresolved
@@ -311,7 +312,11 @@ export const FilePicker = ({
-
diff --git a/frontend/src/Editor/Components/Image/Image.jsx b/frontend/src/Editor/Components/Image/Image.jsx
index 0f3ea0e2b0..6df6bd047e 100644
--- a/frontend/src/Editor/Components/Image/Image.jsx
+++ b/frontend/src/Editor/Components/Image/Image.jsx
@@ -23,8 +23,17 @@ export const Image = function Image({
}) {
const { imageFormat, source, jsSchema, alternativeText, zoomButtons, rotateButton, loadingState, disabledState } =
properties;
- const { imageFit, imageShape, backgroundColor, padding, customPadding, boxShadow, borderRadius, borderColor } =
- styles;
+ const {
+ imageFit,
+ imageShape,
+ backgroundColor,
+ padding,
+ customPadding,
+ boxShadow,
+ borderRadius,
+ borderColor,
+ alignment,
+ } = styles;
const isInitialRender = useRef(true);
@@ -168,6 +177,7 @@ export const Image = function Image({
border: '1px solid',
borderRadius: imageShape === 'circle' ? '50%' : `${borderRadius}px`,
borderColor: borderColor ? borderColor : 'transparent',
+ objectPosition: alignment,
}}
height={height}
onClick={() => fireEvent('onClick')}
diff --git a/frontend/src/Editor/Components/Link.jsx b/frontend/src/Editor/Components/Link.jsx
deleted file mode 100644
index ff993acc17..0000000000
--- a/frontend/src/Editor/Components/Link.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import cx from 'classnames';
-
-export const Link = ({ height, properties, styles, fireEvent, setExposedVariable, dataCy }) => {
- const { linkTarget, linkText, targetType } = properties;
- const { textColor, textSize, underline, visibility, boxShadow } = styles;
- const clickRef = useRef();
-
- const computedStyles = {
- fontSize: textSize,
- height,
- boxShadow,
- };
-
- useEffect(() => {
- setExposedVariable('click', async function () {
- clickRef.current.click();
- });
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- return (
-
- );
-};
diff --git a/frontend/src/Editor/Components/Link/Link.jsx b/frontend/src/Editor/Components/Link/Link.jsx
new file mode 100644
index 0000000000..0b33686278
--- /dev/null
+++ b/frontend/src/Editor/Components/Link/Link.jsx
@@ -0,0 +1,138 @@
+import React, { useRef, useEffect, useState } from 'react';
+import * as Icons from '@tabler/icons-react';
+import cx from 'classnames';
+import Loader from '@/ToolJetUI/Loader/Loader';
+import './link.scss';
+const tinycolor = require('tinycolor2');
+
+export const Link = ({ height, properties, styles, fireEvent, setExposedVariables, dataCy }) => {
+ const { linkTarget, linkText, targetType, visibility, disabledState, loadingState } = properties;
+ const { textColor, textSize, underline, boxShadow, verticalAlignment, horizontalAlignment, icon, iconVisibility } =
+ styles;
+ const clickRef = useRef();
+ const [linkTargetState, setLinkTargetState] = useState(linkTarget);
+ const [linkTextState, setLinkTextState] = useState(linkText);
+ const [isVisible, setIsVisible] = useState(visibility);
+ const [isDisabled, setIsDisabled] = useState(disabledState);
+ const [isLoading, setIsLoading] = useState(false);
+
+ const computedStyles = {
+ display: 'flex',
+ alignItems: verticalAlignment === 'top' ? 'flex-start' : verticalAlignment === 'center' ? 'center' : 'flex-end',
+ justifyContent:
+ horizontalAlignment === 'left' ? 'flex-start' : horizontalAlignment === 'center' ? 'center' : 'flex-end',
+ height: '100%',
+ width: '100%',
+ boxShadow,
+ opacity: isDisabled ? 0.5 : 1,
+ pointerEvents: isDisabled ? 'none' : 'auto',
+ fontWeight: '500',
+ '--link-hover-color': tinycolor(textColor).darken(8).toString(),
+ };
+ // eslint-disable-next-line import/namespace
+ const IconElement = Icons?.[icon] == undefined ? Icons['IconHome2'] : Icons[icon];
+ const iconSize = textSize + 2;
+ // Update the state when the linkTarget or linkText changes
+ useEffect(() => {
+ setLinkTargetState(linkTarget);
+ setLinkTextState(linkText);
+ }, [linkTarget, linkText]);
+
+ // Update the exposed variables when the linkTarget or linkText changes
+ useEffect(() => {
+ const exposedVariables = {
+ linkTarget: linkTargetState,
+ linkText: linkTextState,
+ };
+ setExposedVariables(exposedVariables);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [linkTargetState, linkTextState]);
+
+ useEffect(() => {
+ setIsVisible(visibility);
+ setIsDisabled(disabledState);
+ setIsLoading(loadingState);
+ const exposedVariables = {
+ isLoading: loadingState,
+ isVisible: visibility,
+ isDisabled: disabledState,
+ };
+
+ setExposedVariables(exposedVariables);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [visibility, disabledState, loadingState]);
+
+ // Update the exposed functions on mount
+ useEffect(() => {
+ const exposedVariables = {
+ click: async function () {
+ clickRef.current.click();
+ },
+ setVisibility: async function (value) {
+ setIsVisible(value);
+ },
+ setDisable: async function (value) {
+ setIsDisabled(value);
+ },
+ setLoading: async function (value) {
+ setIsLoading(value);
+ },
+ setLinkTarget: async function (value) {
+ setLinkTargetState(value);
+ },
+ setLinkText: async function (value) {
+ setLinkTextState(value);
+ },
+ };
+ setExposedVariables(exposedVariables);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ if (isLoading) {
+ return (
+
+
+
+
+ );
+ }
+ return (
+
+ );
+};
diff --git a/frontend/src/Editor/Components/Link/link.scss b/frontend/src/Editor/Components/Link/link.scss
new file mode 100644
index 0000000000..a92f19829f
--- /dev/null
+++ b/frontend/src/Editor/Components/Link/link.scss
@@ -0,0 +1,8 @@
+.link-widget {
+ a {
+ text-underline-offset: 32%; // Adds space between text and underline
+ &:hover {
+ color: var(--link-hover-color) !important;
+ }
+ }
+}
diff --git a/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx b/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx
index ab87fb22b7..56b38b2edb 100644
--- a/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx
+++ b/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx
@@ -8,7 +8,7 @@ import { highlightText } from '../DropdownV2/utils';
const CustomOption = (props) => {
return (