@adaptabletools/adaptable 12.1.4 → 12.1.5

package/src/Utilities/Constants/ModuleConstants.js

@@ -1,36 +1,105 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatusBarModuleId = exports.SettingsPanelModuleId = exports.ToolPanelModuleId = exports.ThemeModuleId = exports.TeamSharingModuleId = exports.SystemStatusModuleId = exports.StateManagementModuleId = exports.SmartEditModuleId = exports.ShortcutModuleId = exports.ScheduleModuleId = exports.QuickSearchModuleId = exports.QueryModuleId = exports.PlusMinusModuleId = exports.OpenFinModuleId = exports.LayoutModuleId = exports.IPushPullModuleId = exports.GridInfoModuleId = exports.Glue42ModuleId = exports.FreeTextColumnModuleId = exports.FormatColumnModuleId = exports.FilterModuleId = exports.ExportModuleId = exports.DataSetModuleId = exports.DataChangeHistoryModuleId = exports.DashboardModuleId = exports.CustomSortModuleId = exports.ConditionalStyleModuleId = exports.ChartingModuleId = exports.CellSummaryModuleId = exports.CalculatedColumnModuleId = exports.BulkUpdateModuleId = exports.FlashingCellModuleId = exports.AlertModuleId = void 0;
+exports.ShortcutFriendlyName = exports.ShortcutModuleId = exports.ScheduleFriendlyName = exports.ScheduleModuleId = exports.QuickSearchFriendlyName = exports.QuickSearchModuleId = exports.QueryFriendlyName = exports.QueryModuleId = exports.PlusMinusFriendlyName = exports.PlusMinusModuleId = exports.OpenFinFriendlyName = exports.OpenFinModuleId = exports.LayoutFriendlyName = exports.LayoutModuleId = exports.IPushPullFriendlyName = exports.IPushPullModuleId = exports.GridInfoFriendlyName = exports.GridInfoModuleId = exports.Glue42FriendlyName = exports.Glue42ModuleId = exports.FreeTextColumnFriendlyName = exports.FreeTextColumnModuleId = exports.FormatColumnFriendlyName = exports.FormatColumnModuleId = exports.FilterFriendlyName = exports.FilterModuleId = exports.ExportFriendlyName = exports.ExportModuleId = exports.DataSetFriendlyName = exports.DataSetModuleId = exports.DataChangeHistoryFriendlyName = exports.DataChangeHistoryModuleId = exports.DashboardFriendlyName = exports.DashboardModuleId = exports.CustomSortFriendlyName = exports.CustomSortModuleId = exports.ConditionalStyleFriendlyName = exports.ConditionalStyleModuleId = exports.ChartingFriendlyName = exports.ChartingModuleId = exports.CellSummaryFriendlyName = exports.CellSummaryModuleId = exports.CalculatedColumnFriendlyName = exports.CalculatedColumnModuleId = exports.BulkUpdateFriendlyName = exports.BulkUpdateModuleId = exports.FlashingCellFriendlyName = exports.FlashingCellModuleId = exports.AlertModuleFriendlyName = exports.AlertModuleId = void 0;
+exports.ADAPTABLE_MODULE_MAP = exports.StatusBarFriendlyName = exports.StatusBarModuleId = exports.SettingsPanelFriendlyName = exports.SettingsPanelModuleId = exports.ToolPanelFriendlyName = exports.ToolPanelModuleId = exports.ThemeFriendlyName = exports.ThemeModuleId = exports.TeamSharingFriendlyName = exports.TeamSharingModuleId = exports.SystemStatusFriendlyName = exports.SystemStatusModuleId = exports.StateManagementFriendlyName = exports.StateManagementModuleId = exports.SmartEditFriendlyName = exports.SmartEditModuleId = void 0;
 exports.AlertModuleId = 'Alert';
+exports.AlertModuleFriendlyName = 'Alert';
 exports.FlashingCellModuleId = 'FlashingCell';
+exports.FlashingCellFriendlyName = 'Flashing Cell';
 exports.BulkUpdateModuleId = 'BulkUpdate';
+exports.BulkUpdateFriendlyName = 'Bulk Update';
 exports.CalculatedColumnModuleId = 'CalculatedColumn';
