@adaptabletools/adaptable 22.0.7 → 22.0.9

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -40,15 +40,15 @@ export const renderFreeTextColumnSummary = (data) => {
 export const isValidFreeTextColumn = (data, api) => {
     const columns = api.columnApi.getUIAvailableColumns();
     if (!data.ColumnId) {
-        return 'A Column ID is required.';
+        return 'A Column Name is required';
     }
     const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
     const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
     if (hasAlreadyExistingId) {
-        return 'A column with this ID already exists.';
+        return 'A column with this Name already exists';
     }
     if (!data.FreeTextColumnSettings.DataType) {
-        return 'A data type is required for the column.';
+        return 'A data type is required for the column';
     }
     return true;
 };
@@ -123,14 +123,14 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(FormLayout, null,
-            React.createElement(FormRow, { label: "Column Id" },
-                React.createElement(Input, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter an id", onChange: (e) => handleColumnIdChange(e) })),
             React.createElement(FormRow, { label: "Column Name" },
+                React.createElement(Input, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: (e) => handleColumnIdChange(e) })),
+            React.createElement(FormRow, { label: "Column Header" },
                 React.createElement(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
                         setColumnNameFocused(true);
                     }, onBlur: () => {
                         setColumnNameFocused(false);
-                    }, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a name", onChange: (e) => handleColumnNameChange(e) })),
+                    }, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a Column Header (optional)", onChange: (e) => handleColumnNameChange(e) })),
             React.createElement(FormRow, { label: "Data Type" },
                 React.createElement(Box, { className: "twa:max-w-[500px]" },
                     React.createElement(Select, { "data-name": "column-type-dropdown", options: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onChange: (value) => handleDataTypeChange(value) }))),
@@ -145,7 +145,7 @@ export const FreeTextColumnSettingsWizardSection = (props) => {
                     ? 'number'
                     : data.FreeTextColumnSettings.DataType === 'date'
                         ? 'date'
-                        : 'text', placeholder: "Default Column Value (optional)", onChange: (e) => handleDefaultValueChange(e) }))),
+                        : 'text', placeholder: "Enter a default value (optional)", onChange: (e) => handleDefaultValueChange(e) }))),
             React.createElement(FormRow, { label: "Header Tooltip" },
                 React.createElement(Input, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: data.FreeTextColumnSettings?.HeaderToolTip || '', onChange: (e) => handleSpecialColumnSettingsChange({
                         HeaderToolTip: e.target.value,

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -71,7 +71,7 @@ export const LayoutWizard = (props) => {
         props.onFinishWizard(layout);
     };
     const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
-    return isPivotLayout(layout) ? (React.createElement(OnePageAdaptableWizard, { titleContainerStyle: { width: 180 }, defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return isPivotLayout(layout) ? (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure Pivot Layout',
@@ -151,7 +151,7 @@ export const LayoutWizard = (props) => {
                     React.createElement(OnePageWizardSummary, null))),
                 title: 'Summary',
             },
-        ] })) : (React.createElement(OnePageAdaptableWizard, { titleContainerStyle: { width: 180 }, defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+        ] })) : (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure Table Layout',

package/src/View/Layout/Wizard/sections/AggregationsSection.js

@@ -8,6 +8,7 @@ import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { columnFilter } from './Utilities';
+import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Select } from '../../../../components/Select';
 import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
@@ -128,6 +129,7 @@ const ColumnRow = (props) => {
     }
     return (React.createElement(Flex, { alignItems: "center" },
         props.column.friendlyName,
+        React.createElement(ColumnGroupTag, { column: props.column }),
         aggValue && (React.createElement(DropdownButton, { columns: ['label'], items: aggOptions, className: "twa:ml-2" }, currentAggFnName)),
         currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center" },
             React.createElement(Box, null, "Weight"),

package/src/View/Layout/Wizard/sections/ColumnsSection.js

@@ -155,7 +155,7 @@ const ColumnRow = (props) => {
                     event.stopPropagation();
                 }, checked: visible }),
             React.createElement(Flex, { className: "twa:mx-2", alignItems: "center", "data-name": "column-label" }, initialHeader),
-            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
+            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1 twa:flex twa:items-center" },
                 "Column Group: ",
                 props.column.columnGroup.friendlyName)) : null)));
 };
