@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.10

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

@@ -1,11 +1,11 @@
-import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { CheckBox } from '../../../../components/CheckBox';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import Panel from '../../../../components/Panel';
 import SimpleButton from '../../../../components/SimpleButton';
-import { Tabs } from '../../../../components/Tabs';
-import { Tag } from '../../../../components/Tag';
+import { ButtonNew } from '../../../Components/Buttons/ButtonNew';
+import { Card } from '../../../../components/Card';
+import { ColumnTag, Tag } from '../../../../components/Tag';
 import { summarySupportedExpressions, WEIGHTED_AVERAGE_AGGREGATED_FUNCTION, } from '../../../../AdaptableState/Common/RowSummary';
 import { mapColumnDataTypeToExpressionFunctionType } from '../../../../Utilities/adaptableQlUtils';
 import { LayoutModuleId } from '../../../../Utilities/Constants/ModuleConstants';
@@ -19,6 +19,9 @@ import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../../../components/Flex';
 import { SingleSelect } from '../../../../components/NewSelect';
+import { CollapsibleWizardCard, getWizardAccordionSectionClassName, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
+import { cn } from '../../../../lib/utils';
+import { objectListActionButtonClassName } from '../../../Components/AdaptableObjectList/objectListActionButtonStyles';
 export const areSummaryRowsValid = (layout) => {
     if (!layout.RowSummaries)
         return true;
@@ -33,6 +36,7 @@ export const areSummaryRowsValid = (layout) => {
     });
     return valid;
 };
+const rowSummaryCardId = (index) => `row-summary-${index}`;
 const availableExpressionsForColumnTypeCache = new Map();
 const getAvailableExpressionsForColumnType = (columnType, availableScalarExpressions) => {
     const key = columnType;
@@ -73,18 +77,52 @@ const getAvailableExpressionsForColumnType = (columnType, availableScalarExpress
     availableExpressionsForColumnTypeCache.set(key, expressions);
     return expressions;
 };
+const buildRowSummaryExpressionOptions = (column, availableScalarExpressions, layout) => {
+    const expressionOptions = getAvailableExpressionsForColumnType(column.dataType, availableScalarExpressions).map((expression) => ({
+        label: expression,
+        value: expression,
+    }));
+    const aggregation = layout.TableAggregationColumns?.find((agg) => agg.ColumnId === column.columnId)?.AggFunc;
+    if (aggregation && typeof aggregation === 'object' && aggregation.weightedColumnId) {
+        expressionOptions.push({
+            label: 'WEIGHTERD_AVG',
+            value: WEIGHTED_AVERAGE_AGGREGATED_FUNCTION,
+        });
+    }
+    return expressionOptions;
+};
+const getDefaultRowSummaryExpression = (column, availableScalarExpressions, layout) => {
+    const optionValues = buildRowSummaryExpressionOptions(column, availableScalarExpressions, layout).map((option) => option.value);
+    if (optionValues.includes('sum')) {
+        return 'sum';
+    }
+    const sumExpression = optionValues.find((value) => value.toLowerCase() === 'sum');
+    if (sumExpression) {
+        return sumExpression;
+    }
+    return optionValues[0] ?? null;
+};
+const RowSummaryPositionTag = ({ position }) => _jsx(Tag, { className: "twa:shrink-0", children: position });
+const RowSummaryCardSummary = ({ rowSummary }) => {
+    const adaptable = useAdaptable();
+    const columnIds = Object.keys(rowSummary.ColumnsMap ?? {}).filter((colId) => colId !== 'Source' && colId !== 'Uuid');
+    if (!columnIds.length) {
+        return _jsx(Tag, { children: "No columns" });
+    }
+    return (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: columnIds.map((colId) => (_jsxs(ColumnTag, { children: [rowSummary.ColumnsMap[colId], "(", adaptable.api.columnApi.getFriendlyNameForColumnId(colId), ")"] }, colId))) }));
+};
 export const RowSummarySectionSummary = () => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
     return (_jsx(Box, { className: "twa:flex twa:flex-col", children: layout.RowSummaries?.length ? (layout.RowSummaries.map((rowSummary, index) => {
-            return (_jsx(_Fragment, { children: _jsxs(Box, { className: "twa:mr-1 twa:mb-1", children: [rowSummary.Position, ":", ' ', Object.keys(rowSummary.ColumnsMap).map((colId) => {
-                            if (colId === 'Source' || colId === 'Uuid')
-                                return null;
-                            return (_jsxs(Tag, { className: "twa:mr-1", children: [rowSummary.ColumnsMap[colId], "(", adaptable.api.columnApi.getFriendlyNameForColumnId(colId), ")"] }, colId));
-                        })] }, index) }));
+            return (_jsxs(Box, { className: "twa:mr-1 twa:mb-1", children: [rowSummary.Position, ":", ' ', Object.keys(rowSummary.ColumnsMap).map((colId) => {
+                        if (colId === 'Source' || colId === 'Uuid')
+                            return null;
+                        return (_jsxs(ColumnTag, { className: "twa:mr-1", children: [rowSummary.ColumnsMap[colId], "(", adaptable.api.columnApi.getFriendlyNameForColumnId(colId), ")"] }, colId));
+                    })] }, index));
         })) : (_jsx(Tag, { children: "No Row Summaries" })) }));
 };
