@michalrakus/x-react-web-lib 1.2.0 → 1.4.0

package/lib/components/XFormComponent.js

@@ -47,8 +47,34 @@ var XFormComponent = /** @class */ (function (_super) {
         this.props.form.onFieldChange(this.getField(), value, error, onChange, assocObjectChange);
     };
     XFormComponent.prototype.isReadOnly = function () {
-        // tuto do buducna planujeme pridat aj dynamicky readOnly, bude ho treba ukladat do form.state podobne ako sa ukladaju errory do form.state.errorMap
-        return XUtils_1.XUtils.isReadOnly(this.getField(), this.props.readOnly);
+        var readOnly;
+        if (!XUtilsCommon_1.XUtilsCommon.isSingleField(this.getField())) {
+            // if the length of field is 2 or more, then readOnly
+            readOnly = true;
+        }
+        // the purpose of formReadOnly is to put the whole form to read only mode,
+        // that's why the formReadOnly has higher prio then property this.props.readOnly
+        else if (this.props.form.formReadOnlyBase(this.getField())) {
+            readOnly = true;
+        }
+        else if (typeof this.props.readOnly === 'boolean') {
+            readOnly = this.props.readOnly;
+        }
+        else if (typeof this.props.readOnly === 'function') {
+            // TODO - tazko povedat ci niekedy bude object === null (asi ano vid metodu getFilterBase)
+            var object = this.props.form.state.object;
+            if (object) {
+                readOnly = this.props.readOnly(this.props.form.getXObject());
+            }
+            else {
+                readOnly = true;
+            }
+        }
+        else {
+            // readOnly is undefined
+            readOnly = false;
+        }
+        return readOnly;
     };
     XFormComponent.prototype.getLabel = function () {
         var _a;
@@ -104,7 +130,9 @@ var XFormComponent = /** @class */ (function (_super) {
         }
         return undefined;
     };
-    // deprecated - nie je to pekne riesenie - do komponentu treba posielat error message (string) a nie props (asi ako v XAutoComplete)
+    /**
+     * @deprecated - nie je to pekne riesenie - do komponentu treba posielat error message (string) a nie props (asi ako v XAutoComplete)
+     */
     XFormComponent.prototype.getClassNameTooltip = function () {
         var error = this.getError();
         return error ? {

package/lib/components/XFormComponentDT.js

@@ -48,8 +48,34 @@ var XFormComponentDT = /** @class */ (function (_super) {
         this.props.form.onTableFieldChange(this.props.rowData, this.getField(), value, error, onChange, assocObjectChange);
     };
     XFormComponentDT.prototype.isReadOnly = function () {
-        // tuto do buducna planujeme pridat aj dynamicky readOnly, bude ho treba ukladat do form.state podobne ako sa ukladaju errory do form.state.errorMap
-        return XUtils_1.XUtils.isReadOnly(this.getField(), this.props.readOnly);
+        var readOnly;
+        if (!XUtilsCommon_1.XUtilsCommon.isSingleField(this.getField())) {
+            // if the length of field is 2 or more, then readOnly
+            readOnly = true;
+        }
+        // formReadOnlyBase is called on the level XFormDataTable2
+        // else if (this.props.form.formReadOnlyBase("xxx")) {
+        //     readOnly = true;
+        // }
+        else if (typeof this.props.readOnly === 'boolean') {
+            readOnly = this.props.readOnly;
+        }
+        // else if (typeof this.props.readOnly === 'function') {
+        //     // TODO - tazko povedat ci niekedy bude object === null (asi ano vid metodu getFilterBase)
+        // TODO - use also this.props.rowData
+        //     const object: XObject = this.props.form.state.object;
+        //     if (object) {
+        //         readOnly = this.props.readOnly(this.props.form.getXObject());
+        //     }
+        //     else {
+        //         readOnly = true;
+        //     }
+        // }
+        else {
+            // readOnly is undefined
+            readOnly = false;
+        }
+        return readOnly;
     };
     // *********** validation support ************
     // volane po kliknuti na Save

package/lib/components/XFormDataTable2.d.ts

@@ -75,12 +75,13 @@ 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, rowData: any, xEntity: XEntity): any;
+    bodyTemplate(columnProps: XFormColumnProps, tableReadOnly: boolean, rowData: any, xEntity: XEntity): any;
     onClickAddRow(): void;
     onClickRemoveRowBySelection(): void;
     removeRow(row: any): void;
     validate(): void;
     getErrorMessages(): string;
+    isReadOnly(): boolean;
     render(): JSX.Element;
 }
 export type TableFieldOnChange = (e: XTableFieldChangeEvent<any, any>) => void;

package/lib/components/XFormDataTable2.js

@@ -334,23 +334,26 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
     */
     // body={(rowData: any) => bodyTemplate(childColumn.props.field, rowData)}
-    XFormDataTable2.prototype.bodyTemplate = function (columnProps, rowData, xEntity) {
+    XFormDataTable2.prototype.bodyTemplate = function (columnProps, tableReadOnly, rowData, xEntity) {
+        var _a, _b;
         var body;
         if (columnProps.type === "inputSimple") {
             var columnPropsInputSimple = columnProps;
+            // tableReadOnly has higher prio then property readOnly
+            var readOnly = tableReadOnly || ((_a = columnPropsInputSimple.readOnly) !== null && _a !== void 0 ? _a : false);
             var xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPath(xEntity, columnPropsInputSimple.field);
             if (xField.type === "decimal" || xField.type === "number") {
-                body = react_1.default.createElement(XInputDecimalDT_1.XInputDecimalDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: columnPropsInputSimple.readOnly, onChange: columnPropsInputSimple.onChange });
+                body = react_1.default.createElement(XInputDecimalDT_1.XInputDecimalDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly, onChange: columnPropsInputSimple.onChange });
             }
             else if (xField.type === "date" || xField.type === "datetime") {
-                body = react_1.default.createElement(XInputDateDT_1.XInputDateDT, { form: this.props.form, xField: xField, field: columnPropsInputSimple.field, rowData: rowData, readOnly: columnPropsInputSimple.readOnly });
+                body = react_1.default.createElement(XInputDateDT_1.XInputDateDT, { form: this.props.form, xField: xField, field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly });
             }
             else if (xField.type === "boolean") {
-                body = react_1.default.createElement(XCheckboxDT_1.XCheckboxDT, { form: this.props.form, xField: xField, field: columnPropsInputSimple.field, rowData: rowData, readOnly: columnPropsInputSimple.readOnly });
+                body = react_1.default.createElement(XCheckboxDT_1.XCheckboxDT, { form: this.props.form, xField: xField, field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly });
             }
             else {
                 // xField.type === "string", pripadne ine jednoduche typy
-                body = react_1.default.createElement(XInputTextDT_1.XInputTextDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: columnPropsInputSimple.readOnly });
+                body = react_1.default.createElement(XInputTextDT_1.XInputTextDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly });
             }
         }
         else if (columnProps.type === "dropdown") {
@@ -359,7 +362,9 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         else if (columnProps.type === "autoComplete") {
             var columnPropsAutoComplete = columnProps;
-            body = react_1.default.createElement(XAutoCompleteDT_1.XAutoCompleteDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsAutoComplete.assocField, displayField: columnPropsAutoComplete.displayField, searchTable: columnPropsAutoComplete.searchTable, assocForm: columnPropsAutoComplete.assocForm, filter: columnPropsAutoComplete.filter, rowData: rowData });
+            // tableReadOnly has higher prio then property readOnly
+            var readOnly = tableReadOnly || ((_b = columnPropsAutoComplete.readOnly) !== null && _b !== void 0 ? _b : false);
+            body = react_1.default.createElement(XAutoCompleteDT_1.XAutoCompleteDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsAutoComplete.assocField, displayField: columnPropsAutoComplete.displayField, searchTable: columnPropsAutoComplete.searchTable, assocForm: columnPropsAutoComplete.assocForm, filter: columnPropsAutoComplete.filter, rowData: rowData, readOnly: readOnly });
         }
         else if (columnProps.type === "searchButton") {
             var columnPropsSearchButton = columnProps;
@@ -459,6 +464,34 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         return msg;
     };