@@ -373,82 +373,89 @@ export const ColumnsSection = (props) => {
             .map((col) => col.columnId)
         : currentOrder.map((col) => col.columnId);
     const visibleIdsCurrentlyDisplayed = visibleIds.filter((colId) => currentlyDisplayedColumnIds.includes(colId));
-    return (React.createElement(Tabs, null,
+    return (React.createElement(Tabs, { className: "twa:h-full" },
         React.createElement(Tabs.Tab, null, "Columns"),
-        React.createElement(Tabs.Content, { className: "twa:overflow-hidden" },
-            React.createElement(Box, { className: "twa:grid twa:grid-cols-2 twa:gap-2 twa:focus:outline-none", "data-name": "columns-container", tabIndex: -1, onKeyDown: (event) => {
-                    if (event.key === 'ArrowDown') {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
-                        if (index === -1) {
-                            return;
-                        }
-                        const nextColumnId = currentlyDisplayedColumnIds[index + 1];
-                        const nextColumn = colIdToCol[nextColumnId];
-                        if (nextColumn) {
-                            setSelectedColumnId(nextColumn.columnId);
-                        }
-                    }
-                    if (event.key === 'ArrowUp') {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
-                        if (index === -1) {
-                            return;
-                        }
-                        const previousColumnId = currentlyDisplayedColumnIds[index - 1];
-                        const previousColumn = colIdToCol[previousColumnId];
-                        if (previousColumn) {
-                            setSelectedColumnId(previousColumn.columnId);
-                        }
-                    }
-                    if (event.key === ' ') {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        const selectedColumn = colIdToCol[selectedColumnId];
-                        if (!selectedColumn) {
-                            return;
+        React.createElement(Tabs.Content, null,
+            React.createElement(Box, { className: "twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2 twa:h-full" },
+                React.createElement(Box, { className: "twa:gap-2 twa:focus:outline-none twa:flex-1 twa:max-h-full twa:overflow-hidden", "data-name": "columns-container", tabIndex: -1, onKeyDown: (event) => {
+                        const scrollIntoView = (columnId) => {
+                            const el = event.currentTarget.querySelector(`[data-id="${columnId}"]`);
+                            el?.scrollIntoView({ block: 'nearest' });
+                        };
+                        if (event.key === 'ArrowDown') {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
+                            if (index === -1) {
+                                return;
+                            }
+                            const nextColumnId = currentlyDisplayedColumnIds[index + 1];
+                            const nextColumn = colIdToCol[nextColumnId];
+                            if (nextColumn) {
+                                setSelectedColumnId(nextColumn.columnId);
+                                scrollIntoView(nextColumn.columnId);
+                            }
                         }
-                        const visible = isColumnVisible({ columnId: selectedColumnId, layout });
-                        handleColumnVisibilityChange(selectedColumnId, !visible);
-                    }
-                } },
-                React.createElement(Box, { className: "twa:flex twa:flex-col twa:gap-2" },
-                    React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:border-none twa:p-1" }),
-                    React.createElement(Box, { className: clsx('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard') },
-                        React.createElement(CheckBox, { checked: currentlyDisplayedColumnIds.length
-                                ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
-                                    ? true
-                                    : visibleIdsCurrentlyDisplayed.length
-                                        ? null
-                                        : false
-                                : false, onChange: (checked) => {
-                                handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
-                            } }, "Select All")),
-                    React.createElement(ReorderDraggable, { toIdentifier: (option) => `${option.columnId}`, isOptionDraggable: (option) => {
-                            return option.moveable;
-                        }, optionClassName: (option) => {
-                            const baseCls = 'ab-Layout-Wizard__ColumnRow twa:cursor-pointer twa:rounded-standard';
-                            if (selectedColumnId !== option.columnId) {
-                                return baseCls;
+                        if (event.key === 'ArrowUp') {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
+                            if (index === -1) {
+                                return;
                             }
-                            return clsx(baseCls, 'twa:after:border-accent twa:relative twa:after:border-2 twa:after:rounded-standard twa:after:pointer-events-none twa:after:inset-0 twa:after:absolute twa:after:bg-accent/15');
-                        }, order: currentOrder, onOptionClick: (option, event) => {
-                            if (event.ctrlKey || option.columnId === selectedColumnId) {
-                                setSelectedColumnId(null);
+                            const previousColumnId = currentlyDisplayedColumnIds[index - 1];
+                            const previousColumn = colIdToCol[previousColumnId];
+                            if (previousColumn) {
+                                setSelectedColumnId(previousColumn.columnId);
+                                scrollIntoView(previousColumn.columnId);
                             }
-                            else {
-                                setSelectedColumnId(option.columnId);
+                        }
+                        if (event.key === ' ') {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            const selectedColumn = colIdToCol[selectedColumnId];
+                            if (!selectedColumn) {
+                                return;
                             }
-                        }, renderOption: (option) => {
-                            return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
-                        }, onChange: handleColumnsChange })),
+                            const visible = isColumnVisible({ columnId: selectedColumnId, layout });
+                            handleColumnVisibilityChange(selectedColumnId, !visible);
+                        }
+                    } },
+                    React.createElement(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:h-full twa:overflow-hidden" },
+                        React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:border-none twa:p-1" }),
+                        React.createElement(Box, { className: clsx('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard') },
+                            React.createElement(CheckBox, { checked: currentlyDisplayedColumnIds.length
+                                    ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
+                                        ? true
+                                        : visibleIdsCurrentlyDisplayed.length
+                                            ? null
+                                            : false
+                                    : false, onChange: (checked) => {
+                                    handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
+                                } }, "Select All")),
+                        React.createElement(ReorderDraggable, { className: "twa:overflow-y-auto", toIdentifier: (option) => `${option.columnId}`, isOptionDraggable: (option) => {
+                                return option.moveable;
+                            }, optionClassName: (option) => {
+                                const baseCls = 'ab-Layout-Wizard__ColumnRow twa:cursor-pointer twa:rounded-standard';
+                                if (selectedColumnId !== option.columnId) {
+                                    return baseCls;
+                                }
+                                return clsx(baseCls, 'twa:after:border-accent twa:relative twa:after:border-2 twa:after:rounded-standard twa:after:pointer-events-none twa:after:inset-0 twa:after:absolute twa:after:bg-accent/15');
+                            }, order: currentOrder, onOptionClick: (option, event) => {
+                                if (event.ctrlKey || option.columnId === selectedColumnId) {
+                                    setSelectedColumnId(null);
+                                }
+                                else {
+                                    setSelectedColumnId(option.columnId);
+                                }
+                            }, renderOption: (option) => {
+                                return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
+                            }, onChange: handleColumnsChange }))),
                 currentOrderIds.length ? (React.createElement(ColumnPropertiesEditor, { column: selectedColumnId && currentOrderIds.includes(selectedColumnId)
-                        ? colIdToCol[selectedColumnId] ?? null
+                        ? (colIdToCol[selectedColumnId] ?? null)
                         : null, layout: layout, onPinChange: handlePinChange, onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange })) : null))));
 };
-const hr = React.createElement("hr", { className: "twa:my-2 twa:h-[0.5px] twa:bg-inputborder/50 twa:border-none" });
+const hr = (React.createElement("hr", { className: "twa:my-3 twa:mb-0 twa:w-full twa:h-[0.5px] twa:bg-inputborder/50 twa:border-none" }));
 const ColumnPropertiesEditor = (props) => {
     const adaptable = useAdaptable();
     const baseCls = 'ab-Layout-Wizard__ColumnPropertiesEditor twa:border twa:rounded-standard';
@@ -470,76 +477,78 @@ const ColumnPropertiesEditor = (props) => {
     const columnPinning = props.layout.ColumnPinning?.[props.column.columnId] || 'None';
     const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
     const customHeader = props.layout.ColumnHeaders?.[props.column.columnId] ?? initialHeader;
-    return (React.createElement(Box, { className: clsx(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-defaultbackground twa:shadow-md twa:p-4') },
-        React.createElement(Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title" },
-            "Column Settings: ",
-            column.friendlyName),
-        React.createElement(Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center" },
-            "Column ID:",
-            ' ',
-            React.createElement(Box, { className: "twa:bg-primarydark/20 twa:text-text-on-primarydark twa:px-1 twa:py-0.5 twa:rounded-standard" }, column.columnId)),
-        props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
-            "Column Group: ",
-            props.column.columnGroup.friendlyName)) : null,
-        hr,
-        React.createElement(Flex, { flexDirection: "column", className: "twa:gap-3" },
-            React.createElement(Flex, { flexDirection: "column", className: "twa:gap-1" },
-                "Header",
-                React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", onChange: () => {
-                        props.onColumnNameChange(props.column.columnId, event.target.value);
-                    }, value: customHeader })),
-            React.createElement(Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2" },
-                React.createElement(Box, null, "Width:"),
-                " ",
-                React.createElement(Box, null, "Flex:"),
-                React.createElement(Input, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column width", disabled: resizable === false, onChange: (event) => {
-                        let value = parseFloat(event.target.value);
-                        value = typeof value === 'number' && !isNaN(value) ? value : void 0;
-                        props.onColumnWidthChange(props.column.columnId, value);
-                    }, value: columnWidth ?? '' }),
-                React.createElement(Input, { "data-name": "column-flex", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column flex", disabled: resizable === false, onChange: (event) => {
-                        let value = parseFloat(event.target.value);
-                        value = typeof value === 'number' && !isNaN(value) ? value : void 0;
-                        props.onColumnFlexChange(props.column.columnId, value);
-                    }, value: columnFlex ?? '' }),
-                React.createElement(Box, null, "Min Width:"),
-                React.createElement(Box, null, "Max Width:"),
-                React.createElement(Input, { "data-name": "column-min-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column min width", disabled: resizable === false, onChange: (event) => {
-                        let value = parseFloat(event.target.value);
-                        value = typeof value === 'number' && !isNaN(value) ? value : void 0;
-                        props.onColumnMinWidthChange(props.column.columnId, value);
-                    }, value: minWidth ?? '' }),
-                React.createElement(Input, { "data-name": "column-max-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column max width", disabled: resizable === false, onChange: (event) => {
-                        let value = parseFloat(event.target.value);
-                        value = typeof value === 'number' && !isNaN(value) ? value : void 0;
-                        props.onColumnMaxWidthChange(props.column.columnId, value);
-                    }, value: maxWidth ?? '' })),
-            "Pinning:",
-            React.createElement(RadioGroup, { value: columnPinning || 'None', name: "columnPinning", orientation: "horizontal", variant: "text-only", className: radioGroupStyling.horizontalTextOnly, onRadioChange: (columnPinning) => {
-                    props.onPinChange(column.columnId, columnPinning === 'None' ? null : columnPinning);
-                } },
-                React.createElement(Radio, { value: "left" }, "Left"),
-                React.createElement(Radio, { value: "None" }, "None"),
-                React.createElement(Radio, { value: "right" }, "Right"))),
-        React.createElement(Box, { className: "twa:mt-5" }),
+    return (React.createElement(Box, { className: clsx(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-defaultbackground twa:shadow-md', 'twa:max-h-full twa:overflow-hidden twa:flex twa:flex-col') },
+        React.createElement(Box, { className: "twa:px-4 twa:pt-4" },
+            React.createElement(Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title" },
+                "Column Settings: ",
+                column.friendlyName),
+            React.createElement(Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center" },
+                "Column ID:",
+                ' ',
+                React.createElement(Box, { className: "twa:bg-primarydark/20 twa:text-text-on-primarydark twa:px-1 twa:py-0.5 twa:rounded-standard" }, column.columnId)),
+            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
+                "Column Group: ",
+                props.column.columnGroup.friendlyName)) : null),
         hr,
-        React.createElement(Box, null,
-            React.createElement(Box, { className: "twa:my-3" }, "Column Attributes"),
-            React.createElement(Box, { className: clsx({
-                    'twa:bg-primarylight': 'the bg color',
-                    'twa:gap-2 twa:flex twa:flex-col': 'layout configuration for small screens',
-                    'twa:lg:gap-3 twa:lg:grid twa:md:grid-cols-[1fr_1fr]': 'layout configuration for normal screens',
-                    'twa:p-5 twa:rounded-standard': true,
-                }) }, [
-                { label: 'Aggregatable', checked: props.column.aggregatable },
-                { label: 'Filterable', checked: props.column.filterable },
-                { label: 'Groupable', checked: props.column.groupable },
-                { label: 'Moveable', checked: props.column.moveable },
-                { label: 'Pivotable', checked: props.column.pivotable },
-                { label: 'Sortable', checked: props.column.sortable },
-            ].map(({ label, checked }) => (React.createElement(Flex, { key: label, alignItems: "center", className: clsx({
-                    'twa:rounded-standard twa:gap-2': true,
-                }) },
-                React.createElement(Box, { className: "twa:size-5" }, checked ? (React.createElement(Icon, { name: "check", className: "twa:text-success" })) : (React.createElement(Icon, { name: "close", className: "twa:text-error" }))),
-                label)))))));
+        React.createElement(Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3" },
+            React.createElement(Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3" },
+                React.createElement(Flex, { flexDirection: "column", className: "twa:gap-1" },
+                    "Header",
+                    React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", onChange: () => {
+                            props.onColumnNameChange(props.column.columnId, event.target.value);
+                        }, value: customHeader })),
+                React.createElement(Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2" },
+                    React.createElement(Box, null, "Width:"),
+                    " ",
+                    React.createElement(Box, null, "Flex:"),
+                    React.createElement(Input, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column width", disabled: resizable === false, onChange: (event) => {
+                            let value = parseFloat(event.target.value);
+                            value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                            props.onColumnWidthChange(props.column.columnId, value);
+                        }, value: columnWidth ?? '' }),
+                    React.createElement(Input, { "data-name": "column-flex", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column flex", disabled: resizable === false, onChange: (event) => {
+                            let value = parseFloat(event.target.value);
+                            value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                            props.onColumnFlexChange(props.column.columnId, value);
+                        }, value: columnFlex ?? '' }),
+                    React.createElement(Box, null, "Min Width:"),
+                    React.createElement(Box, null, "Max Width:"),
+                    React.createElement(Input, { "data-name": "column-min-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column min width", disabled: resizable === false, onChange: (event) => {
+                            let value = parseFloat(event.target.value);
+                            value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                            props.onColumnMinWidthChange(props.column.columnId, value);
+                        }, value: minWidth ?? '' }),
+                    React.createElement(Input, { "data-name": "column-max-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column max width", disabled: resizable === false, onChange: (event) => {
+                            let value = parseFloat(event.target.value);
+                            value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                            props.onColumnMaxWidthChange(props.column.columnId, value);
+                        }, value: maxWidth ?? '' })),
+                "Pinning:",
+                React.createElement(RadioGroup, { value: columnPinning || 'None', name: "columnPinning", orientation: "horizontal", variant: "text-only", className: radioGroupStyling.horizontalTextOnly, onRadioChange: (columnPinning) => {
+                        props.onPinChange(column.columnId, columnPinning === 'None' ? null : columnPinning);
+                    } },
+                    React.createElement(Radio, { value: "left" }, "Left"),
+                    React.createElement(Radio, { value: "None" }, "None"),
+                    React.createElement(Radio, { value: "right" }, "Right"))),
+            React.createElement(Box, { className: "twa:mt-5" }),
+            hr,
+            React.createElement(Box, null,
+                React.createElement(Box, { className: "twa:my-3" }, "Column Attributes"),
+                React.createElement(Box, { className: clsx({
+                        'twa:bg-primarylight': 'the bg color',
+                        'twa:gap-2 twa:flex twa:flex-col': 'layout configuration for small screens',
+                        'twa:lg:gap-3 twa:lg:grid twa:md:grid-cols-[1fr_1fr]': 'layout configuration for normal screens',
+                        'twa:p-5 twa:rounded-standard': true,
+                    }) }, [
+                    { label: 'Aggregatable', checked: props.column.aggregatable },
+                    { label: 'Filterable', checked: props.column.filterable },
+                    { label: 'Groupable', checked: props.column.groupable },
+                    { label: 'Moveable', checked: props.column.moveable },
+                    { label: 'Pivotable', checked: props.column.pivotable },
+                    { label: 'Sortable', checked: props.column.sortable },
+                ].map(({ label, checked }) => (React.createElement(Flex, { key: label, alignItems: "center", className: clsx({
+                        'twa:rounded-standard twa:gap-2': true,
+                    }) },
+                    React.createElement(Box, { className: "twa:size-5" }, checked ? (React.createElement(Icon, { name: "check", className: "twa:text-success" })) : (React.createElement(Icon, { name: "close", className: "twa:text-error" }))),
+                    label))))))));
 };