-const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpressions, onDelete, }) => {
+const RowSummaryEditorForm = React.memo(({ rowSummary, onChange, availableScalarExpressions, }) => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     const adaptable = useAdaptable();
     const columns = React.useMemo(() => {
@@ -100,19 +138,7 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
             sortUnorderedItems: false,
         }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [rowSummary.ColumnsMap]);
-    return (_jsxs(Panel, { header: _jsxs(Flex, { className: "twa:w-full", children: [_jsx(Flex, { className: "twa:flex-1", alignItems: "center", children: "Row Summary" }), _jsx(Box, { className: "twa:mr-2", children: _jsx(SuspendToggleButton, { onSuspend: () => {
-                            onChange({
-                                ...rowSummary,
-                                IsSuspended: true,
-                            });
-                        }, onUnSuspend: () => {
-                            onChange({
-                                ...rowSummary,
-                                IsSuspended: false,
-                            });
-                        }, suspendableObject: rowSummary }) }), _jsx(SimpleButton, { icon: "delete", onClick: () => {
-                        onDelete();
-                    } })] }), className: "twa:p-2", children: [_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Position", children: _jsx(SingleSelect, { items: [
+    return (_jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-3 twa:h-full twa:min-h-0 twa:overflow-hidden", children: [_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Position", children: _jsx(SingleSelect, { items: [
                                 {
                                     label: 'Top',
                                     value: 'Top',
@@ -131,25 +157,13 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
                                     ...rowSummary,
                                     IncludeOnlyFilteredRows,
                                 });
-                            }, children: "Include Only Filtered Rows" }) })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:mt-2 twa:mb-1", children: [_jsx(Flex, { alignItems: "center", className: "twa:flex-1 twa:mb-2", children: "Column Aggregations" }), _jsx(Panel, { bodyProps: { className: 'twa:max-h-full twa:bg-primarylight ' }, className: "twa:h-[360px]", children: _jsx(ValueSelector, { style: { maxHeight: '100%' }, showFilterInput: true, filter: columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, toListLabel: (column) => {
+                            }, children: "Include Only Filtered Rows" }) })] }), _jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:flex twa:flex-col", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Aggregations" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select columns and choose an aggregation function for each" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: _jsx(ValueSelector, { style: { minHeight: 0, maxHeight: '100%' }, showFilterInput: true, toggleSelectionOnRowClick: false, filter: columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, optionLayout: "label-beside-checkbox", toListLabel: (column) => {
                                 const label = column.friendlyName ?? column.columnId;
-                                if (!(column.columnId in (rowSummary.ColumnsMap ?? {}))) {
-                                    return (_jsxs(Flex, { alignItems: "center", children: [label, _jsx(ColumnGroupTag, { column: column })] }));
-                                }
-                                const expressionOptions = getAvailableExpressionsForColumnType(column.dataType, availableScalarExpressions).map((expression) => ({
-                                    label: expression,
-                                    value: expression,
-                                }));
-                                // check out if this layout has a aggregation with weighted column
-                                const aggregation = layout.TableAggregationColumns?.find((agg) => agg.ColumnId === column.columnId)?.AggFunc;
-                                if (aggregation &&
-                                    typeof aggregation === 'object' &&
-                                    aggregation.weightedColumnId) {
-                                    expressionOptions.push({
-                                        label: 'WEIGHTERD_AVG',
-                                        value: WEIGHTED_AVERAGE_AGGREGATED_FUNCTION,
-                                    });
+                                const disabled = !(column.columnId in (rowSummary.ColumnsMap ?? {}));
+                                if (disabled) {
+                                    return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [label, _jsx(ColumnGroupTag, { column: column }), _jsx(SingleSelect, { disabled: true, items: [{ label: 'Select Aggregation', value: null }] })] }));
                                 }