+exports.CalculatedColumnFriendlyName = 'Calculated Column';
 exports.CellSummaryModuleId = 'CellSummary';
+exports.CellSummaryFriendlyName = 'Cell Summary';
 exports.ChartingModuleId = 'Charting';
+exports.ChartingFriendlyName = 'Charts';
 exports.ConditionalStyleModuleId = 'ConditionalStyle';
+exports.ConditionalStyleFriendlyName = 'Conditional Style';
 exports.CustomSortModuleId = 'CustomSort';
+exports.CustomSortFriendlyName = 'Custom Sort';
 exports.DashboardModuleId = 'Dashboard';
+exports.DashboardFriendlyName = 'Dashboard';
 exports.DataChangeHistoryModuleId = 'DataChangeHistory';
+exports.DataChangeHistoryFriendlyName = 'Data Changes';
 exports.DataSetModuleId = 'DataSet';
+exports.DataSetFriendlyName = 'Data Set';
 exports.ExportModuleId = 'Export';
+exports.ExportFriendlyName = 'Export';
 exports.FilterModuleId = 'Filter';
+exports.FilterFriendlyName = 'Filter';
 exports.FormatColumnModuleId = 'FormatColumn';
+exports.FormatColumnFriendlyName = 'Format Column';
 exports.FreeTextColumnModuleId = 'FreeTextColumn';
+exports.FreeTextColumnFriendlyName = 'Free Text Column';
 exports.Glue42ModuleId = 'Glue42';
+exports.Glue42FriendlyName = 'Glue42';
 exports.GridInfoModuleId = 'GridInfo';
+exports.GridInfoFriendlyName = 'Grid Info';
 exports.IPushPullModuleId = 'IPushPull';
+exports.IPushPullFriendlyName = 'IPushPull';
 exports.LayoutModuleId = 'Layout';
+exports.LayoutFriendlyName = 'Layout';
 exports.OpenFinModuleId = 'OpenFin';
+exports.OpenFinFriendlyName = 'OpenFin';
 exports.PlusMinusModuleId = 'PlusMinus';
+exports.PlusMinusFriendlyName = 'Plus Minus';
 exports.QueryModuleId = 'Query';
+exports.QueryFriendlyName = 'Query';
 exports.QuickSearchModuleId = 'QuickSearch';
+exports.QuickSearchFriendlyName = 'Quick Search';
 exports.ScheduleModuleId = 'Schedule';
+exports.ScheduleFriendlyName = 'Schedule';
 exports.ShortcutModuleId = 'Shortcut';
+exports.ShortcutFriendlyName = 'Shortcut';
 exports.SmartEditModuleId = 'SmartEdit';
+exports.SmartEditFriendlyName = 'Smart Edit';
 exports.StateManagementModuleId = 'StateManagement';
+exports.StateManagementFriendlyName = 'Manage State';
 exports.SystemStatusModuleId = 'SystemStatus';
+exports.SystemStatusFriendlyName = 'System Status';
 exports.TeamSharingModuleId = 'TeamSharing';
+exports.TeamSharingFriendlyName = 'Team Sharing';
 exports.ThemeModuleId = 'Theme';
+exports.ThemeFriendlyName = 'Theme';
 exports.ToolPanelModuleId = 'ToolPanel';
+exports.ToolPanelFriendlyName = 'Tool Panel';
 exports.SettingsPanelModuleId = 'SettingsPanel';
+exports.SettingsPanelFriendlyName = 'Settings Panel';
 exports.StatusBarModuleId = 'StatusBar';
