@michalrakus/x-react-web-lib 1.13.0 → 1.15.0

package/XFormCol.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XFormRowCol/XFormCol';

package/XFormCol.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/XFormRowCol/XFormCol.js');

package/XFormInlineRow.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XFormRowCol/XFormInlineRow';

package/XFormInlineRow.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/XFormRowCol/XFormInlineRow.js');

package/XFormRow.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XFormRowCol/XFormRow';

package/XFormRow.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/XFormRowCol/XFormRow.js');

package/XFormRowCol.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XFormRowCol/XFormRowCol';

package/XFormRowCol.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/XFormRowCol/XFormRowCol.js');

package/gulpfile.js

@@ -18,6 +18,11 @@ function generateApi(cb) {
         "./lib/administration/XBrowseMetaBrowse",
         "./lib/administration/XBrowseMetaForm",
 
+        "./lib/components/XFormRowCol/XFormCol",
+        "./lib/components/XFormRowCol/XFormInlineRow",
+        "./lib/components/XFormRowCol/XFormRow",
+        "./lib/components/XFormRowCol/XFormRowCol",
+
         "./lib/components/useXToken",
         "./lib/components/XAutoComplete",
         "./lib/components/XAutoCompleteBase",

package/lib/components/XAutoComplete.d.ts

@@ -14,7 +14,7 @@ export interface XAutoCompleteProps extends XFormComponentProps<XObject> {
     sortField?: string | DataTableSortMeta[];
     suggestions?: any[];
     lazy?: boolean;
-    size?: number;
+    width?: string;
     inputStyle?: React.CSSProperties;
 }
 export declare class XAutoComplete extends XFormComponent<XObject, XAutoCompleteProps> {

package/lib/components/XAutoComplete.js

@@ -138,14 +138,10 @@ var XAutoComplete = /** @class */ (function (_super) {
         var _this = this;
         var _a;
         var xEntityAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(this.xAssoc.entityName);
-        //const xDisplayField = XUtilsMetadataCommon.getXFieldByPath(xEntityAssoc, this.props.displayField);
-        // TODO - readOnly
-        // TODO - size
-        //const size = this.props.size ?? xDisplayField.length;
         // div className="col" nam zabezpeci aby XAutoCompleteBase nezaberal celu dlzku grid-u (ma nastaveny width=100% vdaka "formgroup-inline")
         return (react_1.default.createElement("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: this.props.assocField, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
-            react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), suggestions: (_a = this.props.suggestions) !== null && _a !== void 0 ? _a : this.state.suggestions, onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, customFilterFunction: function () { return _this.getFilterBase(_this.props.filter); }, onSearchStart: this.props.lazy ? this.onSearchStart : undefined })));
+            react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), suggestions: (_a = this.props.suggestions) !== null && _a !== void 0 ? _a : this.state.suggestions, onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, width: this.props.width, customFilterFunction: function () { return _this.getFilterBase(_this.props.filter); }, onSearchStart: this.props.lazy ? this.onSearchStart : undefined })));
     };
     return XAutoComplete;
 }(XFormComponent_1.XFormComponent));

package/lib/components/XAutoCompleteBase.d.ts