+                                const expressionOptions = buildRowSummaryExpressionOptions(column, availableScalarExpressions, layout);
                                 const expression = rowSummary.ColumnsMap[column.columnId];
                                 return (_jsxs(Flex, { children: [_jsxs(Flex, { className: "twa:mr-2", alignItems: 'center', children: [label, _jsx(ColumnGroupTag, { column: column })] }), _jsx(SingleSelect, { value: expression, items: expressionOptions, onValueChange: (expression) => {
                                                 onChange({
@@ -163,7 +177,15 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
                             }, value: Object.keys(rowSummary.ColumnsMap), onChange: (colIds) => {
                                 const newColumnsMap = {};
                                 colIds.forEach((colId) => {
-                                    newColumnsMap[colId] = rowSummary.ColumnsMap[colId] ?? null;
+                                    const existing = rowSummary.ColumnsMap[colId];
+                                    if (existing) {
+                                        newColumnsMap[colId] = existing;
+                                        return;
+                                    }
+                                    const column = adaptable.api.columnApi.getColumnWithColumnId(colId);
+                                    newColumnsMap[colId] = column
+                                        ? getDefaultRowSummaryExpression(column, availableScalarExpressions, layout)
+                                        : null;
                                 });
                                 onChange({
                                     ...rowSummary,
@@ -174,39 +196,65 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
 export const RowSummarySection = (props) => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
+    const rowSummaries = layout.RowSummaries ?? [];
     const availableScalarExpressions = React.useMemo(() => {
         const sytemExpressions = adaptable.api.internalApi
             .getQueryLanguageService()
             .getModuleExpressionFunctionsMap(LayoutModuleId).aggregatedScalarFunctions;
         return sytemExpressions;
     }, []);
-    return (_jsxs(Tabs, { style: { height: '100%' }, children: [_jsx(Tabs.Tab, { children: "Row Summaries" }), _jsx(Tabs.Content, { children: _jsxs("div", { children: [_jsxs(Flex, { className: "twa:mb-1", children: [_jsx(Flex, { className: "twa:flex-1" }), _jsx(SimpleButton, { onClick: () => {
-                                        props.onChange({
-                                            ...layout,
-                                            RowSummaries: [
-                                                ...(layout.RowSummaries ?? []),
-                                                {
-                                                    Position: 'Top',
-                                                    ColumnsMap: {},
-                                                    IncludeOnlyFilteredRows: true,
-                                                },
-                                            ],
-                                        });
-                                    }, icon: "plus", children: "Add Row Summary" })] }), (layout.RowSummaries ?? []).map((rowSummary, index) => {
-                            return (_jsx(RowSummaryEditor, { onDelete: () => {
-                                    const newSummaries = [...layout.RowSummaries];
-                                    newSummaries.splice(index, 1);
-                                    props.onChange({
-                                        ...layout,
-                                        RowSummaries: newSummaries,
-                                    });
-                                }, availableScalarExpressions: availableScalarExpressions, rowSummary: rowSummary, onChange: (rowSummary) => {
-                                    const newSummaries = [...layout.RowSummaries];
-                                    newSummaries[index] = rowSummary;
-                                    props.onChange({
-                                        ...layout,
-                                        RowSummaries: newSummaries,
-                                    });
-                                } }, index));
-                        })] }) })] }));
+    const { bindCard, hasExpandedCard, expandedFillsSpace, expandedId, setExpandedId } = useWizardCardAccordion(null);
+    const handleAddRowSummary = () => {
+        const newIndex = rowSummaries.length;
+        props.onChange({
+            ...layout,
+            RowSummaries: [
+                ...rowSummaries,
+                {
+                    Position: 'Top',
+                    ColumnsMap: {},
+                    IncludeOnlyFilteredRows: true,
+                },
+            ],
+        });
+        setExpandedId(rowSummaryCardId(newIndex));
+    };
+    const handleDeleteRowSummary = (index) => {
+        const cardId = rowSummaryCardId(index);
+        const newSummaries = [...rowSummaries];
+        newSummaries.splice(index, 1);
+        props.onChange({
+            ...layout,
+            RowSummaries: newSummaries,
+        });
+        if (expandedId === cardId) {
+            setExpandedId(null);
+            return;
+        }
+        if (expandedId?.startsWith('row-summary-')) {
+            const expandedIndex = Number(expandedId.replace('row-summary-', ''));
+            if (!Number.isNaN(expandedIndex) && expandedIndex > index) {
+                setExpandedId(rowSummaryCardId(expandedIndex - 1));
+            }
+        }
+    };
+    return (_jsxs(Box, { className: cn(getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), 'twa:p-3'), children: [_jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:mb-2 twa:max-w-[520px] twa:shrink-0", children: "Add summary rows at the top or bottom of the grid with aggregated column values" }), _jsx(Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: _jsx(ButtonNew, { onClick: handleAddRowSummary, children: "Add Row Summary" }) }), _jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0", children: rowSummaries.map((rowSummary, index) => {
+                    const cardBinding = bindCard(rowSummaryCardId(index), { fillAvailable: true });
+                    return (_jsx(CollapsibleWizardCard, { ...cardBinding, surface: "panel", "data-name": `row-summary-${index}`, title: `Row Summary ${index + 1}`, help: "Configure position, filters, and column aggregations for this summary row", collapsedHelp: false, compactSummary: _jsx(RowSummaryPositionTag, { position: rowSummary.Position }), headerVisual: !cardBinding.expanded ? (_jsx(RowSummaryPositionTag, { position: rowSummary.Position })) : undefined, headerActions: _jsxs(_Fragment, { children: [cardBinding.expanded ? (_jsx(SuspendToggleButton, { iconSize: 26, className: objectListActionButtonClassName('suspend'), onSuspend: () => {
+                                        const newSummaries = [...rowSummaries];
+                                        newSummaries[index] = { ...rowSummary, IsSuspended: true };
+                                        props.onChange({ ...layout, RowSummaries: newSummaries });
+                                    }, onUnSuspend: () => {
+                                        const newSummaries = [...rowSummaries];
+                                        newSummaries[index] = { ...rowSummary, IsSuspended: false };
+                                        props.onChange({ ...layout, RowSummaries: newSummaries });
+                                    }, suspendableObject: rowSummary })) : null, _jsx(SimpleButton, { icon: "delete", variant: "text", tooltip: "Delete row summary", className: objectListActionButtonClassName('delete'), onClick: () => handleDeleteRowSummary(index) })] }), summary: _jsx(RowSummaryCardSummary, { rowSummary: rowSummary }), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0", children: _jsx(RowSummaryEditorForm, { rowSummary: rowSummary, availableScalarExpressions: availableScalarExpressions, onChange: (nextRowSummary) => {
+                                const newSummaries = [...rowSummaries];
+                                newSummaries[index] = nextRowSummary;
+                                props.onChange({
+                                    ...layout,
+                                    RowSummaries: newSummaries,
+                                });
+                            } }) }, rowSummaryCardId(index)));
+                }) })] }));
 };

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

@@ -1,12 +1,11 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import Input from '../../../../components/Input';
-import Radio from '../../../../components/Radio';
-import { Tabs } from '../../../../components/Tabs';
 import { Tag } from '../../../../components/Tag';
+import { TypeRadio } from '../../../Wizard/TypeRadio';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { isPivotLayout } from '../../../../Utilities/isPivotLayout';
 import { Box, Flex } from '../../../../components/Flex';
+import { Card } from '../../../../components/Card';
 export const SettingsSectionSummary = () => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     const isPivot = isPivotLayout(layout);
@@ -20,5 +19,5 @@ export const SettingsSection = (props) => {
             Name: event.target.value,
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { className: "twa:mb-3", children: [_jsx(Tabs.Tab, { children: "Settings" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "row", children: _jsx(FormLayout, { className: "twa:max-w-[300px] twa:w-full", children: _jsx(FormRow, { label: "Name", children: _jsx(Input, { className: "twa:w-full", "data-name": "layout-name", onChange: onNameChange, value: layout?.Name ?? '' }) }) }) }) })] }), _jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Grid Type" }), _jsx(Tabs.Content, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(Radio, { "data-name": "layout-type-table", disabled: true, checked: !isPivotLayout(layout), children: "Table" }), _jsx(Radio, { "data-name": "layout-type-pivot", disabled: true, checked: isPivotLayout(layout), children: "Pivot" })] }) })] })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for this Layout" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { className: "twa:max-w-[300px] twa:w-full", "data-name": "layout-name", onChange: onNameChange, value: layout?.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Grid Type" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsx(Box, { "data-name": "layout-type-table", children: _jsx(TypeRadio, { disabled: true, checked: !isPivotLayout(layout), text: "Table", description: "A flat layout \u2014 data is shown in standard rows and columns, one row per record" }) }), _jsx(Box, { "data-name": "layout-type-pivot", children: _jsx(TypeRadio, { disabled: true, checked: isPivotLayout(layout), text: "Pivot", description: "An aggregated layout \u2014 data is grouped and summarized by pivot columns" }) })] }) })] })] }));
 };

package/src/View/Layout/Wizard/sections/SortSection.d.ts

@@ -1,8 +1,18 @@
 import * as React from 'react';
 import { Layout } from '../../../../../types';
+import { useAdaptable } from '../../../AdaptableContext';
+import { type WizardCardAccordionBindCard } from '../../../Wizard/CollapsibleWizardCard';
 export declare const SortSectionSummary: React.FunctionComponent;
-interface SortSectionProps {
+export declare const buildColumnSortingSummary: (layout: Layout, adaptable: ReturnType<typeof useAdaptable>) => React.ReactNode;
+interface ColumnSortingWizardCardProps {
+    layout: Layout;
     onChange: (data: Layout) => void;
+    bindCard: WizardCardAccordionBindCard;
+    title?: string;
+    cardId?: string;
+    'data-name'?: string;
+    /** When expanded, grow to fill remaining section height. */
+    fillWhenExpanded?: boolean;
 }
-export declare const SortSection: React.FunctionComponent<SortSectionProps>;
+export declare const ColumnSortingWizardCard: React.FunctionComponent<ColumnSortingWizardCardProps>;
 export {};

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

@@ -1,50 +1,73 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../../components/SimpleButton';
-import { Tabs } from '../../../../components/Tabs';
-import { Tag } from '../../../../components/Tag';
+import { Card } from '../../../../components/Card';
+import { ColumnTag, Tag } from '../../../../components/Tag';
 import { getLayoutSortViewItems } from '../../../../Strategy/Utilities/Layout/getLayoutSortViewItems';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { columnFilter } from './Utilities';
+import { cn } from '../../../../lib/utils';
+import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
 import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../../../components/Flex';
+import { CollapsibleWizardCard, } from '../../../Wizard/CollapsibleWizardCard';
 export const SortSectionSummary = () => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     const adaptable = useAdaptable();
     const sortViewItems = getLayoutSortViewItems(layout, adaptable.api);
-    return (_jsx(Box, { children: sortViewItems.values.length ? (sortViewItems.values.map((value) => (_jsx(Tag, { className: "twa:mb-1 twa:mr-1", children: value }, value)))) : (_jsx(Tag, { children: "No Sorts" })) }));
+    return (_jsx(Box, { children: sortViewItems.values.length ? (sortViewItems.values.map((value) => (_jsx(ColumnTag, { className: "twa:mb-1 twa:mr-1", children: value }, value)))) : (_jsx(Tag, { children: "No Sorts" })) }));
 };
-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 (_jsxs(Flex, { alignItems: "center", children: [props.column.friendlyName, _jsx(ColumnGroupTag, { column: props.column }), SortOrder && (_jsx(SimpleButton, { className: "twa:ml-2", onClick: () => props.onSortChange(props.column.columnId, SortOrder === 'Asc' ? 'Desc' : 'Asc'), variant: "raised", icon: icon }))] }));
+const getColumnSortOrder = (layout, columnId) => (layout.ColumnSorts ?? []).find((sort) => sort.ColumnId === columnId)?.SortOrder;
+const SortDirectionButton = (props) => {
+    const icon = props.sortOrder === 'Asc' ? 'sort-asc' : 'sort-desc';
+    const sortTooltip = props.sortOrder === 'Asc' ? 'Ascending (A to Z)' : 'Descending (Z to A)';
+    return (_jsx(SimpleButton, { className: cn('twa:flex twa:items-center twa:justify-center twa:m-1 twa:p-1', props.compact ? 'twa:min-h-7 twa:min-w-7 twa:p-0' : 'twa:shrink-0'), tooltip: sortTooltip, onClick: (event) => {
+            event.stopPropagation();
+            props.onSortChange(props.columnId, props.sortOrder === 'Asc' ? 'Desc' : 'Asc');
+        }, variant: props.compact ? 'outlined' : 'raised', tone: props.compact ? 'none' : undefined, iconSize: props.compact ? 16 : undefined, icon: icon }));
 };
-export const SortSection = (props) => {
+const SortColumnRow = (props) => {
+    const sortOrder = getColumnSortOrder(props.layout, props.column.columnId);
+    return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Box, { className: props.compact ? 'twa:truncate' : undefined, children: props.column.friendlyName ?? props.column.columnId }), sortOrder ? (_jsx(SortDirectionButton, { compact: props.compact, columnId: props.column.columnId, sortOrder: sortOrder, onSortChange: props.onSortChange })) : null, _jsx(ColumnGroupTag, { column: props.column })] }));
+};
+const SORT_VALUE_SELECTOR_OPTION_CLASS = 'twa:!py-1.5 twa:!px-2 twa:min-h-[2.5rem]';
+export const buildColumnSortingSummary = (layout, adaptable) => {
+    const sortViewItems = getLayoutSortViewItems(layout, adaptable.api);
+    if (!sortViewItems.values.length) {
+        return _jsx(Tag, { children: "No sorts" });
+    }
+    return (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: sortViewItems.values.map((value) => (_jsx(ColumnTag, { children: value }, value))) }));
+};
+export const ColumnSortingWizardCard = (props) => {
+    const title = props.title ?? 'Sorting';
+    const cardId = props.cardId ?? 'sorting';
+    const dataName = props['data-name'] ?? 'column-sorting';
+    const fillWhenExpanded = props.fillWhenExpanded ?? true;
     const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
     const allSortableColumns = adaptable.api.columnApi.getSortableColumns();
     const sortedSortColumns = React.useMemo(() => {
-        return ArrayExtensions.sortArrayWithOrder(allSortableColumns.map((col) => col.columnId), (layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
-    }, [layout, allSortableColumns]);
+        return ArrayExtensions.sortArrayWithOrder(allSortableColumns.map((col) => col.columnId), (props.layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
+    }, [props.layout, allSortableColumns, adaptable]);
     const handleColumnsSelectionChange = React.useCallback((columnIds) => {
         props.onChange({
-            ...layout,
+            ...props.layout,
             ColumnSorts: (columnIds || []).map((columnId) => {
-                const SortOrder = layout.ColumnSorts?.find((sort) => sort.ColumnId === columnId)?.SortOrder ?? 'Asc';
+                const SortOrder = props.layout.ColumnSorts?.find((sort) => sort.ColumnId === columnId)?.SortOrder ??
+                    'Asc';
                 return {
                     ColumnId: columnId,
                     SortOrder: SortOrder,
                 };
             }),
         });
-    }, [layout]);
+    }, [props.layout, props.onChange]);
     const handleSortChange = React.useCallback((columnId, SortOrder) => {
         props.onChange({
-            ...layout,
-            ColumnSorts: layout.ColumnSorts?.map((sort) => {
+            ...props.layout,
+            ColumnSorts: props.layout.ColumnSorts?.map((sort) => {
                 if (sort.ColumnId === columnId) {
                     return {
                         ...sort,
@@ -54,6 +77,7 @@ export const SortSection = (props) => {
                 return sort;
             }),
         });
-    }, [layout]);
-    return (_jsxs(Tabs, { className: "twa:h-full", children: [_jsx(Tabs.Tab, { children: "Column Sorts" }), _jsx(Tabs.Content, { children: _jsx(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (_jsx(ColumnRow, { onSortChange: handleSortChange, layout: layout, column: column })), options: sortedSortColumns, value: (layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) })] }));
+    }, [props.layout, props.onChange]);
+    const sortViewItems = getLayoutSortViewItems(props.layout, adaptable.api);
+    return (_jsx(CollapsibleWizardCard, { ...props.bindCard(cardId, { fillAvailable: fillWhenExpanded }), surface: "panel", "data-name": dataName, title: title, help: "Select columns to sort and set their order. Drag to change sort priority.", collapsedHelp: "", compactSummary: sortViewItems.values.length ? (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: [sortViewItems.values.slice(0, 2).map((value) => (_jsx(ColumnTag, { className: "twa:shrink-0", children: value }, value))), sortViewItems.values.length > 2 ? (_jsxs("span", { className: "twa:text-xs twa:opacity-70 twa:shrink-0", children: ["+", sortViewItems.values.length - 2] })) : null] })) : ('No sorts'), summary: buildColumnSortingSummary(props.layout, adaptable), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:px-1 twa:pt-0 twa:pb-0", children: _jsx(Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "sorting-columns-container", children: _jsx(ValueSelector, { compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, toggleSelectionOnRowClick: true, optionClassName: SORT_VALUE_SELECTOR_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, optionLayout: "label-beside-checkbox", toListLabel: (column) => (_jsx(SortColumnRow, { compact: true, column: column, layout: props.layout, onSortChange: handleSortChange })), options: sortedSortColumns, value: (props.layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) }) }) }) }));
 };

package/src/View/Layout/Wizard/sections/columnLayoutCards.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Layout, TableLayout } from '../../../../../types';
+import { type WizardCardAccordionBindCard } from '../../../Wizard/CollapsibleWizardCard';
+import type { IAdaptable } from '../../../../AdaptableInterfaces/IAdaptable';
+import { type ColumnDefaultWidthResolver } from './columnLayoutHelpers';
+export declare const buildColumnPinningSummary: (layout: Layout, adaptable: IAdaptable) => React.ReactNode;
+export declare const buildColumnSizingSummary: (layout: Layout, adaptable: IAdaptable, resolveDefaultWidth: ColumnDefaultWidthResolver) => React.ReactNode;
+interface ColumnPinningWizardCardProps {
+    layout: TableLayout;
+    onChange: (data: Layout) => void;
+    bindCard: WizardCardAccordionBindCard;
+}
+export declare const ColumnPinningWizardCard: React.FunctionComponent<ColumnPinningWizardCardProps>;
+interface ColumnSizingWizardCardProps {
+    layout: TableLayout;
+    onChange: (data: Layout) => void;
+    bindCard: WizardCardAccordionBindCard;
+}
+export declare const ColumnSizingWizardCard: React.FunctionComponent<ColumnSizingWizardCardProps>;
+export {};

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

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import Input from '../../../../components/Input';
+import Radio, { RadioGroup, radioGroupStyling } from '../../../../components/Radio';
+import { useAdaptable } from '../../../AdaptableContext';
+import { CollapsibleWizardCard } from '../../../Wizard/CollapsibleWizardCard';
+import { columnFilter } from './Utilities';
+import { AdaptableFormControlTextClear } from '../../../Components/Forms/AdaptableFormControlTextClear';
+import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
+import { ColumnTag, Tag } from '../../../../components/Tag';
+import { Box, Flex } from '../../../../components/Flex';
+import { getLayoutWizardOrderedColumns } from './layoutWizardColumns';
+import { cn } from '../../../../lib/utils';
+import { COLUMN_PINNING_OPTIONS, formatColumnSizingBrief, getExplicitSizingDisplayValues, getLayoutExplicitSizedColumnIds, getLayoutPinnedColumnIds, hasExplicitLayoutSizing, } from './columnLayoutHelpers';
+const PinningColumnRow = (props) => {
+    const columnPinning = props.layout.ColumnPinning?.[props.column.columnId];
+    const currentPin = columnPinning === 'left' || columnPinning === 'right' ? columnPinning : 'None';
+    return (_jsxs(Flex, { alignItems: "center", className: cn('ab-Layout-Wizard__ColumnListRow', 'twa:bg-primary twa:text-primary-foreground twa:rounded-standard', 'twa:gap-2 twa:py-1.5 twa:px-2 twa:min-h-[2.5rem]'), "data-name": `pinning-row-${props.column.columnId}`, children: [_jsx(Box, { className: "twa:flex-1 twa:min-w-0 twa:truncate", children: _jsxs(Flex, { alignItems: "center", children: [props.column.friendlyName ?? props.column.columnId, _jsx(ColumnGroupTag, { column: props.column })] }) }), _jsx(RadioGroup, { orientation: "horizontal", variant: "text-only", className: cn(radioGroupStyling.horizontalTextOnly, 'twa:shrink-0'), value: currentPin, name: `pinning-${props.column.columnId}`, onRadioChange: (value) => {
+                    props.onPinChange(props.column.columnId, value === 'None' ? null : value);
+                }, children: COLUMN_PINNING_OPTIONS.map((option) => (_jsx(Radio, { value: option.value, "data-name": `pinning-${props.column.columnId}-${option.value}`, children: option.label }, option.value))) })] }));
+};
+const SizingColumnRow = (props) => {
+    const sizing = props.layout.ColumnSizing?.[props.column.columnId];
+    const displayValues = getExplicitSizingDisplayValues(props.column.columnId, sizing, props.resolveDefaultWidth);
+    const resizable = props.column.resizable !== false;
+    const parseNumberInput = (value) => {
+        const parsed = parseFloat(value);
+        return typeof parsed === 'number' && !isNaN(parsed) ? parsed : undefined;
+    };
+    const sizingLabelClass = 'twa:text-xs twa:opacity-70 twa:shrink-0';
+    const sizingInputClass = 'ab-Layout-Wizard__ColumnLayoutSizingInput ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:!min-h-0 twa:text-2';
+    const sizingField = (label, inputName, value, onChange) => (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:shrink-0", children: [_jsx(Box, { className: sizingLabelClass, children: label }), _jsx(Input, { "data-name": inputName, className: sizingInputClass, type: "number", placeholder: "\u2014", disabled: !resizable, onChange: (event) => {
+                    onChange(parseNumberInput(event.target.value));
+                }, value: value ?? '' })] }));
+    return (_jsxs(Flex, { alignItems: "center", className: cn('ab-Layout-Wizard__ColumnListRow', 'twa:bg-primary twa:text-primary-foreground twa:rounded-standard', 'twa:gap-2 twa:py-1.5 twa:px-2 twa:min-h-[2.5rem] twa:min-w-0'), "data-name": `sizing-row-${props.column.columnId}`, children: [_jsx(Box, { className: "twa:flex-1 twa:min-w-0 twa:truncate", children: _jsxs(Flex, { alignItems: "center", children: [props.column.friendlyName ?? props.column.columnId, _jsx(ColumnGroupTag, { column: props.column })] }) }), _jsxs(Flex, { alignItems: "center", className: "twa:gap-4 twa:flex-shrink-0", children: [sizingField('Width', `sizing-width-${props.column.columnId}`, displayValues.width, (value) => props.onColumnWidthChange(props.column.columnId, value)), sizingField('Flex', `sizing-flex-${props.column.columnId}`, displayValues.flex, (value) => props.onColumnFlexChange(props.column.columnId, value)), sizingField('Min', `sizing-min-${props.column.columnId}`, displayValues.minWidth, (value) => props.onColumnMinWidthChange(props.column.columnId, value)), sizingField('Max', `sizing-max-${props.column.columnId}`, displayValues.maxWidth, (value) => props.onColumnMaxWidthChange(props.column.columnId, value))] })] }));
+};
+export const buildColumnPinningSummary = (layout, adaptable) => {
+    const leftPinned = getLayoutPinnedColumnIds(layout, 'left');
+    const rightPinned = getLayoutPinnedColumnIds(layout, 'right');
+    if (!leftPinned.length && !rightPinned.length) {
+        return _jsx(Tag, { children: "None pinned" });
+    }
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [leftPinned.length ? (_jsxs(Flex, { flexWrap: "wrap", className: "twa:gap-1 twa:items-center", children: [_jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "Left:" }), leftPinned.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout) }, columnId)))] })) : null, rightPinned.length ? (_jsxs(Flex, { flexWrap: "wrap", className: "twa:gap-1 twa:items-center", children: [_jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "Right:" }), rightPinned.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout) }, columnId)))] })) : null] }));
+};
+export const buildColumnSizingSummary = (layout, adaptable, resolveDefaultWidth) => {
+    const sizedColumnIds = getLayoutExplicitSizedColumnIds(layout, resolveDefaultWidth);
+    if (!sizedColumnIds.length) {
+        return _jsx(Tag, { children: "Default sizing" });
+    }
+    return (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: sizedColumnIds.map((columnId) => (_jsxs(ColumnTag, { children: [adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout), " (", formatColumnSizingBrief(columnId, layout.ColumnSizing?.[columnId], resolveDefaultWidth), ")"] }, columnId))) }));
+};
+export const ColumnPinningWizardCard = (props) => {
+    const adaptable = useAdaptable();
+    const [pinningSearch, setPinningSearch] = React.useState('');
+    const layoutColumns = React.useMemo(() => getLayoutWizardOrderedColumns(adaptable, props.layout), [adaptable, props.layout]);
+    const filteredPinningColumns = pinningSearch
+        ? layoutColumns.filter((col) => columnFilter(col, pinningSearch))
+        : layoutColumns;
+    const handlePinChange = (columnId, pinning) => {
+        const ColumnPinning = { ...props.layout.ColumnPinning };
+        if (pinning) {
+            ColumnPinning[columnId] = pinning;
+        }
+        else {
+            delete ColumnPinning[columnId];
+        }
+        props.onChange({
+            ...props.layout,
+            ColumnPinning,
+        });
+    };
+    const leftPinned = getLayoutPinnedColumnIds(props.layout, 'left');
+    const rightPinned = getLayoutPinnedColumnIds(props.layout, 'right');
+    const pinnedColumnIds = [...leftPinned, ...rightPinned];
+    return (_jsx(CollapsibleWizardCard, { ...props.bindCard('pinning', { fillAvailable: true }), surface: "panel", "data-name": "column-pinning", title: "Pinning", help: "Pin columns to the left or right of the grid", collapsedHelp: "", compactSummary: pinnedColumnIds.length ? (_jsxs("span", { children: [pinnedColumnIds.length, " pinned", leftPinned.length && rightPinned.length
+                    ? ` (${leftPinned.length} left, ${rightPinned.length} right)`
+                    : leftPinned.length
+                        ? ' (left)'
+                        : ' (right)'] })) : ('None pinned'), summary: buildColumnPinningSummary(props.layout, adaptable), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:h-full twa:min-h-0 twa:p-1", children: [_jsx(AdaptableFormControlTextClear, { value: pinningSearch, OnTextChange: setPinningSearch, placeholder: "Search columns...", className: "twa:w-full" }), _jsx(Flex, { flexDirection: "column", className: "twa:gap-0.5 twa:flex-1 twa:min-h-0 twa:overflow-y-auto", children: filteredPinningColumns.map((column) => (_jsx(PinningColumnRow, { column: column, layout: props.layout, onPinChange: handlePinChange }, column.columnId))) })] }) }));
+};
+export const ColumnSizingWizardCard = (props) => {
+    const adaptable = useAdaptable();
+    const [sizingSearch, setSizingSearch] = React.useState('');
+    const resolveDefaultWidth = React.useCallback((columnId) => adaptable.getDefaultColumnWidthForCol(columnId), [adaptable]);
+    const layoutColumns = React.useMemo(() => getLayoutWizardOrderedColumns(adaptable, props.layout), [adaptable, props.layout]);
+    const filteredSizingColumns = sizingSearch
+        ? layoutColumns.filter((col) => columnFilter(col, sizingSearch))
+        : layoutColumns;
+    const updateColumnSizing = (columnId, update) => {
+        const ColumnSizing = { ...props.layout.ColumnSizing };
+        const colSizingForCol = { ...(ColumnSizing[columnId] ?? {}) };
+        const updated = update(colSizingForCol);
+        if (hasExplicitLayoutSizing(columnId, updated, resolveDefaultWidth)) {
+            ColumnSizing[columnId] = updated;
+        }
+        else {
+            delete ColumnSizing[columnId];
+        }
+        props.onChange({
+            ...props.layout,
+            ColumnSizing,
+        });
+    };
+    const handleColumnWidthChange = (columnId, width) => {
+        updateColumnSizing(columnId, (colSizing) => {
+            const next = { ...colSizing };
+            if (width == null ||
+                width === resolveDefaultWidth(columnId)) {
+                delete next.Width;
+            }
+            else {
+                delete next.Flex;
+                next.Width = width;
+            }
+            return next;
+        });
+    };
+    const handleColumnFlexChange = (columnId, flex) => {
+        updateColumnSizing(columnId, (colSizing) => {
+            const next = { ...colSizing };
+            if (flex == null) {
+                delete next.Flex;
+            }
+            else {
+                delete next.Width;
+                next.Flex = flex;
+            }
+            return next;
+        });
+    };
+    const handleColumnMinWidthChange = (columnId, minWidth) => {
+        updateColumnSizing(columnId, (colSizing) => {
+            const next = { ...colSizing };
+            if (minWidth == null) {
+                delete next.MinWidth;
+            }
+            else {
+                next.MinWidth = minWidth;
+            }
+            return next;
+        });
+    };
+    const handleColumnMaxWidthChange = (columnId, maxWidth) => {
+        updateColumnSizing(columnId, (colSizing) => {
+            const next = { ...colSizing };
+            if (maxWidth == null) {
+                delete next.MaxWidth;
+            }
+            else {
+                next.MaxWidth = maxWidth;
+            }
+            return next;
+        });
+    };
+    const sizedColumnIds = getLayoutExplicitSizedColumnIds(props.layout, resolveDefaultWidth);
+    return (_jsx(CollapsibleWizardCard, { ...props.bindCard('sizing', { fillAvailable: true }), surface: "panel", "data-name": "column-sizing", title: "Sizing", help: "Set width, flex, and min/max overrides. Default column widths are not stored in the Layout.", collapsedHelp: "", compactSummary: sizedColumnIds.length
+            ? `${sizedColumnIds.length} custom ${sizedColumnIds.length === 1 ? 'size' : 'sizes'}`
+            : 'Default sizing', summary: buildColumnSizingSummary(props.layout, adaptable, resolveDefaultWidth), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-1.5 twa:h-full twa:min-h-0 twa:p-1", children: [_jsx(AdaptableFormControlTextClear, { value: sizingSearch, OnTextChange: setSizingSearch, placeholder: "Search columns...", className: "twa:w-full" }), _jsx(Flex, { flexDirection: "column", className: "twa:gap-0.5 twa:flex-1 twa:min-h-0 twa:overflow-y-auto", children: filteredSizingColumns.map((column) => (_jsx(SizingColumnRow, { column: column, layout: props.layout, resolveDefaultWidth: resolveDefaultWidth, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange }, column.columnId))) })] }) }));
+};