+exports.StatusBarFriendlyName = 'Status Bar';
+exports.ADAPTABLE_MODULE_MAP = {
+    [exports.AlertModuleId]: exports.AlertModuleFriendlyName,
+    [exports.FlashingCellModuleId]: exports.FlashingCellFriendlyName,
+    [exports.BulkUpdateModuleId]: exports.BulkUpdateFriendlyName,
+    [exports.CalculatedColumnModuleId]: exports.CalculatedColumnFriendlyName,
+    [exports.CellSummaryModuleId]: exports.CellSummaryFriendlyName,
+    [exports.ChartingModuleId]: exports.ChartingFriendlyName,
+    [exports.ConditionalStyleModuleId]: exports.ConditionalStyleFriendlyName,
+    [exports.CustomSortModuleId]: exports.CustomSortFriendlyName,
+    [exports.DashboardModuleId]: exports.DashboardFriendlyName,
+    [exports.DataChangeHistoryModuleId]: exports.DataChangeHistoryFriendlyName,
+    [exports.DataSetModuleId]: exports.DataSetFriendlyName,
+    [exports.ExportModuleId]: exports.ExportFriendlyName,
+    [exports.FilterModuleId]: exports.FilterFriendlyName,
+    [exports.FormatColumnModuleId]: exports.FormatColumnFriendlyName,
+    [exports.FreeTextColumnModuleId]: exports.FreeTextColumnFriendlyName,
+    [exports.Glue42ModuleId]: exports.Glue42FriendlyName,
+    [exports.GridInfoModuleId]: exports.GridInfoFriendlyName,
+    [exports.IPushPullModuleId]: exports.IPushPullFriendlyName,
+    [exports.LayoutModuleId]: exports.LayoutFriendlyName,
+    [exports.OpenFinModuleId]: exports.OpenFinFriendlyName,
+    [exports.PlusMinusModuleId]: exports.PlusMinusFriendlyName,
+    [exports.QueryModuleId]: exports.QueryFriendlyName,
+    [exports.QuickSearchModuleId]: exports.QuickSearchFriendlyName,
+    [exports.ScheduleModuleId]: exports.ScheduleFriendlyName,
+    [exports.ShortcutModuleId]: exports.ShortcutFriendlyName,
+    [exports.SmartEditModuleId]: exports.SmartEditFriendlyName,
+    [exports.StateManagementModuleId]: exports.StateManagementFriendlyName,
+    [exports.SystemStatusModuleId]: exports.SystemStatusFriendlyName,
+    [exports.TeamSharingModuleId]: exports.TeamSharingFriendlyName,
+    [exports.ThemeModuleId]: exports.ThemeFriendlyName,
+    [exports.ToolPanelModuleId]: exports.ToolPanelFriendlyName,
+    [exports.SettingsPanelModuleId]: exports.SettingsPanelFriendlyName,
+    [exports.StatusBarModuleId]: exports.StatusBarFriendlyName,
+};

package/src/Utilities/Defaults/DefaultAdaptableOptions.js