@@ -13,6 +13,7 @@ export interface XAutoCompleteBaseProps {
     valueForm?: JSX.Element;
     idField?: string;
     maxLength?: number;
+    width?: string;
     readOnly?: boolean;
     error?: string;
     onErrorChange: (error: string | undefined) => void;

package/lib/components/XAutoCompleteBase.js

@@ -404,7 +404,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         // Dialog pre konkretny form:
         // <DobrovolnikForm id={this.formDialogObjectId} object={this.formDialogInitValuesForInsert} onSaveOrCancel={this.formDialogOnSaveOrCancel}/>
         // formgroup-inline lepi SplitButton na autocomplete a zarovna jeho vysku
-        return (react_1.default.createElement("div", { className: "x-auto-complete-base" },
+        return (react_1.default.createElement("div", { className: "x-auto-complete-base", style: { width: this.props.width } },
             react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod, field: this.props.field, onChange: this.onChange, onSelect: this.onSelect, onBlur: this.onBlur, maxLength: this.props.maxLength, ref: this.autoCompleteRef, readOnly: readOnly, disabled: readOnly }, XUtils_1.XUtils.createErrorProps(error))),
             dropdownButton,
             this.props.valueForm != undefined && !readOnly ?

package/lib/components/XCheckbox.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { XInput, XInputProps } from "./XInput";
+import { CheckboxChangeEvent } from "primereact/checkbox";
 export declare class XCheckbox extends XInput<boolean, XInputProps<boolean>> {
     constructor(props: XInputProps<boolean>);
     getValue(): boolean | null;
-    onValueChange(e: any): void;
+    checkboxOnValueChange(e: CheckboxChangeEvent): void;
+    triStateCheckboxOnValueChange(e: any): void;
     render(): JSX.Element;
 }

package/lib/components/XCheckbox.js

@@ -22,11 +22,13 @@ exports.XCheckbox = void 0;
 var react_1 = __importDefault(require("react"));
 var tristatecheckbox_1 = require("primereact/tristatecheckbox");
 var XInput_1 = require("./XInput");
+var checkbox_1 = require("primereact/checkbox");
 var XCheckbox = /** @class */ (function (_super) {
     __extends(XCheckbox, _super);
     function XCheckbox(props) {
         var _this = _super.call(this, props) || this;
-        _this.onValueChange = _this.onValueChange.bind(_this);
+        _this.checkboxOnValueChange = _this.checkboxOnValueChange.bind(_this);
+        _this.triStateCheckboxOnValueChange = _this.triStateCheckboxOnValueChange.bind(_this);
         return _this;
     }
     XCheckbox.prototype.getValue = function () {
@@ -34,7 +36,10 @@ var XCheckbox = /** @class */ (function (_super) {
         var value = this.getValueFromObject();
         return value;
     };
-    XCheckbox.prototype.onValueChange = function (e) {
+    XCheckbox.prototype.checkboxOnValueChange = function (e) {
+        this.onValueChangeBase(e.checked, this.props.onChange);
+    };
+    XCheckbox.prototype.triStateCheckboxOnValueChange = function (e) {
         var newValue = e.value;
         // pri klikani na TriStateCheckbox prichadza v newValue cyklicky: true -> false -> null
         // ak mame not null atribut, tak pri null hodnote skocime rovno na true
@@ -47,10 +52,19 @@ var XCheckbox = /** @class */ (function (_super) {
         this.onValueChangeBase(newValue, this.props.onChange);
     };
     XCheckbox.prototype.render = function () {
+        var _a;
         // note: style overrides size (width of the input according to character count)
-        return (react_1.default.createElement("div", { className: "field grid" },
-            react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
-            react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, disabled: this.isReadOnly(), style: this.props.inputStyle })));
+        // pre not null atributy pouzijeme standardny checkbox aby sme pre false mali prazdny biely checkbox - TODO - pomenit ikonky na TriStateCheckbox aby to pekne sedelo
+        var element = this.isNotNull()
+            ? react_1.default.createElement(checkbox_1.Checkbox, { id: this.props.field, checked: (_a = this.getValue()) !== null && _a !== void 0 ? _a : false, onChange: this.checkboxOnValueChange, disabled: this.isReadOnly(), style: this.props.inputStyle, tooltip: this.props.tooltip })
+            : react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { id: this.props.field, value: this.getValue(), onChange: this.triStateCheckboxOnValueChange, disabled: this.isReadOnly(), style: this.props.inputStyle, tooltip: this.props.tooltip });
+        if (!this.props.onlyInput) {
+            var label = this.getLabel();
+            element = react_1.default.createElement("div", { className: "field grid" },
+                label !== undefined ? react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, label) : null,
+                element);
+        }
+        return element;
     };
     return XCheckbox;
 }(XInput_1.XInput));

package/lib/components/XDropdownDTFilter.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
+import { XCustomFilter } from "../serverApi/FindParam";
 export declare const XDropdownDTFilter: (props: {
     entity: string;
     path: string;
     value: any;
     onValueChange: (field: string, displayValue: any) => void;
+    filter?: XCustomFilter | undefined;
+    sortField?: string | undefined;
 }) => JSX.Element;

package/lib/components/XDropdownDTFilter.js

@@ -98,13 +98,14 @@ var XDropdownDTFilter = function (props) {
     };
     var findOptions = function (entity, path, displayField) { return __awaiter(void 0, void 0, void 0, function () {
         var xAssoc, options, emptyOption;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
                     xAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getLastXAssocByPath(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(entity), path);
-                    return [4 /*yield*/, XUtils_1.XUtils.fetchRows(xAssoc.entityName, undefined, displayField)];
+                    return [4 /*yield*/, XUtils_1.XUtils.fetchRows(xAssoc.entityName, props.filter, (_a = props.sortField) !== null && _a !== void 0 ? _a : displayField)];
                 case 1:
-                    options = _a.sent();
+                    options = _b.sent();
                     emptyOption = {};
                     emptyOption[displayField] = XUtils_1.XUtils.dropdownEmptyOptionValue;
                     options.splice(0, 0, emptyOption); // null polozka (nepridavat pre not null atributy)

package/lib/components/XFormComponent.d.ts

@@ -10,19 +10,22 @@ export type XFilterProp = XCustomFilter | ((object: any) => XCustomFilter | unde
 export interface XFormComponentProps<T> {
     form: XFormBase;
     label?: string;
+    tooltip?: string;
     readOnly?: XReadOnlyProp;
     labelStyle?: React.CSSProperties;
     inline?: boolean;
     onChange?: XFieldOnChange;
+    onlyInput?: boolean;
 }
 export declare abstract class XFormComponent<T, P extends XFormComponentProps<T>> extends Component<P> {
+    private valueChanged;
     protected constructor(props: P);
     abstract getField(): string;
     getValueFromObject(): any;
     onValueChangeBase(value: any, onChange?: XFieldOnChange, assocObjectChange?: OperationType): void;
     abstract isNotNull(): boolean;
     isReadOnly(): boolean;
-    getLabel(): string;
+    getLabel(): string | undefined;
     getLabelStyle(): React.CSSProperties;
     validate(): {
         field: string;

package/lib/components/XFormComponent.js

@@ -21,8 +21,10 @@ var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 var XUtils_1 = require("./XUtils");
 var XFormComponent = /** @class */ (function (_super) {
     __extends(XFormComponent, _super);
+    // mali sme problem ze aplikacny onChange sa volal aj ked uzivatel iba klikol do inputu a odisiel z neho
     function XFormComponent(props) {
         var _this = _super.call(this, props) || this;
+        _this.valueChanged = false;
         props.form.addXFormComponent(_this);
         return _this;
     }
@@ -45,6 +47,7 @@ var XFormComponent = /** @class */ (function (_super) {
     XFormComponent.prototype.onValueChangeBase = function (value, onChange, assocObjectChange) {
         var error = this.validateOnChange(value);
         this.props.form.onFieldChange(this.getField(), value, error, onChange, assocObjectChange);
+        this.valueChanged = true;
     };
     XFormComponent.prototype.isReadOnly = function () {
         var readOnly;
@@ -76,12 +79,14 @@ var XFormComponent = /** @class */ (function (_super) {
         }
         return readOnly;
     };
+    // ak je label undefined, label element sa nevykresli
     XFormComponent.prototype.getLabel = function () {
-        var _a;
-        var label = (_a = this.props.label) !== null && _a !== void 0 ? _a : this.getField();
-        // test na readOnly je tu hlavne koli tomu aby sme nemali * pri ID atribute, ktory sa pri inserte generuje az pri zapise do DB
-        if (this.isNotNull() && !this.isReadOnly()) {
-            label = XUtils_1.XUtils.markNotNull(label);
+        var label = this.props.label;
+        if (label !== undefined) {
+            // test na readOnly je tu hlavne koli tomu aby sme nemali * pri ID atribute, ktory sa pri inserte generuje az pri zapise do DB
+            if (this.isNotNull() && !this.isReadOnly()) {
+                label = XUtils_1.XUtils.markNotNull(label);
+            }
         }
         return label;
     };
@@ -147,12 +152,13 @@ var XFormComponent = /** @class */ (function (_super) {
         return error ? XUtils_1.XUtils.getErrorMessage(error) : undefined;
     };
     XFormComponent.prototype.callOnChangeFromOnBlur = function () {
-        if (this.props.onChange) {
+        if (this.valueChanged && this.props.onChange) {
             var object = this.props.form.getXObject();
             // developer v onChange nastavi atributy na object-e
             this.props.onChange({ object: object });
             // rovno zavolame form.setState({...}), nech to nemusi robit developer
             this.props.form.setStateXForm();
+            this.valueChanged = false; // resetneme na false (dalsi onChange volame az ked user zmeni hodnotu)
         }
     };
     // len pre assoc fieldy sa pouziva

package/lib/components/XFormComponentDT.d.ts

@@ -12,6 +12,7 @@ export interface XFormComponentDTProps {
     onChange?: XTableFieldOnChange;
 }
 export declare abstract class XFormComponentDT<P extends XFormComponentDTProps> extends Component<P> {
+    private valueChanged;
     protected constructor(props: P);
     abstract getField(): string;
     getValueFromRowData(): any;

package/lib/components/XFormComponentDT.js

@@ -24,6 +24,7 @@ var XFormComponentDT = /** @class */ (function (_super) {
     __extends(XFormComponentDT, _super);
     function XFormComponentDT(props) {
         var _this = _super.call(this, props) || this;
+        _this.valueChanged = false;
         XFormBase_1.XFormBase.getXRowTechData(props.rowData).xFormComponentDTList.push(_this);
         return _this;
     }
@@ -46,6 +47,7 @@ var XFormComponentDT = /** @class */ (function (_super) {
     XFormComponentDT.prototype.onValueChangeBase = function (value, onChange, assocObjectChange) {
         var error = this.validateOnChange(value);
         this.props.form.onTableFieldChange(this.props.rowData, this.getField(), value, error, onChange, assocObjectChange);
+        this.valueChanged = true;
     };
     XFormComponentDT.prototype.isReadOnly = function () {
         var readOnly;
@@ -114,12 +116,13 @@ var XFormComponentDT = /** @class */ (function (_super) {
         return error ? XUtils_1.XUtils.getErrorMessage(error) : undefined;
     };
     XFormComponentDT.prototype.callOnChangeFromOnBlur = function () {
-        if (this.props.onChange) {
+        if (this.valueChanged && this.props.onChange) {
             var object = this.props.form.getXObject();
             // developer v onChange nastavi atributy na object-e
             this.props.onChange({ object: object, tableRow: this.props.rowData, assocObjectChange: undefined });
             // rovno zavolame form.setState({...}), nech to nemusi robit developer
             this.props.form.setStateXForm();
+            this.valueChanged = false; // resetneme na false (dalsi onChange volame az ked user zmeni hodnotu)
         }
     };
     // len pre assoc fieldy sa pouziva, aj to nie pre vsetky

package/lib/components/XFormDataTable2.d.ts

@@ -1,7 +1,9 @@
 import { XFormBase } from "./XFormBase";
-import { Component, ReactChild } from "react";
+import React, { Component, ReactChild } from "react";
 import { DataTableFilterMeta } from "primereact/datatable";
+import { ColumnBodyOptions } from "primereact/column";
 import { XEntity, XField } from "../serverApi/XEntityMetadata";
+import { XViewStatusOrBoolean } from "./XUtils";
 import { FilterMatchMode } from "primereact/api";
 import { XTableFieldChangeEvent } from "./XFieldChangeEvent";
 import { XCustomFilter } from "../serverApi/FindParam";
@@ -65,8 +67,8 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
         filters: DataTableFilterMeta;
     };
     constructor(props: XFormDataTableProps);
-    getPathForColumn(columnProps: XFormColumnProps): string;
-    static getHeader(columnProps: XFormColumnProps, xEntity: XEntity, field: string, xField: XField): string;
+    getPathForColumn(columnProps: XFormColumnBaseProps): string;
+    static getHeader(columnProps: XFormColumnBaseProps, xEntity: XEntity, field: string, xField: XField): string;
     static isReadOnlyHeader(path: string | undefined, readOnly: XTableFieldReadOnlyProp | undefined): boolean;
     getEntity(): string;
     createInitFilters(): DataTableFilterMeta;
@@ -78,7 +80,7 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     getCheckboxFilterValue(field: string): boolean | null;
     onDropdownFilterChange(field: string, displayValue: any): void;
     getDropdownFilterValue(field: string): any;
-    bodyTemplate(columnProps: XFormColumnProps, tableReadOnly: boolean, rowData: any, xEntity: XEntity): any;
+    bodyTemplate(columnProps: XFormColumnBaseProps, tableReadOnly: boolean, rowData: any, xEntity: XEntity): any;
     onClickAddRow(): void;
     onClickRemoveRowBySelection(): void;
     removeRow(row: any): void;
@@ -89,25 +91,26 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
 export type XTableFieldOnChange = (e: XTableFieldChangeEvent<any, any>) => void;
 export type XTableFieldReadOnlyProp = boolean | ((object: any, tableRow: any) => boolean);
 export type XTableFieldFilterProp = XCustomFilter | ((object: any, rowData: any) => XCustomFilter | undefined);
-export interface XFormColumnProps {
-    type: "inputSimple" | "dropdown" | "autoComplete" | "searchButton";
+export interface XFormColumnBaseProps {
+    type: "inputSimple" | "dropdown" | "autoComplete" | "searchButton" | "custom";
     header?: any;
     readOnly?: XTableFieldReadOnlyProp;
     dropdownInFilter?: boolean;
     showFilterMenu?: boolean;
     width?: string;
     onChange?: XTableFieldOnChange;
+    columnViewStatus: XViewStatusOrBoolean;
 }
-export interface XFormInputSimpleColumnProps extends XFormColumnProps {
+export interface XFormColumnProps extends XFormColumnBaseProps {
     field: string;
 }
-export interface XFormDropdownColumnProps extends XFormColumnProps {
+export interface XFormDropdownColumnProps extends XFormColumnBaseProps {
     assocField: string;
     displayField: string;
     sortField?: string;
     filter?: XCustomFilter;
 }
-export interface XFormAutoCompleteColumnProps extends XFormColumnProps {
+export interface XFormAutoCompleteColumnProps extends XFormColumnBaseProps {
     assocField: string;
     displayField: string;
     searchBrowse?: JSX.Element;
@@ -115,32 +118,47 @@ export interface XFormAutoCompleteColumnProps extends XFormColumnProps {
     filter?: XTableFieldFilterProp;
     suggestions?: any[];
 }
-export interface XFormSearchButtonColumnProps extends XFormColumnProps {
+export interface XFormSearchButtonColumnProps extends XFormColumnBaseProps {
     assocField: string;
     displayField: string;
     searchBrowse: JSX.Element;
 }
+export interface XFormCustomColumnProps extends XFormColumnBaseProps {
+    body: React.ReactNode | ((data: any, options: ColumnBodyOptions) => React.ReactNode);
+    field?: string;
+}
 export declare const XFormColumn: {
-    (props: XFormInputSimpleColumnProps): null;
+    (props: XFormColumnProps): null;
     defaultProps: {
         type: string;
+        columnViewStatus: boolean;
     };
 };
 export declare const XFormDropdownColumn: {
     (props: XFormDropdownColumnProps): null;
     defaultProps: {
         type: string;
+        columnViewStatus: boolean;
     };
 };
 export declare const XFormAutoCompleteColumn: {
     (props: XFormAutoCompleteColumnProps): null;
     defaultProps: {
         type: string;
+        columnViewStatus: boolean;
     };
 };
 export declare const XFormSearchButtonColumn: {
     (props: XFormSearchButtonColumnProps): null;
     defaultProps: {
         type: string;
+        columnViewStatus: boolean;
+    };
+};
+export declare const XFormCustomColumn: {
+    (props: XFormCustomColumnProps): null;
+    defaultProps: {
+        type: string;
+        columnViewStatus: boolean;
     };
 };

package/lib/components/XFormDataTable2.js

@@ -60,7 +60,7 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.XFormSearchButtonColumn = exports.XFormAutoCompleteColumn = exports.XFormDropdownColumn = exports.XFormColumn = exports.XFormDataTable2 = void 0;
+exports.XFormCustomColumn = exports.XFormSearchButtonColumn = exports.XFormAutoCompleteColumn = exports.XFormDropdownColumn = exports.XFormColumn = exports.XFormDataTable2 = void 0;
 var XFormBase_1 = require("./XFormBase");
 var react_1 = __importStar(require("react"));
 var XDropdownDT_1 = require("./XDropdownDT");
@@ -118,8 +118,10 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             for (var _b = __values(props.children), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var child = _c.value;
                 var childColumn = child; // nevedel som to krajsie...
-                var field = props.assocField + '.' + _this.getPathForColumn(childColumn.props);
-                props.form.addField(field);
+                if (childColumn.props.type !== "custom") {
+                    var field = props.assocField + '.' + _this.getPathForColumn(childColumn.props);
+                    props.form.addField(field);
+                }
             }
         }
         catch (e_1_1) { e_1 = { error: e_1_1 }; }
@@ -231,24 +233,27 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             for (var _b = __values(this.props.children), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var child = _c.value;
                 var childColumn = child; // nevedel som to krajsie...
-                var field = this.getPathForColumn(childColumn.props);
-                var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, field);
-                // TODO column.props.dropdownInFilter - pre "menu" by bolo fajn mat zoznam "enumov"
-                var filterMatchMode = this.getFilterMatchMode(xField);
-                var filterItem = void 0;
-                if (this.props.filterDisplay === "menu") {
-                    // DataTableOperatorFilterMetaData: operator + filter values
-                    filterItem = {
-                        operator: api_1.FilterOperator.OR,
-                        constraints: [{ value: null, matchMode: filterMatchMode }]
-                    };
-                }
-                else {
-                    // props.filterDisplay === "row"
-                    // DataTableFilterMetaData: filter value
-                    filterItem = { value: null, matchMode: filterMatchMode };
+                // zatial nepodporujeme filter pre custom stlpce
+                if (childColumn.props.type !== "custom") {
+                    var field = this.getPathForColumn(childColumn.props);
+                    var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, field);
+                    // TODO column.props.dropdownInFilter - pre "menu" by bolo fajn mat zoznam "enumov"
+                    var filterMatchMode = this.getFilterMatchMode(xField);
+                    var filterItem = void 0;
+                    if (this.props.filterDisplay === "menu") {
+                        // DataTableOperatorFilterMetaData: operator + filter values
+                        filterItem = {
+                            operator: api_1.FilterOperator.OR,
+                            constraints: [{ value: null, matchMode: filterMatchMode }]
+                        };
+                    }
+                    else {
+                        // props.filterDisplay === "row"
+                        // DataTableFilterMetaData: filter value
+                        filterItem = { value: null, matchMode: filterMatchMode };
+                    }
+                    initFilters[field] = filterItem;
                 }
-                initFilters[field] = filterItem;
             }
         }
         catch (e_2_1) { e_2 = { error: e_2_1 }; }
@@ -350,8 +355,19 @@ var XFormDataTable2 = /** @class */ (function (_super) {
     // body={(rowData: any) => bodyTemplate(childColumn.props.field, rowData)}
     XFormDataTable2.prototype.bodyTemplate = function (columnProps, tableReadOnly, rowData, xEntity) {
         var body;
+        // columnProps.columnViewStatus "ReadOnly" has higher prio then tableReadOnly
         // tableReadOnly has higher prio then property readOnly
-        var readOnly = tableReadOnly ? true : columnProps.readOnly;
+        // (viewStatus "Hidden" - column is not rendered (bodyTemplate not called), viewStatus "ReadWrite" (default) - tableReadOnly/columnProps.readOnly is applied)
+        var readOnly;
+        if (XUtils_1.XUtils.xViewStatus(columnProps.columnViewStatus) === XUtils_1.XViewStatus.ReadOnly) {
+            readOnly = true;
+        }
+        else if (tableReadOnly) {
+            readOnly = true;
+        }
+        else {
+            readOnly = columnProps.readOnly;
+        }
         if (columnProps.type === "inputSimple") {
             var columnPropsInputSimple = columnProps;
             var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, columnPropsInputSimple.field);
@@ -497,7 +513,8 @@ var XFormDataTable2 = /** @class */ (function (_super) {
     };
     XFormDataTable2.prototype.render = function () {
         var _this = this;
-        var _a, _b;
+        var _a, _b, _c;
+        var xEntity = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(this.getEntity());
         var paginator = this.props.paginator !== undefined ? this.props.paginator : false;
         var rows = undefined;
         if (paginator) {
@@ -509,13 +526,14 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             }
         }
         var filterDisplay = this.props.filterDisplay !== "none" ? this.props.filterDisplay : undefined;
+        // default sortovanie - ak mame insert tak nesortujeme (drzime poradie v akom user zaznam vytvoril), ak mame update tak podla id zosortujeme (nech je to zobrazene vzdy rovnako)
+        var sortField = ((_a = this.props.sortField) !== null && _a !== void 0 ? _a : this.props.form.isAddRow()) ? undefined : xEntity.idField;
         var label = this.props.label !== undefined ? this.props.label : this.props.assocField;
         var readOnly = this.isReadOnly();
         // v bloku function (child) nejde pouzit priamo this, thisLocal uz ide pouzit
         var thisLocal = this;
         var object = this.props.form.state.object;
         var valueList = object !== null ? object[this.props.assocField] : [];
-        var xEntity = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(this.getEntity());
         var scrollWidth = undefined; // vypnute horizontalne scrollovanie
         var scrollHeight = undefined; // vypnute vertikalne scrollovanie
         if (this.props.scrollable) {
@@ -543,78 +561,101 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             tableStyle = __assign(__assign({}, tableStyle), { width: width });
         }
         // pre lepsiu citatelnost vytvarame stlpce uz tu
-        var columnElemList = react_1.default.Children.map(this.props.children, function (child) {
+        var columnElemList = react_1.default.Children.map(this.props.children.filter(function (child) { return XUtils_1.XUtils.xViewStatus(child.props.columnViewStatus) !== XUtils_1.XViewStatus.Hidden; }), function (child) {
             // ak chceme zmenit child element, tak treba bud vytvorit novy alebo vyklonovat
             // priklad je na https://soshace.com/building-react-components-using-children-props-and-context-api/
             // (vzdy musime robit manipulacie so stlpcom, lebo potrebujeme pridat filter={true} sortable={true}
             var childColumn = child; // nevedel som to krajsie...
             var childColumnProps = childColumn.props;
-            // je dolezite, aby field obsahoval cely path az po zobrazovany atribut, lebo podla neho sa vykonava filtrovanie a sortovanie
-            // (aj ked, da sa to prebit na stlpcoch (na elemente Column), su na to atributy)
-            var field = thisLocal.getPathForColumn(childColumnProps);
-            // TODO - toto by sa mohlo vytiahnut vyssie, aj v bodyTemplate sa vola metoda XUtilsMetadata.getXFieldByPath
-            var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, field);
-            // *********** header ***********
-            var header = XFormDataTable2.getHeader(childColumnProps, xEntity, field, xField);
-            // *********** filterElement ***********
+            var fieldParam;
+            var header;
             var filterElement;
-            if (thisLocal.props.filterDisplay !== "none") {
-                if (xField.type === "boolean") {
-                    var checkboxValue = thisLocal.getCheckboxFilterValue(field);
-                    filterElement = react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { value: checkboxValue, onChange: function (e) { return thisLocal.onCheckboxFilterChange(field, e.value); } });
-                }
-                else if (childColumnProps.dropdownInFilter) {
-                    var dropdownValue = thisLocal.getDropdownFilterValue(field);
-                    filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: thisLocal.getEntity(), path: field, value: dropdownValue, onValueChange: thisLocal.onDropdownFilterChange });
-                }
+            var showFilterMenu;
+            var width;
+            var align;
+            var body;
+            if (childColumnProps.type === "custom") {
+                // len jednoduche hodnoty, zatial nebude takmer ziadna podpora
+                var columnPropsCustom = childColumnProps;
+                fieldParam = columnPropsCustom.field;
+                header = columnPropsCustom.header;
+                filterElement = undefined;
+                showFilterMenu = false;
+                width = XUtils_1.XUtils.processPropWidth(columnPropsCustom.width);
+                align = undefined;
+                body = columnPropsCustom.body;
             }
-            // *********** showFilterMenu ***********
-            var showFilterMenu = false;
-            if (thisLocal.props.filterDisplay !== "none") {
-                if (childColumnProps.showFilterMenu !== undefined) {
-                    showFilterMenu = childColumnProps.showFilterMenu;
+            else {
+                // fieldy ktore su v modeli (existuje xField)
+                // je dolezite, aby field obsahoval cely path az po zobrazovany atribut, lebo podla neho sa vykonava filtrovanie a sortovanie
+                // (aj ked, da sa to prebit na stlpcoch (na elemente Column), su na to atributy)
+                var field_1 = thisLocal.getPathForColumn(childColumnProps);
+                // TODO - toto by sa mohlo vytiahnut vyssie, aj v bodyTemplate sa vola metoda XUtilsMetadata.getXFieldByPath
+                var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, field_1);
+                // *********** header ***********
+                header = XFormDataTable2.getHeader(childColumnProps, xEntity, field_1, xField);
+                // *********** filterElement ***********
+                if (thisLocal.props.filterDisplay !== "none") {
+                    if (xField.type === "boolean") {
+                        var checkboxValue = thisLocal.getCheckboxFilterValue(field_1);
+                        filterElement = react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { value: checkboxValue, onChange: function (e) { return thisLocal.onCheckboxFilterChange(field_1, e.value); } });
+                    }
+                    else if (childColumnProps.dropdownInFilter) {
+                        var dropdownValue = thisLocal.getDropdownFilterValue(field_1);
+                        filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: thisLocal.getEntity(), path: field_1, value: dropdownValue, onValueChange: thisLocal.onDropdownFilterChange });
+                    }
                 }
-                else {
-                    showFilterMenu = true; // default
-                    if (thisLocal.props.filterDisplay === "row") {
-                        if (xField.type === "boolean" || childColumnProps.dropdownInFilter) {
-                            showFilterMenu = false;
+                // *********** showFilterMenu ***********
+                showFilterMenu = false;
+                if (thisLocal.props.filterDisplay !== "none") {
+                    if (childColumnProps.showFilterMenu !== undefined) {
+                        showFilterMenu = childColumnProps.showFilterMenu;
+                    }
+                    else {
+                        showFilterMenu = true; // default
+                        if (thisLocal.props.filterDisplay === "row") {
+                            if (xField.type === "boolean" || childColumnProps.dropdownInFilter) {
+                                showFilterMenu = false;
+                            }
                         }
                     }
                 }
+                // *********** width/headerStyle ***********
+                width = XUtils_1.XUtils.processPropWidth(childColumn.props.width);
+                if (width === undefined || width === "default") {
+                    var filterMenuInFilterRow = thisLocal.props.filterDisplay === "row" && showFilterMenu;
+                    var sortableButtonInHeader = thisLocal.props.sortable;
+                    var filterButtonInHeader = thisLocal.props.filterDisplay === "menu";
+                    width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, undefined, filterMenuInFilterRow, childColumnProps.type, header, sortableButtonInHeader, filterButtonInHeader);
+                }
+                // *********** align ***********
+                align = undefined; // default undefined (left)
+                // do buducna
+                // if (childColumnProps.align !== undefined) {
+                //     align = childColumnProps.align;
+                // }
+                // else {
+                // decimal defaultne zarovnavame doprava
+                // if (xField.type === "decimal") {
+                //     align = "right";
+                // }
+                // else
+                if (xField.type === "boolean") {
+                    align = "center";
+                }
+                // }
+                // *********** body ***********
+                body = function (rowData) { return thisLocal.bodyTemplate(childColumnProps, readOnly, rowData, xEntity); };
+                fieldParam = field_1;
             }
             // *********** showClearButton ***********
             // pre filterDisplay = "row" nechceme clear button, chceme setrit miesto
             var showClearButton = thisLocal.props.filterDisplay === "menu";
-            // *********** width/headerStyle ***********
-            var width = XUtils_1.XUtils.processPropWidth(childColumn.props.width);
-            if (width === undefined || width === "default") {
-                var filterMenuInFilterRow = thisLocal.props.filterDisplay === "row" && showFilterMenu;
-                var sortableButtonInHeader = thisLocal.props.sortable;
-                var filterButtonInHeader = thisLocal.props.filterDisplay === "menu";
-                width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, undefined, filterMenuInFilterRow, childColumnProps.type, header, sortableButtonInHeader, filterButtonInHeader);
-            }
             var headerStyle = {};
             if (width !== undefined) {
                 headerStyle = { width: width };
             }
-            // *********** align ***********
-            var align = undefined; // default undefined (left)
-            // do buducna
-            // if (childColumnProps.align !== undefined) {
-            //     align = childColumnProps.align;
-            // }
-            // else {
-            // decimal defaultne zarovnavame doprava
-            // if (xField.type === "decimal") {
-            //     align = "right";
-            // }
-            // else
-            if (xField.type === "boolean") {
-                align = "center";
-            }
-            // }
-            return react_1.default.createElement(column_1.Column, { field: field, header: header, filter: thisLocal.props.filterDisplay !== "none", sortable: thisLocal.props.sortable, filterElement: filterElement, showFilterMenu: showFilterMenu, showClearButton: showClearButton, headerStyle: headerStyle, align: align, body: function (rowData) { return thisLocal.bodyTemplate(childColumnProps, readOnly, rowData, xEntity); } });
+            return react_1.default.createElement(column_1.Column, { field: fieldParam, header: header, filter: thisLocal.props.filterDisplay !== "none", sortable: thisLocal.props.sortable, filterElement: filterElement, showFilterMenu: showFilterMenu, showClearButton: showClearButton, headerStyle: headerStyle, align: align, body: body });
         });
         if (this.props.showAddRemoveButtons && this.props.removeButtonInRow) {
             // je dolezite nastavit sirku header-a, lebo inac ma stlpec sirku 0 a nevidno ho
@@ -624,14 +665,14 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         var removeRowLabel = undefined;
         if (this.props.showAddRemoveButtons) {
             // calling xLocaleOption does not work in standard default values initialisation place (public static defaultProps)
-            addRowLabel = (_a = this.props.addRowLabel) !== null && _a !== void 0 ? _a : (0, XLocale_1.xLocaleOption)('addRow');
-            removeRowLabel = (_b = this.props.removeRowLabel) !== null && _b !== void 0 ? _b : (0, XLocale_1.xLocaleOption)('removeRow');
+            addRowLabel = (_b = this.props.addRowLabel) !== null && _b !== void 0 ? _b : (0, XLocale_1.xLocaleOption)('addRow');
+            removeRowLabel = (_c = this.props.removeRowLabel) !== null && _c !== void 0 ? _c : (0, XLocale_1.xLocaleOption)('removeRow');
         }
         return (react_1.default.createElement("div", null,
             react_1.default.createElement("div", { className: "flex justify-content-center" },
                 react_1.default.createElement("label", null, label)),
             react_1.default.createElement("div", { className: "flex justify-content-center" },
-                react_1.default.createElement(datatable_1.DataTable, { ref: function (el) { return _this.dt = el; }, value: valueList, dataKey: this.dataKey, paginator: paginator, rows: rows, totalRecords: valueList.length, filterDisplay: filterDisplay, filters: this.state.filters, onFilter: this.onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: this.props.sortField !== undefined ? [{ field: this.props.sortField, order: 1 }] : undefined, selectionMode: "single", selection: this.state.selectedRow, onSelectionChange: this.onSelectionChange, className: "p-datatable-sm x-form-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, scrollable: this.props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
+                react_1.default.createElement(datatable_1.DataTable, { ref: function (el) { return _this.dt = el; }, value: valueList, dataKey: this.dataKey, paginator: paginator, rows: rows, totalRecords: valueList.length, filterDisplay: filterDisplay, filters: this.state.filters, onFilter: this.onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: sortField !== undefined ? [{ field: sortField, order: 1 }] : undefined, selectionMode: "single", selection: this.state.selectedRow, onSelectionChange: this.onSelectionChange, className: "p-datatable-sm x-form-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, scrollable: this.props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
             this.props.showAddRemoveButtons ?
                 react_1.default.createElement("div", { className: "flex justify-content-center" },
                     react_1.default.createElement(XButton_1.XButton, { icon: this.props.addRowIcon, label: addRowLabel, onClick: this.onClickAddRow, disabled: readOnly }),
@@ -639,8 +680,8 @@ var XFormDataTable2 = /** @class */ (function (_super) {
                 : undefined));
     };
     XFormDataTable2.defaultProps = {
-        filterDisplay: "row",
-        sortable: true,
+        filterDisplay: "none",
+        sortable: false,
         scrollable: true,
         scrollWidth: '100%',
         scrollHeight: '200vh',
@@ -654,35 +695,37 @@ var XFormDataTable2 = /** @class */ (function (_super) {
     return XFormDataTable2;
 }(react_1.Component));
 exports.XFormDataTable2 = XFormDataTable2;
+// default props for XFormColumnBaseProps
+var XFormColumnBase_defaultProps = {
+    columnViewStatus: true
+};
 var XFormColumn = function (props) {
     // nevadi ze tu nic nevraciame, field a header vieme precitat a zvysok by sme aj tak zahodili lebo vytvarame novy element
     return (null);
 };
 exports.XFormColumn = XFormColumn;
-exports.XFormColumn.defaultProps = {
-    type: "inputSimple"
-};
+exports.XFormColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "inputSimple" });
 var XFormDropdownColumn = function (props) {
     // nevadi ze tu nic nevraciame, field a header vieme precitat a zvysok by sme aj tak zahodili lebo vytvarame novy element
     return (null);
 };
 exports.XFormDropdownColumn = XFormDropdownColumn;
-exports.XFormDropdownColumn.defaultProps = {
-    type: "dropdown"
-};
+exports.XFormDropdownColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "dropdown" });
 var XFormAutoCompleteColumn = function (props) {
     // nevadi ze tu nic nevraciame, field a header vieme precitat a zvysok by sme aj tak zahodili lebo vytvarame novy element
     return (null);
 };
 exports.XFormAutoCompleteColumn = XFormAutoCompleteColumn;
-exports.XFormAutoCompleteColumn.defaultProps = {
-    type: "autoComplete"
-};
+exports.XFormAutoCompleteColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "autoComplete" });
 var XFormSearchButtonColumn = function (props) {
     // nevadi ze tu nic nevraciame, field a header vieme precitat a zvysok by sme aj tak zahodili lebo vytvarame novy element
     return (null);
 };
 exports.XFormSearchButtonColumn = XFormSearchButtonColumn;
-exports.XFormSearchButtonColumn.defaultProps = {
-    type: "searchButton"
+exports.XFormSearchButtonColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "searchButton" });
+var XFormCustomColumn = function (props) {
+    // nevadi ze tu nic nevraciame, field a header vieme precitat a zvysok by sme aj tak zahodili lebo vytvarame novy element
+    return (null);
 };
+exports.XFormCustomColumn = XFormCustomColumn;
+exports.XFormCustomColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "custom" });

package/lib/components/XFormRowCol/XFormCol.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { XFormBase } from "../XFormBase";
+export interface XFormColProps {
+    form?: XFormBase;
+    labelStyle?: React.CSSProperties;
+    children: JSX.Element | JSX.Element[];
+}
+export declare const XFormCol: (props: XFormColProps) => JSX.Element;

package/lib/components/XFormRowCol/XFormCol.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XFormCol = void 0;
+var react_1 = __importDefault(require("react"));
+var XFormRowCol_1 = require("./XFormRowCol");
+var XFormCol = function (props) {
+    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-col", form: props.form, labelStyle: props.labelStyle, children: props.children });
+};
+exports.XFormCol = XFormCol;

package/lib/components/XFormRowCol/XFormInlineRow.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { XFormBase } from "../XFormBase";
+export interface XFormInlineRowProps {
+    form?: XFormBase;
+    labelStyle?: React.CSSProperties;
+    children: JSX.Element | JSX.Element[];
+}
+export declare const XFormInlineRow: (props: XFormInlineRowProps) => JSX.Element;

package/lib/components/XFormRowCol/XFormInlineRow.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XFormInlineRow = void 0;
+var react_1 = __importDefault(require("react"));
+var XFormRowCol_1 = require("./XFormRowCol");
+var XFormInlineRow = function (props) {
+    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-inline-row", form: props.form, labelStyle: props.labelStyle, children: props.children });
+};
+exports.XFormInlineRow = XFormInlineRow;

package/lib/components/XFormRowCol/XFormRow.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { XFormBase } from "../XFormBase";
+export interface XFormRowProps {
+    form?: XFormBase;
+    labelStyle?: React.CSSProperties;
+    children: JSX.Element | JSX.Element[];
+}
+export declare const XFormRow: (props: XFormRowProps) => JSX.Element;

package/lib/components/XFormRowCol/XFormRow.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XFormRow = void 0;
+var react_1 = __importDefault(require("react"));
+var XFormRowCol_1 = require("./XFormRowCol");
+var XFormRow = function (props) {
+    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-row", form: props.form, labelStyle: props.labelStyle, children: props.children });
+};
+exports.XFormRow = XFormRow;

package/lib/components/XFormRowCol/XFormRowCol.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { XFormBase } from "../XFormBase";
+export interface XFormRowColProps {
+    className: "x-form-row" | "x-form-inline-row" | "x-form-col";
+    form?: XFormBase;
+    labelStyle?: React.CSSProperties;
+    children: JSX.Element | JSX.Element[];
+}
+export declare const XFormRowCol: (props: XFormRowColProps) => JSX.Element;

package/lib/components/XFormRowCol/XFormRowCol.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XFormRowCol = void 0;
+var react_1 = __importDefault(require("react"));
+var XFormRowCol = function (props) {
+    var childElemList;
+    if (props.form || props.labelStyle) {
+        // ak chceme zmenit child element, tak treba bud vytvorit novy alebo vyklonovat
+        // priklad je na https://soshace.com/building-react-components-using-children-props-and-context-api/
+        childElemList = react_1.default.Children.map(props.children, function (child) {
+            var _a, _b;
+            // klonujeme len nase X* komponenty (napr. XInputText), child.type.name vracia nazov komponenty (napr. XInputText)
+            // ak vyklonujeme cudziu komponentu, funguje, ale prida do nej property labelstyle=[object Object]
+            if (child.type.name && child.type.name.startsWith("X")) {
+                return react_1.default.cloneElement(child, { form: (_a = child.props.form) !== null && _a !== void 0 ? _a : props.form, labelStyle: (_b = child.props.labelStyle) !== null && _b !== void 0 ? _b : props.labelStyle });
+            }
+            else {
+                return child;
+            }
+        });
+    }
+    else {
+        childElemList = props.children; // netreba klonovat - viac menej koli performance
+    }
+    return react_1.default.createElement("div", { className: props.className }, childElemList);
+};
+exports.XFormRowCol = XFormRowCol;

package/lib/components/XInputDecimal.js

@@ -69,8 +69,9 @@ var XInputDecimal = /** @class */ (function (_super) {
         var _b = XUtilsMetadata_1.XUtilsMetadata.getParamsForInputNumber(this.xField), useGrouping = _b.useGrouping, fractionDigits = _b.fractionDigits, min = _b.min, max = _b.max, size = _b.size;
         var sizeInput = (_a = this.props.size) !== null && _a !== void 0 ? _a : size;
         // note: style overrides size (width of the input according to character count)
+        var label = this.getLabel();
         return (react_1.default.createElement("div", { className: "field grid" },
-            react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
+            label !== undefined ? react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, label) : null,
             react_1.default.createElement(inputnumber_1.InputNumber, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), mode: "decimal", locale: "de-DE", useGrouping: useGrouping, minFractionDigits: fractionDigits, maxFractionDigits: fractionDigits, min: min, max: max, size: sizeInput, style: this.props.inputStyle }, this.getClassNameTooltip(), { onBlur: this.onBlur }))));
     };
     return XInputDecimal;

package/lib/components/XInputDecimalBase.d.ts

@@ -9,4 +9,5 @@ export declare const XInputDecimalBase: (props: {
     min?: number | undefined;
     max?: number | undefined;
     size?: number | undefined;
+    className?: string | undefined;
 }) => JSX.Element;

package/lib/components/XInputDecimalBase.js

@@ -13,6 +13,6 @@ var XInputDecimalBase = function (props) {
         props.onChange(e.value);
     };
     // null konvertujeme na undefined (zevraj InputNumber nechce null)
-    return (react_1.default.createElement(inputnumber_1.InputNumber, { id: props.id, value: props.value !== null ? props.value : undefined, onChange: onChange, readOnly: props.readOnly, mode: "decimal", locale: "de-DE", useGrouping: props.useGrouping, minFractionDigits: props.fractionDigits, maxFractionDigits: props.fractionDigits, min: props.min, max: props.max, size: props.size }));
+    return (react_1.default.createElement(inputnumber_1.InputNumber, { id: props.id, value: props.value !== null ? props.value : undefined, onChange: onChange, readOnly: props.readOnly, mode: "decimal", locale: "de-DE", useGrouping: props.useGrouping, minFractionDigits: props.fractionDigits, maxFractionDigits: props.fractionDigits, min: props.min, max: props.max, size: props.size, className: props.className }));
 };
 exports.XInputDecimalBase = XInputDecimalBase;

package/lib/components/XInputText.js

@@ -60,8 +60,9 @@ var XInputText = /** @class */ (function (_super) {
         var _a;
         var size = (_a = this.props.size) !== null && _a !== void 0 ? _a : this.xField.length;
         // note: style overrides size (width of the input according to character count)
+        var label = this.getLabel();
         return (react_1.default.createElement("div", { className: "field grid" },
-            react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
+            label !== undefined ? react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, label) : null,
             react_1.default.createElement(inputtext_1.InputText, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, size: size, style: this.props.inputStyle }, this.getClassNameTooltip(), { onBlur: this.onBlur }))));
     };
     return XInputText;

package/lib/components/XLazyDataTable.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactChild } from 'react';
 import { DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData } from 'primereact/datatable';
 import { ColumnBodyOptions, ColumnFilterElementTemplateOptions } from 'primereact/column';
+import { XViewStatusOrBoolean } from "./XUtils";
 import { XSearchBrowseParams } from "./XSearchBrowseParams";
 import { XAggregateType, XCustomFilter } from "../serverApi/FindParam";
 import { XOnSaveOrCancelProp } from "./XFormBase";
@@ -86,11 +87,19 @@ export interface XLazyColumnProps {
     header?: any;
     align?: "left" | "center" | "right";
     dropdownInFilter?: boolean;
+    dropdownFilter?: XCustomFilter;
+    dropdownSortField?: string;
     showFilterMenu?: boolean;
     betweenFilter?: XBetweenFilterProp | "noBetween";
     width?: string;
     aggregateType?: XAggregateType;
+    columnViewStatus: XViewStatusOrBoolean;
     filterElement?: XFilterElementProp;
     body?: React.ReactNode | ((data: any, options: ColumnBodyOptions) => React.ReactNode);
 }
-export declare const XLazyColumn: (props: XLazyColumnProps) => null;
+export declare const XLazyColumn: {
+    (props: XLazyColumnProps): null;
+    defaultProps: {
+        columnViewStatus: boolean;
+    };
+};

package/lib/components/XLazyDataTable.js

@@ -634,7 +634,7 @@ var XLazyDataTable = function (props) {
         if (props.scrollWidth !== "none") {
             scrollWidth = props.scrollWidth;
             if (scrollWidth === "viewport") {
-                scrollWidth = 'calc(100vw - 1.4rem)'; // 20px okraje
+                scrollWidth = 'calc(100vw - 2.2rem)'; // povodne bolo 1.4rem (20px okraje) ale pri vela stlpcoch vznikal horizontalny scrollbar
             }
         }
         if (props.scrollHeight !== "none") {
@@ -720,7 +720,7 @@ var XLazyDataTable = function (props) {
     // export pre search button-y zatial vypneme
     var exportRows = (props.searchBrowseParams === undefined);
     // pre lepsiu citatelnost vytvarame stlpce uz tu
-    var columnElemList = react_1.default.Children.map(props.children, function (child) {
+    var columnElemList = react_1.default.Children.map(props.children.filter(function (child) { return XUtils_1.XUtils.xViewStatus(child.props.columnViewStatus) !== XUtils_1.XViewStatus.Hidden; }), function (child) {
         // ak chceme zmenit child element, tak treba bud vytvorit novy alebo vyklonovat
         // priklad je na https://soshace.com/building-react-components-using-children-props-and-context-api/
         // (vzdy musime robit manipulacie so stlpcom, lebo potrebujeme pridat filter={true} sortable={true}
@@ -759,7 +759,7 @@ var XLazyDataTable = function (props) {
             }
             else if (childColumn.props.dropdownInFilter) {
                 var dropdownValue = getDropdownFilterValue(childColumn.props.field);
-                filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: props.entity, path: childColumn.props.field, value: dropdownValue, onValueChange: onDropdownFilterChange });
+                filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: props.entity, path: childColumn.props.field, value: dropdownValue, onValueChange: onDropdownFilterChange, filter: childColumn.props.dropdownFilter, sortField: childColumn.props.dropdownSortField });
             }
             else if (xField.type === "date" || xField.type === "datetime") {
                 betweenFilter = getBetweenFilter(childColumn.props.betweenFilter, props.betweenFilter);
@@ -902,3 +902,6 @@ var XLazyColumn = function (props) {
     return (null);
 };
 exports.XLazyColumn = XLazyColumn;
+exports.XLazyColumn.defaultProps = {
+    columnViewStatus: true // XViewStatus.ReadWrite
+};

package/lib/components/XUtils.d.ts

@@ -13,6 +13,12 @@ export declare enum OperationType {
     Update = 2,
     Remove = 3
 }
+export declare enum XViewStatus {
+    ReadWrite = 0,
+    ReadOnly = 1,
+    Hidden = 2
+}
+export type XViewStatusOrBoolean = XViewStatus | boolean;
 export interface IPostgresInterval {
     years?: number;
     months?: number;
@@ -103,5 +109,7 @@ export declare class XUtils {
     static normalizeString(value: string): string;
     static createCustomFilterItems(customFilter: XCustomFilter | undefined): XCustomFilterItem[] | undefined;
     static filterAnd(...filters: (XCustomFilter | undefined)[]): XCustomFilterItem[] | undefined;
+    static filterIdIn(idField: string, idList: number[]): XCustomFilter;
     static isTableRowInserted(tableRow: any): boolean;
+    static xViewStatus(xViewStatusOrBoolean: XViewStatusOrBoolean): XViewStatus;
 }

package/lib/components/XUtils.js

@@ -83,7 +83,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.XUtils = exports.OperationType = void 0;
+exports.XUtils = exports.XViewStatus = exports.OperationType = void 0;
 var XUtilsMetadata_1 = require("./XUtilsMetadata");
 var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 var ExportImportParam_1 = require("../serverApi/ExportImportParam");
@@ -97,6 +97,12 @@ var OperationType;
     OperationType[OperationType["Update"] = 2] = "Update";
     OperationType[OperationType["Remove"] = 3] = "Remove";
 })(OperationType = exports.OperationType || (exports.OperationType = {}));
+var XViewStatus;
+(function (XViewStatus) {
+    XViewStatus[XViewStatus["ReadWrite"] = 0] = "ReadWrite";
+    XViewStatus[XViewStatus["ReadOnly"] = 1] = "ReadOnly";
+    XViewStatus[XViewStatus["Hidden"] = 2] = "Hidden";
+})(XViewStatus = exports.XViewStatus || (exports.XViewStatus = {}));
 var XUtils = /** @class */ (function () {
     function XUtils() {
     }
@@ -725,10 +731,26 @@ var XUtils = /** @class */ (function () {
         return customFilterItemsResult;
     };
     // pomocna metodka
+    // ak je idList prazdny, vytvori podmienku id IN (0) a nevrati ziadne zaznamy
+    XUtils.filterIdIn = function (idField, idList) {
+        return { where: "[".concat(idField, "] IN (:...idList)"), params: { "idList": idList.length > 0 ? idList : [0] } };
+    };
+    // pomocna metodka
     XUtils.isTableRowInserted = function (tableRow) {
         var _a;
         return (_a = tableRow.__x_generatedRowId) !== null && _a !== void 0 ? _a : false; // specialny priznak, ze sme vygenerovali id-cko
     };
+    // pomocna metodka
+    XUtils.xViewStatus = function (xViewStatusOrBoolean) {
+        var xViewStatus;
+        if (typeof xViewStatusOrBoolean === "boolean") {
+            xViewStatus = xViewStatusOrBoolean ? XViewStatus.ReadWrite : XViewStatus.Hidden;
+        }
+        else {
+            xViewStatus = xViewStatusOrBoolean;
+        }
+        return xViewStatus;
+    };
     XUtils.dropdownEmptyOptionValue = " ";
     XUtils.xBackendUrl = undefined;
     // nacachovany XToken - na rozlicnych miestach potrebujeme vediet uzivatela

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.13.0",
+  "version": "1.15.0",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",