+    // TODO - velmi podobna funkcia ako XFormComponent.isReadOnly() - zjednotit ak sa da
+    XFormDataTable2.prototype.isReadOnly = function () {
+        var readOnly;
+        // the purpose of formReadOnly is to put the whole form to read only mode,
+        // that's why the formReadOnly has higher prio then property this.props.readOnly
+        if (this.props.form.formReadOnlyBase(this.props.assocField)) {
+            readOnly = true;
+        }
+        else if (typeof this.props.readOnly === 'boolean') {
+            readOnly = this.props.readOnly;
+        }
+        // TODO
+        // else if (typeof this.props.readOnly === 'function') {
+        //     // TODO - tazko povedat ci niekedy bude object === null (asi ano vid metodu getFilterBase)
+        //     const object: XObject = this.props.form.state.object;
+        //     if (object) {
+        //         readOnly = this.props.readOnly(this.props.form.getXObject());
+        //     }
+        //     else {
+        //         readOnly = true;
+        //     }
+        // }
+        else {
+            // readOnly is undefined
+            readOnly = false;
+        }
+        return readOnly;
+    };
     XFormDataTable2.prototype.render = function () {
         var _this = this;
         var paginator = this.props.paginator !== undefined ? this.props.paginator : false;
@@ -473,7 +506,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         var filterDisplay = this.props.filterDisplay !== "none" ? this.props.filterDisplay : undefined;
         var label = this.props.label !== undefined ? this.props.label : this.props.assocField;
-        var readOnly = this.props.readOnly !== undefined ? this.props.readOnly : false;
+        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;
@@ -555,7 +588,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
                 var filterMenuInFilterRow = thisLocal.props.filterDisplay === "row" && showFilterMenu;
                 var sortableButtonInHeader = thisLocal.props.sortable;
                 var filterButtonInHeader = thisLocal.props.filterDisplay === "menu";
-                width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, filterMenuInFilterRow, childColumnProps.type, header, sortableButtonInHeader, filterButtonInHeader);
+                width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, undefined, filterMenuInFilterRow, childColumnProps.type, header, sortableButtonInHeader, filterButtonInHeader);
             }
             var headerStyle = {};
             if (width !== undefined) {
@@ -577,11 +610,11 @@ var XFormDataTable2 = /** @class */ (function (_super) {
                 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, rowData, xEntity); } });