package/src/View/Layout/Wizard/sections/FilterSection.js

@@ -58,8 +58,15 @@ export const FilterSection = (props) => {
                             });
                         } }))),
             layoutFilters?.length > 0 && (React.createElement(Box, { className: "twa:p-0", as: "ul" }, layoutFilters.map((columnFilter) => {
+                const moduleItems = filterModule.toView(columnFilter).items;
+                const column = adaptable.api.columnApi.getColumnWithColumnId(columnFilter.ColumnId);
+                const columnGroupItems = column?.columnGroup && column.columnGroup.groupCount > 1
+                    ? [{ name: 'Column Group', values: [column.columnGroup.friendlyName] }]
+                    : [];
                 const items = [
-                    ...filterModule.toView(columnFilter).items,
+                    moduleItems[0],
+                    ...columnGroupItems,
+                    ...moduleItems.slice(1),
                     {
                         name: 'Column Filter',
                         view: (React.createElement(LayoutColumnFilter, { columnFilter: columnFilter, onColumnFilterChange: (columnFilter) => {

package/src/View/Layout/Wizard/sections/PivotAggregationsSection.js

@@ -9,6 +9,7 @@ import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { columnFilter } from './Utilities';
+import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
 import { Select } from '../../../../components/Select';
@@ -173,6 +174,7 @@ const PivotColumnRow = (props) => {
         React.createElement(Flex, { alignItems: "flex-start" },
             React.createElement(Flex, { className: "twa:flex-[0_0_auto]", alignItems: "center" },
                 React.createElement(Flex, { className: "twa:min-w-[80px]" }, props.column.friendlyName),
+                React.createElement(ColumnGroupTag, { column: props.column }),
                 aggValue && (React.createElement(DropdownButton, { columns: ['label'], items: aggOptions, className: "twa:ml-2" }, currentAggFnName)),
                 currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center" },
                     React.createElement(Box, null, "Weight"),

package/src/View/Layout/Wizard/sections/PivotRowGroupingSection.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { columnFilter } from './Utilities';
+import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import { Tabs } from '../../../../components/Tabs';
 import { Tag } from '../../../../components/Tag';
 import { useAdaptable } from '../../../AdaptableContext';
@@ -8,7 +9,7 @@ import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptab
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { normalizeLayout } from '../../../../Api/Implementation/LayoutHelpers';
 import { RowGroupBehaviorSection } from './RowGroupingSection';
-import { Box } from '../../../../components/Flex';
+import { Box, Flex } from '../../../../components/Flex';
 export const PivotRowGroupingSectionSummary = () => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
@@ -38,7 +39,9 @@ export const PivotRowGroupingSection = (props) => {
         React.createElement(Tabs.Tab, null, "Row Grouped Columns"),
         React.createElement(Tabs.Tab, null, rowGroupsText),
         React.createElement(Tabs.Content, null,
-            React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
+            React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (React.createElement(Flex, { alignItems: "center" },
+                    option.friendlyName ?? option.columnId,
+                    React.createElement(ColumnGroupTag, { column: option }))), options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
         React.createElement(Tabs.Content, null,
             React.createElement(RowGroupBehaviorSection, { layout: layout, onChange: onChange }))));
 };

package/src/View/Layout/Wizard/sections/RowGroupingSection.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import FormLayout from '../../../../components/FormLayout';
 import { columnFilter } from './Utilities';
+import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import { RadioGroup } from '../../../../components/Radio';
 import { Tabs } from '../../../../components/Tabs';
 import { Tag } from '../../../../components/Tag';
@@ -95,7 +96,9 @@ export const RowGroupingSection = (props) => {
             React.createElement(Tabs.Tab, null, "Row Grouped Columns"),
             React.createElement(Tabs.Tab, null, rowGroupsText),
             React.createElement(Tabs.Content, null,
-                React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
+                React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (React.createElement(Flex, { alignItems: "center" },
+                        option.friendlyName ?? option.columnId,
+                        React.createElement(ColumnGroupTag, { column: option }))), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
             React.createElement(Tabs.Content, null,
                 React.createElement(RowGroupBehaviorSection, { layout: layout, onChange: onChange })))));
 };

package/src/View/Layout/Wizard/sections/RowSummarySection.js

@@ -15,6 +15,7 @@ import { SuspendToggleButton } from '../../../Components/Buttons/SuspendToggleBu
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { columnFilter } from './Utilities';
+import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../../../components/Flex';
 export const areSummaryRowsValid = (layout) => {
@@ -150,11 +151,13 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
                     } }, "Include Only Filtered Rows"))),
         React.createElement(Flex, { flexDirection: "column", className: "twa:mt-2 twa:mb-1" },
             React.createElement(Flex, { alignItems: "center", className: "twa:flex-1 twa:mb-2" }, "Column Aggregations"),
-            React.createElement(Panel, { bodyProps: { className: 'twa:max-h-full ' }, className: "twa:h-[360px]" },
+            React.createElement(Panel, { bodyProps: { className: 'twa:max-h-full twa:bg-primarylight ' }, className: "twa:h-[360px]" },
                 React.createElement(ValueSelector, { style: { maxHeight: '100%' }, showFilterInput: true, filter: columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, toListLabel: (column) => {
                         const label = column.friendlyName ?? column.columnId;
                         if (!(column.columnId in (rowSummary.ColumnsMap ?? {}))) {
-                            return label;
+                            return (React.createElement(Flex, { alignItems: "center" },
+                                label,
+                                React.createElement(ColumnGroupTag, { column: column })));
                         }
                         const expressionOptions = getAvailableExpressionsForColumnType(column.dataType, availableScalarExpressions).map((expression) => ({
                             label: expression,
@@ -172,7 +175,9 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
                         }
                         const expression = rowSummary.ColumnsMap[column.columnId];
                         return (React.createElement(Flex, null,
-                            React.createElement(Flex, { className: "twa:mr-2", alignItems: 'center' }, label),
+                            React.createElement(Flex, { className: "twa:mr-2", alignItems: 'center' },
+                                label,
+                                React.createElement(ColumnGroupTag, { column: column })),
                             React.createElement(Select, { value: expression, options: expressionOptions, onChange: (expression) => {
                                     onChange({
                                         ...rowSummary,

package/src/View/Layout/Wizard/sections/SortSection.js

@@ -7,8 +7,9 @@ import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { columnFilter } from './Utilities';
+import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
-import { Box } from '../../../../components/Flex';
+import { Box, Flex } from '../../../../components/Flex';
 export const SortSectionSummary = () => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     const adaptable = useAdaptable();
@@ -18,8 +19,9 @@ export const SortSectionSummary = () => {
 const ColumnRow = (props) => {
     const SortOrder = (props.layout?.ColumnSorts ?? []).find((sort) => sort.ColumnId === props.column.columnId)?.SortOrder;
     const icon = SortOrder === 'Asc' ? 'sort-asc' : 'sort-desc';
-    return (React.createElement(Box, null,
+    return (React.createElement(Flex, { alignItems: "center" },
         props.column.friendlyName,
+        React.createElement(ColumnGroupTag, { column: props.column }),
         SortOrder && (React.createElement(SimpleButton, { className: "twa:ml-2", onClick: () => props.onSortChange(props.column.columnId, SortOrder === 'Asc' ? 'Desc' : 'Asc'), variant: "raised", icon: icon }))));
 };
 export const SortSection = (props) => {

package/src/View/StyledColumn/Wizard/StyledColumnWizardColumnSection.js

@@ -3,7 +3,8 @@ import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
 import { NewColumnSelector } from '../../Components/ColumnSelector';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Box } from '../../../components/Flex';
+import { Box, Flex } from '../../../components/Flex';
+import { AdaptableFormControlTextClear } from '../../Components/Forms/AdaptableFormControlTextClear';
 export const renderStyledColumnColumnSummary = (data) => {
     const { api } = useOnePageAdaptableWizardContext();
     return (React.createElement(Box, { className: "twa:pr-2 twa:py-2" },
@@ -76,8 +77,13 @@ export const StyledColumnWizardColumnSection = (props) => {
         }
         props.onChange(newStyledColumn);
     };
+    const [columnsSearchText, setColumnsSearchText] = React.useState('');
     return (React.createElement(Tabs, { style: { height: '100%' } },
         React.createElement(Tabs.Tab, null, "Column"),
         React.createElement(Tabs.Content, null,
-            React.createElement(NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }))));
+            React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2" },
+                React.createElement(Box, { className: "twa:text-2" }, "Columns"),
+                React.createElement(Box, { className: "twa:flex-3" }),
+                React.createElement(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
+            React.createElement(NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }))));
 };

package/src/View/Wizard/OnePageAdaptableWizard.d.ts

@@ -41,7 +41,6 @@ export interface OnePageAdaptableWizardProps<ENTITY> {
     onFinish?: (data: ENTITY) => any;
     children?: React.ReactNode;
     style?: CSSProperties;
-    titleContainerStyle?: CSSProperties;
     closeText?: React.ReactNode;
     closeTooltip?: string;
     finishText?: React.ReactNode;

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -72,7 +72,7 @@ export const OnePageAdaptableWizard = (props) => {
     };
     return (React.createElement(OnePageAdaptableWizardContext.Provider, { value: extraContext },
         React.createElement(NamedQueryContext.Provider, { value: { namedQuery, setNamedQuery } },
-            React.createElement(OnePageWizard, { ...props, name: name, sections: sections, onFinish: handleClickFinish }))));
+            React.createElement(OnePageWizard, { ...props, name: name, sections: sections, onFinish: handleClickFinish, moduleName: props.moduleInfo.FriendlyName }))));
 };
 export const OnePageWizardSummary = () => {
     const { sections, data, api, moduleInfo } = useOnePageAdaptableWizardContext();