@ozen-ui/data-grid 0.76.0 → 0.78.0

package/__inner__/cjs/core/column/store/DataGridStoreColumn.js

@@ -4,9 +4,10 @@ exports.DataGridStoreColumn = void 0;
 var utils_1 = require("@ozen-ui/kit/utils");
 var mobx_1 = require("mobx");
 var shared_1 = require("../../../shared");
+var utils_2 = require("./utils");
 var DataGridStoreColumn = /** @class */ (function () {
     function DataGridStoreColumn(column, context, root) {
-        var _a;
+        var _a, _b;
         this.width = 'responsive';
         this.eventBus = new shared_1.EventBus();
         this.rawIsVisible = true;
@@ -14,14 +15,14 @@ var DataGridStoreColumn = /** @class */ (function () {
         this.root = root !== null && root !== void 0 ? root : null;
         this.id = column.id;
         this.cell = column.cell;
-        this.header = column.header;
+        this.name = (0, utils_2.createDataGridStoreColumnName)(column, this);
+        this.header = (_a = column.header) !== null && _a !== void 0 ? _a : this.name;
         this.accessor = column.accessor;
         this.footer = column.footer;
-        this.name = column.name;
         this.align = column.align;
         this.sortSettings = column.sortSettings;
         this.sort = null;
-        var width = (_a = column.width) !== null && _a !== void 0 ? _a : context.columnsInfo.width;
+        var width = (_b = column.width) !== null && _b !== void 0 ? _b : context.columnsInfo.width;
         this.rawWidth = (function () {
             if ((0, utils_1.isFunction)(width)) {
                 return width;

package/__inner__/cjs/core/column/store/utils.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDataGridStoreColumnName = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var utils_1 = require("@ozen-ui/kit/utils");
+var createDataGridStoreColumnName = function (column, storeColumn) {
+    var Component = function () {
+        if ((0, utils_1.isFunction)(column.name)) {
+            var Component_1 = column.name;
+            return react_1.default.createElement(Component_1, { column: storeColumn });
+        }
+        return column.name;
+    };
+    return Component;
+};
+exports.createDataGridStoreColumnName = createDataGridStoreColumnName;

package/__inner__/cjs/core/column/table/DataGridColumn.js

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridColumn = void 0;
-var tslib_1 = require("tslib");
 var utils_1 = require("@ozen-ui/kit/utils");
 var entities_1 = require("../entities");
+var utils_2 = require("./utils");
 var DataGridColumn = /** @class */ (function () {
     function DataGridColumn(_a) {
         var id = _a.id, cell = _a.cell, header = _a.header, accessor = _a.accessor, footer = _a.footer, name = _a.name, align = _a.align, sorting = _a.sorting, width = _a.width;
         this.root = null;
-        this.context = null;
         this.rawId = id;
-        this.header = header !== null && header !== void 0 ? header : name;
-        this.cell = cell !== null && cell !== void 0 ? cell : (function (data) { return String(data); });
+        this.header = header;
+        this.cell =
+            cell !== null && cell !== void 0 ? cell : (0, utils_2.createDataGridColumnDefaultRender)();
         this.footer = footer;
         this.accessor = accessor;
         this.name = name;
@@ -30,9 +30,6 @@ var DataGridColumn = /** @class */ (function () {
             available: availableSorting,
         };
     }
-    DataGridColumn.prototype.setContext = function (context) {
-        this.context = context;
-    };
     Object.defineProperty(DataGridColumn.prototype, "id", {
         get: function () {
             if (this.root) {
@@ -46,24 +43,6 @@ var DataGridColumn = /** @class */ (function () {
     DataGridColumn.prototype.setRoot = function (root) {
         this.root = root;
     };
-    DataGridColumn.prototype.createDateFilter = function (params) {
-        return this.context.createDateFilter(tslib_1.__assign(tslib_1.__assign({}, params), { column: this }));
-    };
-    DataGridColumn.prototype.createSelectFilter = function (params) {
-        return this.context.createSelectFilter(tslib_1.__assign(tslib_1.__assign({}, params), { column: this }));
-    };
-    DataGridColumn.prototype.createNumberFilter = function (params) {
-        return this.context.createNumberFilter(tslib_1.__assign(tslib_1.__assign({}, params), { column: this }));
-    };
-    DataGridColumn.prototype.createStringFilter = function (params) {
-        return this.context.createStringFilter(tslib_1.__assign(tslib_1.__assign({}, params), { column: this }));
-    };
-    DataGridColumn.prototype.createAutocompleteFilter = function (params) {
-        return this.context.createAutocompleteFilter(tslib_1.__assign(tslib_1.__assign({}, params), { column: this }));
-    };
-    DataGridColumn.prototype.createAutocompleteListCardFilter = function (params) {
-        return this.context.createAutocompleteListCardFilter(tslib_1.__assign(tslib_1.__assign({}, params), { column: this }));
-    };
     Object.defineProperty(DataGridColumn.prototype, "depth", {
         get: function () {
             if (this.root) {

package/__inner__/cjs/core/column/table/utils.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDataGridColumnDefaultRender = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var DataGridCellItem_1 = require("../../../ui/cells/DataGridCellItem");
+var createDataGridColumnDefaultRender = function () {
+    var Component = function (_a) {
+        var data = _a.data, column = _a.column;
+        return (react_1.default.createElement(DataGridCellItem_1.DataGridCellItem, { align: column.align }, String(data)));
+    };
+    return Component;
+};
+exports.createDataGridColumnDefaultRender = createDataGridColumnDefaultRender;

package/__inner__/cjs/core/filter/store/base/DataGridStoreFilter.js

@@ -12,17 +12,14 @@ var DataGridStoreFilter = /** @class */ (function () {
         this.id = filter.id;
         this.rawName = filter.name;
         this.group = filter.group;
-        this.column = null;
         (0, mobx_1.makeObservable)(this, {
             id: mobx_1.observable,
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-expect-error
             rawName: mobx_1.observable,
-            column: mobx_1.observable,
             group: mobx_1.observable,
             context: mobx_1.observable,
             setGroup: mobx_1.action,
-            setColumn: mobx_1.action,
             setValue: mobx_1.action,
             setLocalValue: mobx_1.action,
             setAllFilterValue: mobx_1.action,
@@ -106,9 +103,6 @@ var DataGridStoreFilter = /** @class */ (function () {
     DataGridStoreFilter.prototype.setGroup = function (group) {
         this.group = group;
     };
-    DataGridStoreFilter.prototype.setColumn = function (column) {
-        this.column = column;
-    };
     Object.defineProperty(DataGridStoreFilter.prototype, "isEditedLocal", {
         get: function () {
             return !this.isEqualValues(this.localValue, this.value);
@@ -149,9 +143,6 @@ var DataGridStoreFilter = /** @class */ (function () {
             if (this.rawName) {
                 return this.rawName;
             }
-            if (this.column) {
-                return this.column.name;
-            }
             return this.id;
         },
         enumerable: false,

package/__inner__/cjs/core/filter/table/base/DataGridTableFilter.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridTableFilter = void 0;
 var DataGridTableFilter = /** @class */ (function () {
     function DataGridTableFilter(_a) {
-        var id = _a.id, column = _a.column, name = _a.name, group = _a.group, render = _a.render;
-        this.column = column !== null && column !== void 0 ? column : null;
-        this.id = "filter_".concat(this.column ? "".concat(this.column.id, ".") : '').concat(id);
+        var id = _a.id, name = _a.name, group = _a.group, render = _a.render;
+        this.id = "filter_".concat(id);
         this.name = name !== null && name !== void 0 ? name : null;
         this.group = group !== null && group !== void 0 ? group : 'main';
         this.render = render !== null && render !== void 0 ? render : null;

package/__inner__/cjs/core/store/DataGridStore.js

@@ -63,14 +63,6 @@ var DataGridStore = /** @class */ (function () {
                 return;
             }
             _this.filters.addFilter(createdFilter);
-            if (!filter.column) {
-                return;
-            }
-            var storeColumn = _this.findColumn(filter.column);
-            if (!storeColumn) {
-                return;
-            }
-            createdFilter.setColumn(storeColumn);
         });
         this.setData(data);
         this.recalculate();

package/__inner__/cjs/core/sub-row/entities/index.js

@@ -2,4 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./position"), exports);
+tslib_1.__exportStar(require("./render"), exports);
 tslib_1.__exportStar(require("./settings"), exports);

package/__inner__/cjs/core/sub-row/entities/render.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/core/table/DataGridTable.js

@@ -58,7 +58,6 @@ var DataGridTable = /** @class */ (function () {
     };
     DataGridTable.prototype.addColumn = function (column) {
         this.nodes.push(column);
-        column.setContext(this);
         return column;
     };
     DataGridTable.prototype.createGroup = function (groupParams) {

package/__inner__/cjs/ui/DataGrid/components/DataGridHeadFoot/DataGridHeadFoot.js

@@ -39,7 +39,13 @@ exports.DataGridHeadFoot = (0, core_1.dataGridObserver)(function (_a) {
             isSubRowEnabled && store.subRows.isLeft && (react_1.default.createElement(components_1.DataGridHeadFootExpand, null)),
             nodes.map(function (node) {
                 var render = isFoot ? node.footer : node.header;
-                var rendered = (0, utils_1.isFunction)(render) ? render() : render;
+                var rendered = (function () {
+                    if ((0, utils_1.isFunction)(render)) {
+                        var Component = render;
+                        return react_1.default.createElement(Component, null);
+                    }
+                    return render;
+                })();
                 var isGroup = node instanceof core_1.DataGridStoreColumnsGroup;
                 return (react_1.default.createElement(react_1.Fragment, { key: node.id },
                     isGroup &&

package/__inner__/cjs/ui/DataGrid/components/DataGridPagination/DataGridPagination.js

@@ -23,10 +23,20 @@ var UnwrappedDataGridPagination = (0, react_1.forwardRef)(function (_a, ref) {
     if (!pagination.isEnabled) {
         return null;
     }
-    var renderedBeforeText = (0, utils_1.isFunction)(beforeText) ? beforeText() : beforeText;
-    var renderedAfterText = (0, utils_1.isFunction)(afterText)
-        ? afterText(pagination.total)
-        : afterText;
+    var renderedBeforeText = (function () {
+        if ((0, utils_1.isFunction)(beforeText)) {
+            var Component = beforeText;
+            return react_1.default.createElement(Component, null);
+        }
+        return beforeText;
+    })();
+    var renderedAfterText = (function () {
+        if ((0, utils_1.isFunction)(afterText)) {
+            var Component = afterText;
+            return react_1.default.createElement(Component, { total: pagination.total });
+        }
+        return afterText;
+    })();
     return (react_1.default.createElement(Stack_1.Stack, { ref: ref, className: (0, exports.cnDataGridPagination)('', [className]), justify: "spaceBetween", align: "center", fullWidth: true },
         react_1.default.createElement(Pagination_1.Pagination, { totalCount: pagination.total, page: pagination.index, pageSize: pagination.pageSize, size: "s", onPageChange: function (page) { return pagination.setIndex(page); }, disabled: store.isLoading }),
         pagination.isAvailableSizeEnabled && (react_1.default.createElement(Stack_1.Stack, { gap: "s", align: "center" },

package/__inner__/cjs/ui/DataGrid/components/DataGridRow/DataGridRow.js

@@ -23,9 +23,13 @@ exports.DataGridRow = (0, core_1.dataGridObserver)(function (_a) {
             store.columns.map(function (column) {
                 var cell = column.cell;
                 var value = column.accessor(row, index);
-                var renderedCell = (0, utils_1.isFunction)(cell)
-                    ? cell(value, row, index)
-                    : cell;
+                var renderedCell = (function () {
+                    if ((0, utils_1.isFunction)(cell)) {
+                        var Component = cell;
+                        return (react_1.default.createElement(Component, { key: "".concat(column.id, "-").concat(index), data: value, item: row, index: index, column: column }));
+                    }
+                    return cell;
+                })();
                 var cellComponent = (function () {
                     if ((0, utils_1.isString)(renderedCell) || (0, utils_1.isNumber)(renderedCell)) {
                         return (react_1.default.createElement(cells_1.DataGridCellItem, { align: column.align }, renderedCell));

package/__inner__/cjs/ui/DataGrid/components/DataGridSubRow/DataGridSubRow.js

@@ -27,7 +27,7 @@ exports.DataGridSubRow = (0, core_1.dataGridObserver)(function (_a) {
         ? store.subRows.getIsExpandedRoot(id)
         : !!((_c = subRow.root) === null || _c === void 0 ? void 0 : _c.getIsExpanded(id));
     var canExpand = subRow.canExpand;
-    var rendered = subRow.render(row, index);
+    var Component = subRow.render;
     var expandButton = (react_1.default.createElement(IconButtonNext_1.IconButton, { icon: subRow.getIsExpanded(id) ? icons_1.ChevronUpIcon : icons_1.ChevronDownIcon, size: "s", onClick: function () {
             subRow.toggle(id);
         }, compressed: true }));
@@ -47,7 +47,7 @@ exports.DataGridSubRow = (0, core_1.dataGridObserver)(function (_a) {
                         canExpand &&
                         store.subRows.isLeft &&
                         expandButton,
-                    rendered,
+                    react_1.default.createElement(Component, { subRow: subRow, index: index, item: row }),
                     isSomeRowsVisible &&
                         canExpand &&
                         store.subRows.isRight &&

package/__inner__/cjs/ui/DataGridAllFiltersDrawer/DataGridAllFiltersDrawer.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridAllFiltersDrawer = void 0;
 var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var DrawerNext_1 = require("@ozen-ui/kit/DrawerNext");
 var Stack_1 = require("@ozen-ui/kit/Stack");
 var useEventListener_1 = require("@ozen-ui/kit/useEventListener");
@@ -10,8 +10,8 @@ var utils_1 = require("@ozen-ui/kit/utils");
 var core_1 = require("../../core");
 var filters_1 = require("../filters");
 var components_1 = require("./components");
-exports.DataGridAllFiltersDrawer = (0, core_1.dataGridObserver)(function (_a) {
-    var title = _a.title, subTitle = _a.subTitle, applyButton = _a.applyButton, closeButton = _a.closeButton;
+var NonWrappedDataGridAllFiltersDrawer = (0, react_1.forwardRef)(function (_a, ref) {
+    var title = _a.title, subTitle = _a.subTitle, applyButton = _a.applyButton, closeButton = _a.closeButton, onClose = _a.onClose, other = tslib_1.__rest(_a, ["title", "subTitle", "applyButton", "closeButton", "onClose"]);
     var store = (0, core_1.useDataGridStore)();
     var isOpen = store.modals.isOpen('filters');
     var filters = store.filters;
@@ -25,7 +25,10 @@ exports.DataGridAllFiltersDrawer = (0, core_1.dataGridObserver)(function (_a) {
             store.modals.closeFilters();
         },
     });
-    return (react_1.default.createElement(DrawerNext_1.Drawer, { open: isOpen, onClose: function () { return store.modals.closeFilters(); } },
+    return (react_1.default.createElement(DrawerNext_1.Drawer, tslib_1.__assign({}, other, { ref: ref, open: isOpen, onClose: function () {
+            store.modals.closeFilters();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        } }),
         react_1.default.createElement(DrawerNext_1.DrawerHeader, null,
             react_1.default.createElement(DrawerNext_1.DrawerTitle, null, title),
             subTitle && react_1.default.createElement(DrawerNext_1.DrawerSubtitle, null, subTitle)),
@@ -33,3 +36,5 @@ exports.DataGridAllFiltersDrawer = (0, core_1.dataGridObserver)(function (_a) {
             react_1.default.createElement(Stack_1.Stack, { direction: "column", gap: "s", fullWidth: true }, filters.filters.map(function (filter) { return (react_1.default.createElement(filters_1.DataGridFilter, { key: filter.id, filter: filter, type: "allFilter" })); }))),
         react_1.default.createElement(components_1.DataGridAllFiltersDrawerFooter, { applyButton: applyButton, closeButton: closeButton })));
 });
+NonWrappedDataGridAllFiltersDrawer.displayName = 'DataGridAllFiltersDrawer';
+exports.DataGridAllFiltersDrawer = (0, core_1.dataGridObserver)(NonWrappedDataGridAllFiltersDrawer);

package/__inner__/cjs/ui/DataGridSettingsDrawer/DataGridSettingsDrawer.js

@@ -7,8 +7,8 @@ var CheckboxNext_1 = require("@ozen-ui/kit/CheckboxNext");
 var DrawerNext_1 = require("@ozen-ui/kit/DrawerNext");
 var FormGroup_1 = require("@ozen-ui/kit/FormGroup");
 var core_1 = require("../../core");
-exports.DataGridSettingsDrawer = (0, core_1.dataGridObserver)(function (_a) {
-    var title = _a.title, subTitle = _a.subTitle, closeButton = _a.closeButton, applyButton = _a.applyButton;
+var NonWrappedDataGridSettingsDrawer = (0, react_1.forwardRef)(function (_a, ref) {
+    var title = _a.title, subTitle = _a.subTitle, closeButton = _a.closeButton, applyButton = _a.applyButton, onClose = _a.onClose, other = tslib_1.__rest(_a, ["title", "subTitle", "closeButton", "applyButton", "onClose"]);
     var store = (0, core_1.useDataGridStore)();
     var isOpen = store.modals.isOpen('columns-settings');
     var columns = store.allColumns;
@@ -37,14 +37,18 @@ exports.DataGridSettingsDrawer = (0, core_1.dataGridObserver)(function (_a) {
             setLocalVisible({});
         }
     }, [isOpen]);
-    return (react_1.default.createElement(DrawerNext_1.Drawer, { open: isOpen, onClose: function () { return store.modals.closeColumnsSettings(); } },
+    return (react_1.default.createElement(DrawerNext_1.Drawer, tslib_1.__assign({}, other, { ref: ref, open: isOpen, onClose: function () {
+            store.modals.closeColumnsSettings();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        } }),
         react_1.default.createElement(DrawerNext_1.DrawerHeader, null,
             react_1.default.createElement(DrawerNext_1.DrawerTitle, null, title),
             subTitle && react_1.default.createElement(DrawerNext_1.DrawerSubtitle, null, subTitle)),
         react_1.default.createElement(DrawerNext_1.DrawerBody, null,
             react_1.default.createElement(FormGroup_1.FormGroup, { size: "l", direction: "column" }, columns.map(function (column) {
                 var checked = checkIsSelected(column);
-                return (react_1.default.createElement(CheckboxNext_1.Checkbox, { key: column.id, label: column.name, checked: checked, disabled: isLeftAlone && checked, size: "l", onChange: function (event) {
+                var NameComponent = column.name;
+                return (react_1.default.createElement(CheckboxNext_1.Checkbox, { key: column.id, label: react_1.default.createElement(NameComponent, null), checked: checked, disabled: isLeftAlone && checked, size: "l", onChange: function (event) {
                         setLocalVisible(function (previousVisible) {
                             var _a;
                             return (tslib_1.__assign(tslib_1.__assign({}, previousVisible), (_a = {}, _a[column.id] = event.target.checked, _a)));
@@ -61,3 +65,5 @@ exports.DataGridSettingsDrawer = (0, core_1.dataGridObserver)(function (_a) {
                         store.modals.closeColumnsSettings();
                     } }, applyButton)))));
 });
+NonWrappedDataGridSettingsDrawer.displayName = 'DataGridSettingsDrawer';
+exports.DataGridSettingsDrawer = (0, core_1.dataGridObserver)(NonWrappedDataGridSettingsDrawer);

package/__inner__/cjs/ui/filters/DataGridAutocompleteFilter/DataGridAutocompleteFilter.js

@@ -9,19 +9,7 @@ var utilts_1 = require("./utilts");
 exports.DataGridAutocompleteFilter = (0, core_1.dataGridObserver)(function (_a) {
     var filter = _a.filter, type = _a.type, onChange = _a.onChange, onInputChange = _a.onInputChange, style = _a.style, renderMoreTag = _a.renderMoreTag, renderOption = _a.renderOption, searchFunction = _a.searchFunction, other = tslib_1.__rest(_a, ["filter", "type", "onChange", "onInputChange", "style", "renderMoreTag", "renderOption", "searchFunction"]);
     var value = filter.valueByType(type);
-    return (react_1.default.createElement(AutocompleteNext_1.Autocomplete, tslib_1.__assign({ disableCloseOnSelect: filter.isMultiple, limitTags: "responsive", label: filter.name }, other, { size: type === 'allFilter' ? 's' : 'xs', options: filter.options, getOptionKey: function (option) { return option.value; }, getOptionLabel: function (option) { return option.label; }, getOptionDisabled: function () { return false; }, multiple: filter.isMultiple, renderMoreTag: renderMoreTag
-            ? function (props, ref) {
-                return renderMoreTag(props, ref);
-            }
-            : undefined, renderOption: renderOption
-            ? function (props) {
-                return renderOption(props);
-            }
-            : undefined, searchFunction: searchFunction
-            ? function (options, searchValue) {
-                return searchFunction(options, searchValue);
-            }
-            : undefined, value: (0, utilts_1.filterValueToAutocomplete)(filter, value), style: tslib_1.__assign(tslib_1.__assign({}, style), { minWidth: 200 }), onInputChange: function (event, _value) {
+    return (react_1.default.createElement(AutocompleteNext_1.Autocomplete, tslib_1.__assign({ disableCloseOnSelect: filter.isMultiple, limitTags: "responsive", label: filter.name }, other, { size: type === 'allFilter' ? 's' : 'xs', options: filter.options, getOptionKey: function (option) { return option.value; }, getOptionLabel: function (option) { return option.label; }, getOptionDisabled: function () { return false; }, multiple: filter.isMultiple, renderMoreTag: renderMoreTag, renderOption: renderOption, searchFunction: searchFunction, value: (0, utilts_1.filterValueToAutocomplete)(filter, value), style: tslib_1.__assign(tslib_1.__assign({}, style), { minWidth: 200 }), onInputChange: function (event, _value) {
             var value = _value !== null && _value !== void 0 ? _value : '';
             onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, value);
         }, onChange: function (event, _value) {

package/__inner__/esm/core/column/store/DataGridStoreColumn.js

@@ -1,9 +1,10 @@
 import { isFunction, isNumber } from '@ozen-ui/kit/utils';
 import { autorun, makeAutoObservable, reaction, runInAction } from 'mobx';
 import { EventBus } from '../../../shared';
+import { createDataGridStoreColumnName } from './utils';
 var DataGridStoreColumn = /** @class */ (function () {
     function DataGridStoreColumn(column, context, root) {
-        var _a;
+        var _a, _b;
         this.width = 'responsive';
         this.eventBus = new EventBus();
         this.rawIsVisible = true;
@@ -11,14 +12,14 @@ var DataGridStoreColumn = /** @class */ (function () {
         this.root = root !== null && root !== void 0 ? root : null;
         this.id = column.id;
         this.cell = column.cell;
-        this.header = column.header;
+        this.name = createDataGridStoreColumnName(column, this);
+        this.header = (_a = column.header) !== null && _a !== void 0 ? _a : this.name;
         this.accessor = column.accessor;
         this.footer = column.footer;
-        this.name = column.name;
         this.align = column.align;
         this.sortSettings = column.sortSettings;
         this.sort = null;
-        var width = (_a = column.width) !== null && _a !== void 0 ? _a : context.columnsInfo.width;
+        var width = (_b = column.width) !== null && _b !== void 0 ? _b : context.columnsInfo.width;
         this.rawWidth = (function () {
             if (isFunction(width)) {
                 return width;

package/__inner__/esm/core/column/store/utils.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { isFunction } from '@ozen-ui/kit/utils';
+export var createDataGridStoreColumnName = function (column, storeColumn) {
+    var Component = function () {
+        if (isFunction(column.name)) {
+            var Component_1 = column.name;
+            return React.createElement(Component_1, { column: storeColumn });
+        }
+        return column.name;
+    };
+    return Component;
+};

package/__inner__/esm/core/column/table/DataGridColumn.js

@@ -1,14 +1,14 @@
-import { __assign } from "tslib";
 import { isArray } from '@ozen-ui/kit/utils';
 import { dataGridColumnSortType } from '../entities';
+import { createDataGridColumnDefaultRender } from './utils';
 var DataGridColumn = /** @class */ (function () {
     function DataGridColumn(_a) {
         var id = _a.id, cell = _a.cell, header = _a.header, accessor = _a.accessor, footer = _a.footer, name = _a.name, align = _a.align, sorting = _a.sorting, width = _a.width;
         this.root = null;
-        this.context = null;
         this.rawId = id;
-        this.header = header !== null && header !== void 0 ? header : name;
-        this.cell = cell !== null && cell !== void 0 ? cell : (function (data) { return String(data); });
+        this.header = header;
+        this.cell =
+            cell !== null && cell !== void 0 ? cell : createDataGridColumnDefaultRender();
         this.footer = footer;
         this.accessor = accessor;
         this.name = name;
@@ -27,9 +27,6 @@ var DataGridColumn = /** @class */ (function () {
             available: availableSorting,
         };
     }
-    DataGridColumn.prototype.setContext = function (context) {
-        this.context = context;
-    };
     Object.defineProperty(DataGridColumn.prototype, "id", {
         get: function () {
             if (this.root) {
@@ -43,24 +40,6 @@ var DataGridColumn = /** @class */ (function () {
     DataGridColumn.prototype.setRoot = function (root) {
         this.root = root;
     };
-    DataGridColumn.prototype.createDateFilter = function (params) {
-        return this.context.createDateFilter(__assign(__assign({}, params), { column: this }));
-    };
-    DataGridColumn.prototype.createSelectFilter = function (params) {
-        return this.context.createSelectFilter(__assign(__assign({}, params), { column: this }));
-    };
-    DataGridColumn.prototype.createNumberFilter = function (params) {
-        return this.context.createNumberFilter(__assign(__assign({}, params), { column: this }));
-    };
-    DataGridColumn.prototype.createStringFilter = function (params) {
-        return this.context.createStringFilter(__assign(__assign({}, params), { column: this }));
-    };
-    DataGridColumn.prototype.createAutocompleteFilter = function (params) {
-        return this.context.createAutocompleteFilter(__assign(__assign({}, params), { column: this }));
-    };
-    DataGridColumn.prototype.createAutocompleteListCardFilter = function (params) {
-        return this.context.createAutocompleteListCardFilter(__assign(__assign({}, params), { column: this }));
-    };
     Object.defineProperty(DataGridColumn.prototype, "depth", {
         get: function () {
             if (this.root) {

package/__inner__/esm/core/column/table/utils.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DataGridCellItem } from '../../../ui/cells/DataGridCellItem';
+export var createDataGridColumnDefaultRender = function () {
+    var Component = function (_a) {
+        var data = _a.data, column = _a.column;
+        return (React.createElement(DataGridCellItem, { align: column.align }, String(data)));
+    };
+    return Component;
+};

package/__inner__/esm/core/filter/store/base/DataGridStoreFilter.js

@@ -8,17 +8,14 @@ var DataGridStoreFilter = /** @class */ (function () {
         this.id = filter.id;
         this.rawName = filter.name;
         this.group = filter.group;
-        this.column = null;
         makeObservable(this, {
             id: observable,
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-expect-error
             rawName: observable,
-            column: observable,
             group: observable,
             context: observable,
             setGroup: action,
-            setColumn: action,
             setValue: action,
             setLocalValue: action,
             setAllFilterValue: action,
@@ -102,9 +99,6 @@ var DataGridStoreFilter = /** @class */ (function () {
     DataGridStoreFilter.prototype.setGroup = function (group) {
         this.group = group;
     };
-    DataGridStoreFilter.prototype.setColumn = function (column) {
-        this.column = column;
-    };
     Object.defineProperty(DataGridStoreFilter.prototype, "isEditedLocal", {
         get: function () {
             return !this.isEqualValues(this.localValue, this.value);
@@ -145,9 +139,6 @@ var DataGridStoreFilter = /** @class */ (function () {
             if (this.rawName) {
                 return this.rawName;
             }
-            if (this.column) {
-                return this.column.name;
-            }
             return this.id;
         },
         enumerable: false,

package/__inner__/esm/core/filter/table/base/DataGridTableFilter.js

@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 var DataGridTableFilter = /** @class */ (function () {
     function DataGridTableFilter(_a) {
-        var id = _a.id, column = _a.column, name = _a.name, group = _a.group, render = _a.render;
-        this.column = column !== null && column !== void 0 ? column : null;
-        this.id = "filter_".concat(this.column ? "".concat(this.column.id, ".") : '').concat(id);
+        var id = _a.id, name = _a.name, group = _a.group, render = _a.render;
+        this.id = "filter_".concat(id);
         this.name = name !== null && name !== void 0 ? name : null;
         this.group = group !== null && group !== void 0 ? group : 'main';
         this.render = render !== null && render !== void 0 ? render : null;

package/__inner__/esm/core/store/DataGridStore.js

@@ -60,14 +60,6 @@ var DataGridStore = /** @class */ (function () {
                 return;
             }
             _this.filters.addFilter(createdFilter);
-            if (!filter.column) {
-                return;
-            }
-            var storeColumn = _this.findColumn(filter.column);
-            if (!storeColumn) {
-                return;
-            }
-            createdFilter.setColumn(storeColumn);
         });
         this.setData(data);
         this.recalculate();

package/__inner__/esm/core/sub-row/entities/index.js

@@ -1,2 +1,3 @@
 export * from './position';
+export * from './render';
 export * from './settings';

package/__inner__/esm/core/sub-row/entities/render.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/core/table/DataGridTable.js

@@ -55,7 +55,6 @@ var DataGridTable = /** @class */ (function () {
     };
     DataGridTable.prototype.addColumn = function (column) {
         this.nodes.push(column);
-        column.setContext(this);
         return column;
     };
     DataGridTable.prototype.createGroup = function (groupParams) {

package/__inner__/esm/ui/DataGrid/components/DataGridHeadFoot/DataGridHeadFoot.js

@@ -35,7 +35,13 @@ export var DataGridHeadFoot = dataGridObserver(function (_a) {
             isSubRowEnabled && store.subRows.isLeft && (React.createElement(DataGridHeadFootExpand, null)),
             nodes.map(function (node) {
                 var render = isFoot ? node.footer : node.header;
-                var rendered = isFunction(render) ? render() : render;
+                var rendered = (function () {
+                    if (isFunction(render)) {
+                        var Component = render;
+                        return React.createElement(Component, null);
+                    }
+                    return render;
+                })();
                 var isGroup = node instanceof DataGridStoreColumnsGroup;
                 return (React.createElement(Fragment, { key: node.id },
                     isGroup &&

package/__inner__/esm/ui/DataGrid/components/DataGridPagination/DataGridPagination.js

@@ -20,10 +20,20 @@ var UnwrappedDataGridPagination = forwardRef(function (_a, ref) {
     if (!pagination.isEnabled) {
         return null;
     }
-    var renderedBeforeText = isFunction(beforeText) ? beforeText() : beforeText;
-    var renderedAfterText = isFunction(afterText)
-        ? afterText(pagination.total)
-        : afterText;
+    var renderedBeforeText = (function () {
+        if (isFunction(beforeText)) {
+            var Component = beforeText;
+            return React.createElement(Component, null);
+        }
+        return beforeText;
+    })();
+    var renderedAfterText = (function () {
+        if (isFunction(afterText)) {
+            var Component = afterText;
+            return React.createElement(Component, { total: pagination.total });
+        }
+        return afterText;
+    })();
     return (React.createElement(Stack, { ref: ref, className: cnDataGridPagination('', [className]), justify: "spaceBetween", align: "center", fullWidth: true },
         React.createElement(Pagination, { totalCount: pagination.total, page: pagination.index, pageSize: pagination.pageSize, size: "s", onPageChange: function (page) { return pagination.setIndex(page); }, disabled: store.isLoading }),
         pagination.isAvailableSizeEnabled && (React.createElement(Stack, { gap: "s", align: "center" },