+            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); } });
         });
         if (this.props.removeButtonInRow) {
             // je dolezite nastavit sirku header-a, lebo inac ma stlpec sirku 0 a nevidno ho
-            columnElemList.push(react_1.default.createElement(column_1.Column, { key: "removeButton", headerStyle: { width: '2rem' }, body: function (rowData) { return react_1.default.createElement(XButtonIconNarrow_1.XButtonIconNarrow, { icon: "pi pi-times", onClick: function () { return _this.removeRow(rowData); }, addMargin: false }); } }));
+            columnElemList.push(react_1.default.createElement(column_1.Column, { key: "removeButton", headerStyle: { width: '2rem' }, body: function (rowData) { return react_1.default.createElement(XButtonIconNarrow_1.XButtonIconNarrow, { icon: "pi pi-times", onClick: function () { return _this.removeRow(rowData); }, disabled: readOnly, addMargin: false }); } }));
         }
         return (react_1.default.createElement("div", null,
             react_1.default.createElement("div", { className: "flex justify-content-center" },
@@ -589,8 +622,8 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             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, 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("div", { className: "flex justify-content-center" },
-                react_1.default.createElement(XButton_1.XButton, { icon: this.props.addRowIcon, label: this.props.addRowLabel, onClick: this.onClickAddRow }),
-                this.props.removeButtonInRow ? undefined : react_1.default.createElement(XButton_1.XButton, { icon: this.props.removeRowIcon, label: this.props.removeRowLabel, onClick: this.onClickRemoveRowBySelection }))));
+                react_1.default.createElement(XButton_1.XButton, { icon: this.props.addRowIcon, label: this.props.addRowLabel, onClick: this.onClickAddRow, disabled: readOnly }),
+                this.props.removeButtonInRow ? undefined : react_1.default.createElement(XButton_1.XButton, { icon: this.props.removeRowIcon, label: this.props.removeRowLabel, onClick: this.onClickRemoveRowBySelection, disabled: readOnly }))));
     };
     XFormDataTable2.defaultProps = {
         filterDisplay: "row",

package/lib/components/XInputDate.d.ts

@@ -1,9 +1,13 @@
-import { XFormBase } from "./XFormBase";
-import React from "react";
-export declare const XInputDate: (props: {
-    form: XFormBase;
+/// <reference types="react" />
+import { XFormComponentProps } from "./XFormComponent";
+import { XInput } from "./XInput";
+export interface XInputDateProps extends XFormComponentProps<number> {
     field: string;
-    label?: string | undefined;
-    readOnly?: boolean | undefined;
-    labelStyle?: React.CSSProperties | undefined;
-}) => JSX.Element;
+}
+export declare class XInputDate extends XInput<Date, XInputDateProps> {
+    constructor(props: XInputDateProps);
+    getValue(): Date | null;
+    onValueChange(value: Date | null): void;
+    onBlur(e: any): void;
+    render(): JSX.Element;
+}

package/lib/components/XInputDate.js

@@ -1,58 +1,63 @@
 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XInputDate = void 0;
 var react_1 = __importDefault(require("react"));
-var calendar_1 = require("primereact/calendar");
-var XUtilsConversions_1 = require("./XUtilsConversions");
-var XUtilsMetadata_1 = require("./XUtilsMetadata");
-var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
-var XUtils_1 = require("./XUtils");
-var XInputDate = function (props) {
-    var _a, _b;
-    props.form.addField(props.field);
-    var xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPathStr(props.form.getEntity(), props.field);
-    var showTime = (xField.type === 'datetime');
-    var cssClassName = showTime ? 'x-input-datetime' : 'x-input-date';
-    var label = (_a = props.label) !== null && _a !== void 0 ? _a : props.field;
-    var readOnly = XUtils_1.XUtils.isReadOnly(props.field, props.readOnly);
-    if (!xField.isNullable && !readOnly) {
-        label = XUtils_1.XUtils.markNotNull(label);
+var XCalendar_1 = require("./XCalendar");
+var XInput_1 = require("./XInput");
+var XInputDate = /** @class */ (function (_super) {
+    __extends(XInputDate, _super);
+    function XInputDate(props) {
+        var _this = _super.call(this, props) || this;
+        _this.onValueChange = _this.onValueChange.bind(_this);
+        _this.onBlur = _this.onBlur.bind(_this);
+        return _this;
     }
-    var onValueChange = function (e) {
-        // z Calendar prichadza e.value - typ Date alebo null
-        // typ Date prichadza ak uzivatel vyplnil validny datum, null (typeof e.value vracia "object") prichadza ak uzivatel vymazal datum
-        // alebo je este datum nekompletny (uzivatel prave zadava datum)
-        //console.log(typeof e.value);
-        //console.log(e.value instanceof Date);
-        props.form.onFieldChange(props.field, e.value);
-    };
-    var fieldValue = undefined;
-    var object = props.form.state.object;
-    if (object !== null) {
-        var objectValue = XUtilsCommon_1.XUtilsCommon.getValueByPath(object, props.field);
-        //  pre istotu dame na null, null je standard
-        //if (objectValue === undefined) {
-        //    objectValue = null;
-        //}
-        // TODO - konvertovat null hodnotu na "" (vo funkcii stringAsUI) je dolezite aby sa prejavila zmena na null v modeli
-        // - otestovat ci zmena na null funguje dobre -
-        //fieldValue = stringAsUI(objectValue);
+    XInputDate.prototype.getValue = function () {
+        var value = null;
+        var objectValue = this.getValueFromObject();
         // tuto zatial hack, mal by prist Date
         if (typeof objectValue === 'string') {
-            fieldValue = new Date(objectValue);
+            value = new Date(objectValue);
         }
         else if (typeof objectValue === 'object' && objectValue instanceof Date) {
-            fieldValue = objectValue;
+            value = objectValue;
         }
-        // fieldValue zostalo undefined (konvertujeme null -> undefined) - Calendar pozaduje undefined, nechce null
-    }
-    var labelStyle = (_b = props.labelStyle) !== null && _b !== void 0 ? _b : {};
-    XUtils_1.XUtils.addCssPropIfNotExists(labelStyle, { width: XUtils_1.XUtils.FIELD_LABEL_WIDTH });
-    return (react_1.default.createElement("div", { className: "field grid" },
-        react_1.default.createElement("label", { htmlFor: props.field, className: "col-fixed", style: labelStyle }, label),
-        react_1.default.createElement(calendar_1.Calendar, { id: props.field, value: fieldValue, onChange: onValueChange, disabled: readOnly, showIcon: true, dateFormat: (0, XUtilsConversions_1.dateFormatCalendar)(), showTime: showTime, showSeconds: showTime, inputClassName: cssClassName, showOnFocus: false })));
-};
+        // value zostalo null ak nebol vykonany ziaden if
+        return value;
+    };
+    XInputDate.prototype.onValueChange = function (value) {
+        // z XCalendar prichadza value - typ Date alebo null
+        this.onValueChangeBase(value);
+    };
+    // nedame do onChange inputu, lebo by sa nas onChange volal po kazdej zmene pismenka
+    // ak bude treba, mozme este dorobit metodu "onChange2", ktora sa bude volat po kazdej zmene pismenka (asi iba do XInputText)
+    XInputDate.prototype.onBlur = function (e) {
+        this.callOnChangeFromOnBlur();
+    };
+    XInputDate.prototype.render = function () {
+        // 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(XCalendar_1.XCalendar, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), datetime: this.xField.type === 'datetime' })));
+    };
+    return XInputDate;
+}(XInput_1.XInput));
 exports.XInputDate = XInputDate;

package/lib/components/XInputDecimalBase.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const XInputDecimalBase: (props: {
+    id?: string | undefined;
+    value: number | null;
+    onChange: (value: number | null) => void;
+    readOnly?: boolean | undefined;
+    useGrouping?: boolean | undefined;
+    fractionDigits?: number | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    size?: number | undefined;
+}) => JSX.Element;

package/lib/components/XInputDecimalBase.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XInputDecimalBase = void 0;
+var react_1 = __importDefault(require("react"));
+var inputnumber_1 = require("primereact/inputnumber");
+// wrapper for InputNumber component - zatial taky zjednoduseny, len na filter polozky pouzivame
+var XInputDecimalBase = function (props) {
+    var onChange = function (e) {
+        // z InputNumber prichadza e.value - typ number alebo null
+        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 }));
+};
+exports.XInputDecimalBase = XInputDecimalBase;