@@ -12,6 +12,7 @@ const aggregatedBooleanExpressionFunctions_1 = require("../ExpressionFunctions/a
 const AdaptablePredicate_1 = require("../../PredefinedConfig/Common/AdaptablePredicate");
 const Enums_1 = require("../../PredefinedConfig/Common/Enums");
 const aggregatedScalarExpressionFunctions_1 = require("../ExpressionFunctions/aggregatedScalarExpressionFunctions");
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 // change type to DeepRequired<AdaptableOptions> to check which properties have no default values defined
 exports.DefaultAdaptableOptions = {
     adaptableId: GeneralConstants.ADAPTABLE_ID,
@@ -260,7 +261,7 @@ exports.DefaultAdaptableOptions = {
     },
     settingsPanelOptions: {
         popupType: 'window',
-        title: 'Settings Panel',
+        title: ModuleConstants.SettingsPanelFriendlyName,
         icon: 'ConfigurationIcon',
         navigation: {},
         alwaysShowInDashboard: false,

package/src/Utilities/Services/Interface/IMetamodelService.d.ts

@@ -1,3 +1,5 @@
+import { AdaptableOptions } from '../../../../types';
+import { MetamodelItemPropertyKind } from '../../../metamodel/adaptable-metamodel-model';
 import { IAdaptableService } from './IAdaptableService';
 export declare type GridInfoOptions = Map<string, {
     containerLabel: string;
@@ -7,9 +9,12 @@ export interface GridInfoOption {
     name: string;
     value: any;
     description: string;
+    kind: MetamodelItemPropertyKind;
     defaultValue?: any;
 }
 export interface IMetamodelService extends IAdaptableService {
+    getAdaptableOptions: () => AdaptableOptions;
     getGridInfoOptions(): GridInfoOptions;
+    getGridInfoNoCodeOptions(): GridInfoOptions;
     validateAdaptableOptionsValues(): void;
 }

package/src/Utilities/Services/MetamodelService.d.ts

@@ -1,10 +1,11 @@
 import { GridInfoOptions, IMetamodelService } from './Interface/IMetamodelService';
-import { AdaptableApi } from '../../../types';
+import { AdaptableOptions } from '../../../types';
 export declare class MetamodelService implements IMetamodelService {
-    private adaptableApi;
     private gridInfoOptions;
-    constructor(adaptableApi: AdaptableApi);
+    getAdaptableOptions: () => AdaptableOptions;
+    constructor(getAdaptableOptions: () => AdaptableOptions);
     getGridInfoOptions(): GridInfoOptions;
+    getGridInfoNoCodeOptions(): GridInfoOptions;
     validateAdaptableOptionsValues(): void;
     private validateOptionsObject;
     private getExpectedOptionsValueType;
@@ -13,5 +14,4 @@ export declare class MetamodelService implements IMetamodelService {
     private getAdaptableOptionsDefaultValues;
     private getAdaptableMetamodel;
     private getAdaptableOptionsMetamodel;
-    private getAdaptableOptions;
 }

package/src/Utilities/Services/MetamodelService.js

@@ -14,15 +14,23 @@ const supportedMetamodelTypes = [
     'REFERENCE',
 ];
 class MetamodelService {
-    constructor(adaptableApi) {
-        this.adaptableApi = adaptableApi;
+    constructor(getAdaptableOptions) {
         this.gridInfoOptions = new Map();
-        this.adaptableApi = adaptableApi;
+        this.getAdaptableOptions = () => null;
+        this.getAdaptableOptions = getAdaptableOptions;
         this.gridInfoOptions = this.buildGridInfoOptions();
     }
     getGridInfoOptions() {
         return this.gridInfoOptions;
     }
+    getGridInfoNoCodeOptions() {
+        return this.buildGridInfoOptions({
+            filterItemProperty: (itemProperty) => {
+                return itemProperty.noCode === 'item';
+            },
+            filterEmptyAdaptableOptions: false,
+        });
+    }
     validateAdaptableOptionsValues() {
         var _a;
         LoggingHelper_1.LogAdaptableInfo('Validating Adaptable Options...');
@@ -79,7 +87,8 @@ class MetamodelService {
             return metamodelPropertyKind;
         }
     }
-    buildGridInfoOptions() {
+    buildGridInfoOptions(options) {
+        const { filterItemProperty, filterEmptyAdaptableOptions = true } = options || {};
         const gridInfoOptions = new Map();
         const adaptableMetamodel = this.getAdaptableMetamodel();
         const adaptableOptionsMetamodel = this.getAdaptableOptionsMetamodel();
@@ -107,12 +116,12 @@ class MetamodelService {
             // @ts-ignore
             const containerOptionsDefaultValues = adaptableOptionsDefaultValues[adaptableOptionsName];
             if (!containerOptionsMetamodel ||
-                !containerOptionsValues ||
+                (!containerOptionsValues && filterEmptyAdaptableOptions) ||
                 !containerOptionsDefaultValues) {
                 // should never happen
                 return;
             }
-            const optionItems = this.mapGridInfoContainerItems(containerOptionsMetamodel, containerOptionsValues, containerOptionsDefaultValues);
+            const optionItems = this.mapGridInfoContainerItems(containerOptionsMetamodel, containerOptionsValues, containerOptionsDefaultValues, filterItemProperty);
             gridInfoOptions.set(containerOptionItem.name, {
                 containerLabel: containerOptionItem.uiLabel,
                 items: optionItems,
@@ -120,13 +129,14 @@ class MetamodelService {
         });
         return gridInfoOptions;
     }
-    mapGridInfoContainerItems(optionItemContainer, adaptableOptionsValues, defaultAdaptableOptionsValues) {
+    mapGridInfoContainerItems(optionItemContainer, adaptableOptionsValues, defaultAdaptableOptionsValues, filter = (itemProperty) => itemProperty.gridInfo === 'item') {
         var _a;
-        return (_a = optionItemContainer.properties) === null || _a === void 0 ? void 0 : _a.filter((itemProperty) => itemProperty.gridInfo === 'item').map((itemProperty) => {
+        return (_a = optionItemContainer.properties) === null || _a === void 0 ? void 0 : _a.filter(filter).map((itemProperty) => {
             return {
                 name: itemProperty.name,
-                value: adaptableOptionsValues[itemProperty.name],
+                value: adaptableOptionsValues === null || adaptableOptionsValues === void 0 ? void 0 : adaptableOptionsValues[itemProperty.name],
                 defaultValue: defaultAdaptableOptionsValues[itemProperty.name],
+                kind: itemProperty.kind,
                 description: itemProperty.description,
             };
         });
@@ -140,8 +150,5 @@ class MetamodelService {
     getAdaptableOptionsMetamodel() {
         return this.getAdaptableMetamodel()['AdaptableOptions'];
     }
-    getAdaptableOptions() {
-        return this.adaptableApi.internalApi.getAdaptableOptions();
-    }
 }
 exports.MetamodelService = MetamodelService;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.js

@@ -5,12 +5,13 @@ const React = tslib_1.__importStar(require("react"));
 const useSelection_1 = tslib_1.__importDefault(require("./useSelection"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
-const AdaptableObjectCollection_1 = require("../../Components/AdaptableObjectCollection");
 const Dropdown_1 = tslib_1.__importDefault(require("../../../components/Dropdown"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const react_1 = require("react");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
+const InfiniteTable_1 = require("../../../components/InfiniteTable");
+const rebass_1 = require("rebass");
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
 const dataTypes = [
     {
         value: 'abColDefString',
@@ -28,7 +29,7 @@ const dataTypes = [
 ];
 const inputStyle = {
     width: '100%',
-    minWidth: 50,
+    minWidth: 80,
     textAlign: 'start',
 };
 const useForceRender = () => {
@@ -37,6 +38,26 @@ const useForceRender = () => {
         setNow(Date.now());
     };
 };
+const ThrottledInput = React.memo((props) => {
+    const [stateValue, setStateValue] = react_1.useState(props.value);
+    const throttleOnChange = React.useRef(throttle_1.default(props.onChange, 600, { leading: false }));
+    const handleChange = React.useCallback((event) => {
+        const newValue = event.target.value;
+        setStateValue(newValue);
+        throttleOnChange.current(newValue);
+    }, []);
+    React.useEffect(() => {
+        setStateValue(props.value);
+    }, [props.value]);
+    return React.createElement(Input_1.default, { style: props.style, value: stateValue, onChange: handleChange });
+});
+const tableDOMProps = {
+    style: {
+        height: '100%',
+        minWidth: '10rem',
+        minHeight: 600,
+    },
+};
 const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, }) => {
     const rerender = useForceRender();
     const columnsRef = react_1.useRef(cols);
@@ -72,7 +93,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             }
             return c;
         });
-        silentSetColumns(cols);
+        setColumns(cols);
     };
     const onColumnTypeChange = (col, type) => {
         const cols = getColumns().map((c) => {
@@ -131,144 +152,181 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
     });
     const allIncluded = isAllIncludedColumns();
     const allExcluded = isNoneIncludedColumns();
-    const colItems = [
-        { Content: 'Primary Key', Size: 3, key: 'pk' },
-        {
-            key: 'included',
-            Content: (React.createElement("b", null,
-                React.createElement("div", null, "Included"),
-                React.createElement(CheckBox_1.CheckBox, { checked: allIncluded ? true : allExcluded ? false : null, onChange: (allIncluded) => {
-                        if (allIncluded) {
-                            includeAllColumns();
-                        }
-                        else {
-                            excludeAllColumns();
+    React.useEffect(() => {
+        onValidityChange(isIncludedColumn(primaryKeyField));
+    }, [includedColumnsMap, primaryKeyField]);
+    const rowHeight = 40;
+    const data = columns;
+    const CellWrapper = (props) => {
+        return (React.createElement(rebass_1.Flex, Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), { position: 'absolute', textAlign: 'center', top: 0, left: 0, height: '100%', width: '100%', whiteSpace: 'normal' }), justifyContent: "center", alignItems: "center" }), props.children));
+    };
+    const HeaderCellWrapper = (props) => (React.createElement(CellWrapper, Object.assign({}, props, { fontSize: 3, style: { fontWeight: 600 } })));
+    const HeaderWithCheckbox = (props) => {
+        const { label, onChange, checked } = props, flexProps = tslib_1.__rest(props, ["label", "onChange", "checked"]);
+        return (React.createElement(HeaderCellWrapper, Object.assign({}, flexProps, { flexDirection: "column" }),
+            React.createElement(rebass_1.Box, null, label),
+            React.createElement(rebass_1.Box, { style: { textAlign: 'center' } },
+                React.createElement(CheckBox_1.CheckBox, { checked: checked, onChange: onChange }))));
+    };
+    const columnsMap = {
+        pk: {
+            header: () => React.createElement(HeaderCellWrapper, null, "Primary Key"),
+            maxWidth: 80,
+            sortable: false,
+            render: (params) => {
+                const { data } = params;
+                const column = data;
+                const isPrimaryKey = (column === null || column === void 0 ? void 0 : column.field) === primaryKeyField;
+                return (React.createElement(Radio_1.default, { checked: isPrimaryKey, onChange: (checked) => {
+                        if (checked && isIncludedColumn(column.field)) {
+                            setPrimaryKeyField(column.field);
                         }
-                    } }))),
-            Size: 3,
+                    } }));
+            },
         },
-        { Content: 'Field', Size: 5, key: 'field' },
-        { Content: 'Type', Size: 4, key: 'size' },
-        {
-            key: 'sortable',
-            Content: (React.createElement("b", null,
-                React.createElement("div", null, "Sortable"),
-                React.createElement(CheckBox_1.CheckBox, { checked: isAllSortableColumns() ? true : isNoneSortableColumns() ? false : null, onChange: (allSortable) => {
-                        if (allSortable) {
-                            setAllSortable();
-                        }
-                        else {
-                            setAllUnsortable();
-                        }
-                    } }))),
-            Size: 3,
+        included: {
+            maxWidth: 80,
+            resizable: true,
+            header: () => (React.createElement(HeaderWithCheckbox, { label: "Included", checked: allIncluded ? true : allExcluded ? false : null, onChange: (allIncluded) => {
+                    if (allIncluded) {
+                        includeAllColumns();
+                    }
+                    else {
+                        excludeAllColumns();
+                    }
+                } })),
+            render: (params) => {
+                const column = params.data;
+                return (React.createElement(CellWrapper, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: isIncludedColumn(column.field), onChange: (included) => {
+                            if (included) {
+                                includeColumn(column.field);
+                            }
+                            else {
+                                excludeColumn(column.field);
+                            }
+                        } })));
+            },
         },
-        {
-            key: 'editable',
-            Content: (React.createElement("b", null,
-                React.createElement("div", null, "Editable"),
-                React.createElement(CheckBox_1.CheckBox, { checked: isAllEditableColumns() ? true : isNoneEditableColumns() ? false : null, onChange: (allEditable) => {
-                        if (allEditable) {
-                            setAllEditable();
-                        }
-                        else {
-                            setAllUneditable();
-                        }
-                    } }))),
-            Size: 3,
+        field: {
+            header: React.createElement(HeaderCellWrapper, null, "Field"),
+            field: 'field',
+            minWidth: 150,
+            render: (params) => {
+                const column = params.data;
+                const humanized = StringExtensions_1.default.Humanize(column.field);
+                return (React.createElement(rebass_1.Box, { p: 2 },
+                    React.createElement(ThrottledInput, { key: column.field, style: inputStyle, value: column.caption != undefined ? column.caption : humanized, placeholder: humanized, onChange: (value) => {
+                            setColumnCaption(value, column.field);
+                        } })));
+            },
         },
-        {
-            Size: 3,
-            key: 'resizable',
-            Content: (React.createElement("b", null,
-                React.createElement("div", null, "Resizable"),
-                React.createElement(CheckBox_1.CheckBox, { checked: isAllResizableColumns() ? true : isNoneResizableColumns() ? false : null, onChange: (allResizable) => {
-                        if (allResizable) {
-                            setAllResizable();
-                        }
-                        else {
-                            setAllUnresizable();
-                        }
-                    } }))),
+        type: {
+            header: React.createElement(HeaderCellWrapper, null, "Type"),
+            maxWidth: 140,
+            render: (params) => {
+                var _a;
+                const column = params.data;
+                return (React.createElement(CellWrapper, { paddingLeft: 1, paddingRight: 1 },
+                    React.createElement(Dropdown_1.default, { style: inputStyle, showClearButton: false, options: dataTypes, value: (_a = column === null || column === void 0 ? void 0 : column.type) !== null && _a !== void 0 ? _a : '', onChange: onColumnTypeChange.bind(null, column) })));
+            },
         },
-        {
-            Size: 3,
-            key: 'enableRowGroup',
-            Content: (React.createElement("b", null,
-                React.createElement("div", null, "Groupable"),
-                React.createElement(CheckBox_1.CheckBox, { checked: isAllGroupableColumns() ? true : isNoneGroupableColumns() ? false : null, onChange: (allGroupable) => {
-                        if (allGroupable) {
-                            setAllGroupable();
-                        }
-                        else {
-                            setAllUngroupable();
-                        }
-                    } }))),
+        sortable: {
+            header: (React.createElement(HeaderWithCheckbox, { label: "Sortable", checked: isAllSortableColumns() ? true : isNoneSortableColumns() ? false : null, onChange: (allSortable) => {
+                    if (allSortable) {
+                        setAllSortable();
+                    }
+                    else {
+                        setAllUnsortable();
+                    }
+                } })),
+            render: (params) => {
+                const column = params.data;
+                return (React.createElement(CheckBox_1.CheckBox, { checked: isSortableColumn(column.field), onChange: (sortable) => {
+                        sortable ? setSortableColumn(column.field) : setUnsortableColumn(column.field);
+                    } }));
+            },
         },
-        {
-            Content: (React.createElement("b", null,
-                React.createElement("div", null, "Filterable"),
-                React.createElement(CheckBox_1.CheckBox, { checked: isAllFilterableColumns() ? true : isNoneFilterableColumns() ? false : null, onChange: (allFilterable) => {
-                        if (allFilterable) {
-                            setAllFilterable();
-                        }
-                        else {
-                            setAllUnfilterable();
-                        }
-                    } }))),
-            Size: 3,
-            key: 'filterable',
+        editable: {
+            header: (React.createElement(HeaderWithCheckbox, { label: "Editable", checked: isAllEditableColumns() ? true : isNoneEditableColumns() ? false : null, onChange: (allEditable) => {
+                    if (allEditable) {
+                        setAllEditable();
+                    }
+                    else {
+                        setAllUneditable();
+                    }
+                } })),
+            render: (params) => {
+                const col = params.data;
+                return (React.createElement(CellWrapper, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: isEditableColumn(col.field), onChange: (editable) => {
+                            editable ? setEditableColumn(col.field) : setUneditableColumn(col.field);
+                        } })));
+            },
         },
-    ];
-    const items = columns.map((col) => {
-        var _a;
-        const isPrimaryKey = col.field === primaryKeyField;
-        const cItems = colItems.map((c) => (Object.assign({}, c)));
-        cItems[0].Content = (React.createElement(Radio_1.default, { checked: isPrimaryKey, onChange: (checked) => {
-                if (checked && isIncludedColumn(col.field)) {
-                    setPrimaryKeyField(col.field);
-                }
-            } }));
-        cItems[1].Content = (React.createElement(CheckBox_1.CheckBox, { checked: isIncludedColumn(col.field), onChange: (included) => {
-                if (included) {
-                    includeColumn(col.field);
-                }
-                else {
-                    excludeColumn(col.field);
-                }
-            } }));
-        const humanized = StringExtensions_1.default.Humanize(col.field);
-        cItems[2].Content = (React.createElement(Input_1.default, { style: inputStyle, defaultValue: col.caption != undefined ? col.caption : humanized, placeholder: humanized, onChange: (event) => {
-                setColumnCaption(event.target.value, col.field);
-            } }));
-        cItems[3].Content = (React.createElement(Dropdown_1.default, { style: inputStyle, showClearButton: false, options: dataTypes, value: (_a = col === null || col === void 0 ? void 0 : col.type) !== null && _a !== void 0 ? _a : '', onChange: onColumnTypeChange.bind(null, col) }));
-        cItems[4].Content = (React.createElement(CheckBox_1.CheckBox, { checked: isSortableColumn(col.field), onChange: (sortable) => {
-                sortable ? setSortableColumn(col.field) : setUnsortableColumn(col.field);
-            } }));
-        cItems[5].Content = (React.createElement(CheckBox_1.CheckBox, { checked: isEditableColumn(col.field), onChange: (editable) => {
-                editable ? setEditableColumn(col.field) : setUneditableColumn(col.field);
-            } }));
-        cItems[6].Content = (React.createElement(CheckBox_1.CheckBox, { checked: isResizableColumn(col.field), onChange: (resizable) => {
-                resizable ? setResizableColumn(col.field) : setUnresizableColumn(col.field);
-            } }));
-        cItems[7].Content = (React.createElement(CheckBox_1.CheckBox, { checked: isGroupableColumn(col.field), onChange: (groupable) => {
-                groupable ? setGroupableColumn(col.field) : setUngroupableColumn(col.field);
-            } }));
-        cItems[8].Content = (React.createElement(CheckBox_1.CheckBox, { checked: isFilterableColumn(col.field), onChange: (filterable) => {
-                filterable ? setFilterableColumn(col.field) : setUnFilterableColumn(col.field);
-            } }));
-        return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: col.field, colItems: cItems, style: { cursor: 'pointer' } });
-    });
-    React.useEffect(() => {
-        onValidityChange(isIncludedColumn(primaryKeyField));
-    }, [includedColumnsMap, primaryKeyField]);
-    return (React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { headerAlign: "flex-start", style: {
-            display: 'flex',
-            flex: '1 1 auto',
-            overflow: 'auto',
-            flexFlow: 'column',
-            textAlign: 'center',
-        }, colItems: colItems, items: items }));
+        resizable: {
+            header: (React.createElement(HeaderWithCheckbox, { label: "Resizable", checked: isAllResizableColumns() ? true : isNoneResizableColumns() ? false : null, onChange: (allResizable) => {
+                    if (allResizable) {
+                        setAllResizable();
+                    }
+                    else {
+                        setAllUnresizable();
+                    }
+                } })),
+            render: (params) => {
+                const col = params.data;
+                return (React.createElement(CellWrapper, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: isResizableColumn(col.field), onChange: (resizable) => {
+                            resizable ? setResizableColumn(col.field) : setUnresizableColumn(col.field);
+                        } })));
+            },
+        },
+        groupable: {
+            header: (React.createElement(HeaderWithCheckbox, { label: "Groupable", checked: isAllGroupableColumns() ? true : isNoneGroupableColumns() ? false : null, onChange: (allGroupable) => {
+                    if (allGroupable) {
+                        setAllGroupable();
+                    }
+                    else {
+                        setAllUngroupable();
+                    }
+                } })),
+            render: (params) => {
+                const col = params.data;
+                return (React.createElement(CellWrapper, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: isGroupableColumn(col.field), onChange: (groupable) => {
+                            groupable ? setGroupableColumn(col.field) : setUngroupableColumn(col.field);
+                        } })));
+            },
+        },
+        filtrable: {
+            header: (React.createElement(HeaderWithCheckbox, { label: "Filtrable", checked: isAllFilterableColumns() ? true : isNoneFilterableColumns() ? false : null, onChange: (allFilterable) => {
+                    if (allFilterable) {
+                        setAllFilterable();
+                    }
+                    else {
+                        setAllUnfilterable();
+                    }
+                } })),
+            render: (params) => {
+                const col = params.data;
+                return (React.createElement(CellWrapper, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: isFilterableColumn(col.field), onChange: (filterable) => {
+                            filterable ? setFilterableColumn(col.field) : setUnFilterableColumn(col.field);
+                        } })));
+            },
+        },
+    };
+    return (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' }, className: "light" },
+        React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "colId" },
+            React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
+                    default: {
+                        defaultFlex: 1,
+                        align: 'center',
+                        sortable: false,
+                    },
+                }, headerOptions: {
+                    alwaysReserveSpaceForSortIcon: false,
+                }, rowHeight: rowHeight, columnHeaderHeight: 65, domProps: tableDOMProps, columns: columnsMap }))));
 };
 function areEqual() {
     /**