package/lib/components/XLazyDataTable.d.ts

@@ -1,7 +1,10 @@
-import { ReactChild } from 'react';
+import React, { ReactChild } from 'react';
+import { DataTableFilterMetaData, DataTableOperatorFilterMetaData } from 'primereact/datatable';
+import { ColumnBodyOptions, ColumnFilterElementTemplateOptions } from 'primereact/column';
 import { SearchTableParams } from "./SearchTableParams";
 import { XCustomFilter } from "../serverApi/FindParam";
 import { XOnSaveOrCancelProp } from "./XFormBase";
+export type XBetweenFilterProp = "row" | "column" | undefined;
 export interface XEditModeHandlers {
     onStart: () => void;
     onSave: () => void;
@@ -18,6 +21,7 @@ export interface XLazyDataTableProps {
     paginator: boolean;
     rows: number;
     filterDisplay: "menu" | "row";
+    betweenFilter?: XBetweenFilterProp;
     scrollable: boolean;
     scrollWidth: string;
     scrollHeight: string;
@@ -49,12 +53,17 @@ export declare const XLazyDataTable: {
         shrinkWidth: boolean;
     };
 };
+export type XSetFilterItem = (field: string, filterItem: DataTableFilterMetaData | DataTableOperatorFilterMetaData) => void;
+export type XFilterElementProp = (setFilterItem: XSetFilterItem, options: ColumnFilterElementTemplateOptions) => React.ReactNode;
 export interface XLazyColumnProps {
     field: string;
     header?: any;
     align?: "left" | "center" | "right";
     dropdownInFilter?: boolean;
     showFilterMenu?: boolean;
+    betweenFilter?: XBetweenFilterProp | "noBetween";
     width?: string;
+    filterElement?: XFilterElementProp;
+    body?: React.ReactNode | ((data: any, options: ColumnBodyOptions) => React.ReactNode);
 }
 export declare const XLazyColumn: (props: XLazyColumnProps) => null;