@ozen-ui/data-grid 0.77.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" },

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

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

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

@@ -23,7 +23,7 @@ export var DataGridSubRow = 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.createElement(IconButton, { icon: subRow.getIsExpanded(id) ? ChevronUpIcon : ChevronDownIcon, size: "s", onClick: function () {
             subRow.toggle(id);
         }, compressed: true }));
@@ -43,7 +43,7 @@ export var DataGridSubRow = dataGridObserver(function (_a) {
                         canExpand &&
                         store.subRows.isLeft &&
                         expandButton,
-                    rendered,
+                    React.createElement(Component, { subRow: subRow, index: index, item: row }),
                     isSomeRowsVisible &&
                         canExpand &&
                         store.subRows.isRight &&

package/__inner__/esm/ui/DataGridAllFiltersDrawer/DataGridAllFiltersDrawer.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
 import { Drawer, DrawerBody, DrawerHeader, DrawerSubtitle, DrawerTitle, } from "@ozen-ui/kit/DrawerNext";
 import { Stack } from "@ozen-ui/kit/Stack";
 import { useEventListener } from "@ozen-ui/kit/useEventListener";
@@ -6,8 +7,8 @@ import { isKey } from '@ozen-ui/kit/utils';
 import { dataGridObserver, useDataGridStore } from '../../core';
 import { DataGridFilter } from '../filters';
 import { DataGridAllFiltersDrawerFooter } from './components';
-export var DataGridAllFiltersDrawer = dataGridObserver(function (_a) {
-    var title = _a.title, subTitle = _a.subTitle, applyButton = _a.applyButton, closeButton = _a.closeButton;
+var NonWrappedDataGridAllFiltersDrawer = forwardRef(function (_a, ref) {
+    var title = _a.title, subTitle = _a.subTitle, applyButton = _a.applyButton, closeButton = _a.closeButton, onClose = _a.onClose, other = __rest(_a, ["title", "subTitle", "applyButton", "closeButton", "onClose"]);
     var store = useDataGridStore();
     var isOpen = store.modals.isOpen('filters');
     var filters = store.filters;
@@ -21,7 +22,10 @@ export var DataGridAllFiltersDrawer = dataGridObserver(function (_a) {
             store.modals.closeFilters();
         },
     });
-    return (React.createElement(Drawer, { open: isOpen, onClose: function () { return store.modals.closeFilters(); } },
+    return (React.createElement(Drawer, __assign({}, other, { ref: ref, open: isOpen, onClose: function () {
+            store.modals.closeFilters();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        } }),
         React.createElement(DrawerHeader, null,
             React.createElement(DrawerTitle, null, title),
             subTitle && React.createElement(DrawerSubtitle, null, subTitle)),
@@ -29,3 +33,5 @@ export var DataGridAllFiltersDrawer = dataGridObserver(function (_a) {
             React.createElement(Stack, { direction: "column", gap: "s", fullWidth: true }, filters.filters.map(function (filter) { return (React.createElement(DataGridFilter, { key: filter.id, filter: filter, type: "allFilter" })); }))),
         React.createElement(DataGridAllFiltersDrawerFooter, { applyButton: applyButton, closeButton: closeButton })));
 });
+NonWrappedDataGridAllFiltersDrawer.displayName = 'DataGridAllFiltersDrawer';
+export var DataGridAllFiltersDrawer = dataGridObserver(NonWrappedDataGridAllFiltersDrawer);

package/__inner__/esm/ui/DataGridSettingsDrawer/DataGridSettingsDrawer.js

@@ -1,11 +1,11 @@
-import { __assign, __read } from "tslib";
-import React, { useMemo, useState } from 'react';
+import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, useMemo, useState } from 'react';
 import { Checkbox } from "@ozen-ui/kit/CheckboxNext";
 import { Drawer, DrawerBody, DrawerFooter, DrawerFooterButton, DrawerFooterButtonsGroup, DrawerHeader, DrawerSubtitle, DrawerTitle, } from "@ozen-ui/kit/DrawerNext";
 import { FormGroup } from "@ozen-ui/kit/FormGroup";
 import { dataGridObserver, useDataGridStore } from '../../core';
-export var DataGridSettingsDrawer = dataGridObserver(function (_a) {
-    var title = _a.title, subTitle = _a.subTitle, closeButton = _a.closeButton, applyButton = _a.applyButton;
+var NonWrappedDataGridSettingsDrawer = forwardRef(function (_a, ref) {
+    var title = _a.title, subTitle = _a.subTitle, closeButton = _a.closeButton, applyButton = _a.applyButton, onClose = _a.onClose, other = __rest(_a, ["title", "subTitle", "closeButton", "applyButton", "onClose"]);
     var store = useDataGridStore();
     var isOpen = store.modals.isOpen('columns-settings');
     var columns = store.allColumns;
@@ -34,14 +34,18 @@ export var DataGridSettingsDrawer = dataGridObserver(function (_a) {
             setLocalVisible({});
         }
     }, [isOpen]);
-    return (React.createElement(Drawer, { open: isOpen, onClose: function () { return store.modals.closeColumnsSettings(); } },
+    return (React.createElement(Drawer, __assign({}, other, { ref: ref, open: isOpen, onClose: function () {
+            store.modals.closeColumnsSettings();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        } }),
         React.createElement(DrawerHeader, null,
             React.createElement(DrawerTitle, null, title),
             subTitle && React.createElement(DrawerSubtitle, null, subTitle)),
         React.createElement(DrawerBody, null,
             React.createElement(FormGroup, { size: "l", direction: "column" }, columns.map(function (column) {
                 var checked = checkIsSelected(column);
-                return (React.createElement(Checkbox, { key: column.id, label: column.name, checked: checked, disabled: isLeftAlone && checked, size: "l", onChange: function (event) {
+                var NameComponent = column.name;
+                return (React.createElement(Checkbox, { key: column.id, label: React.createElement(NameComponent, null), checked: checked, disabled: isLeftAlone && checked, size: "l", onChange: function (event) {
                         setLocalVisible(function (previousVisible) {
                             var _a;
                             return (__assign(__assign({}, previousVisible), (_a = {}, _a[column.id] = event.target.checked, _a)));
@@ -58,3 +62,5 @@ export var DataGridSettingsDrawer = dataGridObserver(function (_a) {
                         store.modals.closeColumnsSettings();
                     } }, applyButton)))));
 });
+NonWrappedDataGridSettingsDrawer.displayName = 'DataGridSettingsDrawer';
+export var DataGridSettingsDrawer = dataGridObserver(NonWrappedDataGridSettingsDrawer);

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

@@ -6,19 +6,7 @@ import { filterValueToAutocomplete, autocompleteValueToFilter } from './utilts';
 export var DataGridAutocompleteFilter = 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 = __rest(_a, ["filter", "type", "onChange", "onInputChange", "style", "renderMoreTag", "renderOption", "searchFunction"]);
     var value = filter.valueByType(type);
-    return (React.createElement(Autocomplete, __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: filterValueToAutocomplete(filter, value), style: __assign(__assign({}, style), { minWidth: 200 }), onInputChange: function (event, _value) {
+    return (React.createElement(Autocomplete, __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: filterValueToAutocomplete(filter, value), style: __assign(__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__/types/core/column/store/DataGridStoreColumn.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import { EventBus } from '../../../shared';
 import type { DataGridStoreColumnsGroup } from '../../columns-group';
 import type { DataGridItem, DataGridColumnCell, DataGridColumnHeader, DataGridColumnAccessor, DataGridColumnFooter } from '../../entities';
@@ -8,7 +9,7 @@ import type { DataGridStoreColumnEvents, DataGridStoreColumnWidth } from './type
 export declare class DataGridStoreColumn<Item extends DataGridItem, AccessorReturn = unknown> {
     id: string;
     cell: DataGridColumnCell<Item, AccessorReturn>;
-    name: string;
+    name: () => ReactNode;
     header: DataGridColumnHeader;
     align: DataGridColumnAlign;
     accessor: DataGridColumnAccessor<Item, AccessorReturn>;

package/__inner__/types/core/column/store/utils.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { DataGridItem } from '../../entities';
+import type { DataGridColumn } from '../table';
+import type { DataGridStoreColumn } from './DataGridStoreColumn';
+export declare const createDataGridStoreColumnName: <Item extends DataGridItem, AccessorReturn = unknown>(column: DataGridColumn<Item, AccessorReturn>, storeColumn: DataGridStoreColumn<Item, AccessorReturn>) => () => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;

package/__inner__/types/core/column/table/DataGridColumn.d.ts

@@ -1,30 +1,20 @@
 import type { DataGridColumnsGroup } from '../../columns-group';
 import type { DataGridColumnAccessor, DataGridColumnCell, DataGridColumnFooter, DataGridColumnHeader, DataGridItem } from '../../entities';
-import type { DataGridFilterOption, DataGridAutocompleteTableFilterParams, DataGridAutocompleteListCardTableFilterParams, DataGridDateTableFilterParams, DataGridNumberTableFilterParams, DataGridStringTableFilterParams, DataGridSelectTableFilterParams } from '../../filter';
-import type { DataGridTable } from '../../table';
 import type { DataGridColumnAlign, DataGridColumnSortSettings, DataGridColumnWidth, DataGridGetColumnWidth } from '../entities';
-import type { DataGridColumnParams } from './types';
+import type { DataGridColumnName, DataGridColumnParams } from './types';
 export declare class DataGridColumn<Item extends DataGridItem, AccessorReturn = unknown> {
     rawId: string;
     header: DataGridColumnHeader;
-    name: string;
+    name: DataGridColumnName<Item, AccessorReturn>;
     cell: DataGridColumnCell<Item, AccessorReturn>;
     align: DataGridColumnAlign;
     footer: DataGridColumnFooter | undefined;
     accessor: DataGridColumnAccessor<Item, AccessorReturn>;
     root: DataGridColumnsGroup<Item> | null;
-    private context;
     sortSettings: DataGridColumnSortSettings;
     width: DataGridColumnWidth | DataGridGetColumnWidth<Item, AccessorReturn> | null;
     constructor({ id, cell, header, accessor, footer, name, align, sorting, width, }: DataGridColumnParams<Item, AccessorReturn>);
-    setContext(context: DataGridTable<Item>): void;
     get id(): string;
     setRoot(root: DataGridColumnsGroup<Item>): void;
-    createDateFilter(params: DataGridDateTableFilterParams<Item>): import("../../filter").DataGridDateTableFilter<Item>;
-    createSelectFilter<Option extends DataGridFilterOption>(params: DataGridSelectTableFilterParams<Item, Option>): import("../../filter").DataGridSelectTableFilter<Item, Option>;
-    createNumberFilter(params: DataGridNumberTableFilterParams<Item>): import("../../filter").DataGridNumberTableFilter<Item>;
-    createStringFilter(params: DataGridStringTableFilterParams<Item>): import("../../filter").DataGridStringTableFilter<Item>;
-    createAutocompleteFilter<Option extends DataGridFilterOption>(params: DataGridAutocompleteTableFilterParams<Item, Option>): import("../../filter").DataGridAutocompleteTableFilter<Item, Option>;
-    createAutocompleteListCardFilter<Option extends DataGridFilterOption>(params: DataGridAutocompleteListCardTableFilterParams<Item, Option>): import("../../filter").DataGridAutocompleteListCardTableFilter<Item, Option>;
     get depth(): number;
 }

package/__inner__/types/core/column/table/types.d.ts

@@ -1,9 +1,15 @@
+import type { ReactNode } from 'react';
 import type { DataGridColumnAccessor, DataGridColumnCell, DataGridColumnFooter, DataGridColumnHeader, DataGridItem } from '../../entities';
 import type { DataGridColumnAlign, DataGridColumnWidth, DataGridGetColumnWidth } from '../entities';
+import type { DataGridStoreColumn } from '../store';
+export type DataGridColumnNameRender<Item extends DataGridItem, AccessorReturn> = (params: {
+    column: DataGridStoreColumn<Item, AccessorReturn>;
+}) => ReactNode;
+export type DataGridColumnName<Item extends DataGridItem, AccessorReturn> = ReactNode | DataGridColumnNameRender<Item, AccessorReturn>;
 export type DataGridColumnParams<Item extends DataGridItem, AccessorReturn> = {
     id: string;
     accessor: DataGridColumnAccessor<Item, AccessorReturn>;
-    name: string;
+    name: DataGridColumnName<Item, AccessorReturn>;
     header?: DataGridColumnHeader;
     cell?: DataGridColumnCell<Item, AccessorReturn>;
     footer?: DataGridColumnFooter;

package/__inner__/types/core/column/table/utils.d.ts

@@ -0,0 +1,2 @@
+import type { DataGridItem } from '../../entities';
+export declare const createDataGridColumnDefaultRender: <Item extends DataGridItem, AccessorReturn = unknown>() => import("../../entities").DataGridColumnCellRender<Item, AccessorReturn>;

package/__inner__/types/core/entities/cell.d.ts

@@ -1,5 +1,11 @@
 import type { ReactNode } from 'react';
+import type { DataGridStoreColumn } from '../column';
 import type { DataGridItem } from './data';
-export type DataGridColumnCellRender<Item extends DataGridItem, AccessorReturn> = (data: AccessorReturn, item: Item, index: number) => ReactNode;
+export type DataGridColumnCellRender<Item extends DataGridItem, AccessorReturn> = (params: {
+    data: AccessorReturn;
+    item: Item;
+    index: number;
+    column: DataGridStoreColumn<Item, AccessorReturn>;
+}) => ReactNode;
 export type DataGridColumnCellNode = ReactNode;
 export type DataGridColumnCell<Item extends DataGridItem, AccessorReturn> = DataGridColumnCellNode | DataGridColumnCellRender<Item, AccessorReturn>;

package/__inner__/types/core/filter/store/base/DataGridStoreFilter.d.ts

@@ -1,5 +1,4 @@
 import { EventBus } from '../../../../shared';
-import type { DataGridStoreColumn } from '../../../column';
 import type { DataGridItem } from '../../../entities';
 import type { DataGridStore } from '../../../store';
 import type { DataGridFilterGroup } from '../../entities';
@@ -9,7 +8,6 @@ export declare abstract class DataGridStoreFilter<Item extends DataGridItem, Val
     id: string;
     protected rawName: string | null;
     protected context: DataGridStore<Item>;
-    column: DataGridStoreColumn<Item> | null;
     group: DataGridFilterGroup;
     abstract value: Value;
     abstract localValue: Value;
@@ -31,7 +29,6 @@ export declare abstract class DataGridStoreFilter<Item extends DataGridItem, Val
     setValueByType(value: Value, type: DataGridStoreFilterValueType): void;
     valueByType(type: DataGridStoreFilterValueType): Value;
     setGroup(group: DataGridFilterGroup): void;
-    setColumn(column: DataGridStoreColumn<Item>): void;
     get isEditedLocal(): boolean;
     get isEditedAllFilter(): boolean;
     abstract isEqualValues(value1: Value, value2: Value): boolean;

package/__inner__/types/core/filter/table/base/DataGridTableFilter.d.ts

@@ -1,12 +1,10 @@
-import type { DataGridColumn } from '../../../column';
 import type { DataGridItem } from '../../../entities';
 import type { DataGridFilterGroup } from '../../entities';
 import type { DataGridTableFilterParams, DataGridTableFilterRender } from './types';
 export declare abstract class DataGridTableFilter<Item extends DataGridItem, Render extends DataGridTableFilterRender<Item, any> = DataGridTableFilterRender<Item, any>> {
     id: string;
     name: string | null;
-    readonly column: DataGridColumn<Item> | null;
     group: DataGridFilterGroup;
     render: Render | null;
-    constructor({ id, column, name, group, render, }: DataGridTableFilterParams<Item, Render>);
+    constructor({ id, name, group, render, }: DataGridTableFilterParams<Item, Render>);
 }

package/__inner__/types/core/filter/table/base/types.d.ts

@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react';
-import type { DataGridColumn } from '../../../column';
 import type { DataGridItem } from '../../../entities';
 import type { DataGridStore } from '../../../store';
 import type { DataGridFilterGroup } from '../../entities';
@@ -13,6 +12,5 @@ export type DataGridTableFilterParams<Item extends DataGridItem, Render extends
     id: string;
     group?: DataGridFilterGroup;
     name?: string;
-    column?: DataGridColumn<Item>;
     render?: Render;
 };

package/__inner__/types/core/sub-row/entities/index.d.ts

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

package/__inner__/types/core/sub-row/entities/render.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { DataGridItem } from '../../entities';
+import type { DataGridStoreSubRow } from '../store/sub-row';
+export type DataGridSubRowRender<Item extends DataGridItem> = (params: {
+    item: Item;
+    index: number;
+    subRow: DataGridStoreSubRow<Item>;
+}) => ReactNode;

package/__inner__/types/core/sub-row/store/sub-row/DataGridStoreSubRow.d.ts

@@ -1,7 +1,7 @@
-import type { ReactNode } from 'react';
 import { EventBus } from '../../../../shared';
 import type { DataGridItem } from '../../../entities';
 import type { DataGridStore } from '../../../store';
+import type { DataGridSubRowRender } from '../../entities';
 import type { DataGridSubRow } from '../../table';
 import type { DataGridStoreSubRowEvents } from './types';
 export declare class DataGridStoreSubRow<Item extends DataGridItem> {
@@ -9,7 +9,7 @@ export declare class DataGridStoreSubRow<Item extends DataGridItem> {
     root: DataGridStoreSubRow<Item> | null;
     rows: DataGridStoreSubRow<Item>[];
     expandedByRowId: Record<string, boolean>;
-    render: (item: Item, index: number) => ReactNode;
+    render: DataGridSubRowRender<Item>;
     context: DataGridStore<Item>;
     eventBus: EventBus<DataGridStoreSubRowEvents<Item>>;
     private readonly getIsVisible;

package/__inner__/types/core/sub-row/table/DataGridSubRow.d.ts

@@ -1,11 +1,11 @@
-import type { ReactNode } from 'react';
 import type { DataGridItem } from '../../entities';
+import type { DataGridSubRowRender } from '../entities';
 import type { DataGridSubRowParams } from './types';
 export declare class DataGridSubRow<Item extends DataGridItem> {
     rawId: string;
     root: DataGridSubRow<Item> | null;
     subRows: DataGridSubRow<Item>[];
-    render: (item: Item, index: number) => ReactNode;
+    render: DataGridSubRowRender<Item>;
     isVisible: (item: Item, index: number) => boolean;
     constructor({ id, render, isVisible }: DataGridSubRowParams<Item>);
     get id(): string;

package/__inner__/types/core/sub-row/table/types.d.ts

@@ -1,7 +1,7 @@
-import type { ReactNode } from 'react';
 import type { DataGridItem } from '../../entities';
+import type { DataGridSubRowRender } from '../entities';
 export type DataGridSubRowParams<Item extends DataGridItem> = {
     id: string;
-    render: (item: Item, index: number) => ReactNode;
+    render: DataGridSubRowRender<Item>;
     isVisible?: (item: Item, index: number) => boolean;
 };

package/__inner__/types/ui/DataGrid/components/DataGridPagination/entities/afterText.d.ts

@@ -1,2 +1,4 @@
 import type { ReactNode } from 'react';
-export type DataGridPaginationAfterText = ReactNode | ((total: number) => ReactNode);
+export type DataGridPaginationAfterText = ReactNode | ((params: {
+    total: number;
+}) => ReactNode);

package/__inner__/types/ui/DataGridAllFiltersDrawer/DataGridAllFiltersDrawer.d.ts

@@ -1,5 +1,17 @@
 import React from 'react';
-import type { DataGridAllFiltersDrawerProps } from './types';
-export declare const DataGridAllFiltersDrawer: (({ title, subTitle, applyButton, closeButton, }: DataGridAllFiltersDrawerProps) => React.JSX.Element) & {
-    displayName: string;
-};
+export declare const DataGridAllFiltersDrawer: React.MemoExoticComponent<React.ForwardRefExoticComponent<(Omit<{
+    title: string;
+    subTitle?: string;
+    closeButton: string;
+    applyButton: string;
+} & Omit<import("@ozen-ui/kit/DrawerNext").DrawerDeviceTypeProps<"mobile">, "children" | "open"> & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<{
+    title: string;
+    subTitle?: string;
+    closeButton: string;
+    applyButton: string;
+} & Omit<import("@ozen-ui/kit/DrawerNext").DrawerDeviceTypeProps<"desktop">, "children" | "open"> & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<{
+    title: string;
+    subTitle?: string;
+    closeButton: string;
+    applyButton: string;
+} & Omit<import("@ozen-ui/kit/DrawerNext").DrawerDeviceTypeProps<undefined>, "children" | "open"> & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>>>;

package/__inner__/types/ui/DataGridAllFiltersDrawer/types.d.ts

@@ -1,6 +1,8 @@
+import type { DrawerRef, DrawerOmittedProps } from "@ozen-ui/kit/DrawerNext";
+export type DataGridAllFiltersDrawerRef = DrawerRef;
 export type DataGridAllFiltersDrawerProps = {
     title: string;
     subTitle?: string;
     closeButton: string;
     applyButton: string;
-};
+} & DrawerOmittedProps<'children' | 'open'>;

package/__inner__/types/ui/DataGridSettingsDrawer/DataGridSettingsDrawer.d.ts

@@ -1,5 +1,23 @@
 import React from 'react';
-import type { DataGridSettingsDrawerProps } from './types';
-export declare const DataGridSettingsDrawer: (({ title, subTitle, closeButton, applyButton, }: DataGridSettingsDrawerProps) => React.JSX.Element) & {
-    displayName: string;
-};
+export declare const DataGridSettingsDrawer: React.MemoExoticComponent<React.ForwardRefExoticComponent<(Omit<{
+    title: string;
+    subTitle?: string;
+    closeButton: string;
+    applyButton: string;
+    open?: never;
+    children?: never;
+} & Omit<import("@ozen-ui/kit/DrawerNext").DrawerDeviceTypeProps<"mobile">, "children" | "open"> & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<{
+    title: string;
+    subTitle?: string;
+    closeButton: string;
+    applyButton: string;
+    open?: never;
+    children?: never;
+} & Omit<import("@ozen-ui/kit/DrawerNext").DrawerDeviceTypeProps<"desktop">, "children" | "open"> & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<{
+    title: string;
+    subTitle?: string;
+    closeButton: string;
+    applyButton: string;
+    open?: never;
+    children?: never;
+} & Omit<import("@ozen-ui/kit/DrawerNext").DrawerDeviceTypeProps<undefined>, "children" | "open"> & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>>>;

package/__inner__/types/ui/DataGridSettingsDrawer/types.d.ts

@@ -1,6 +1,10 @@
+import type { DrawerOmittedProps, DrawerRef } from "@ozen-ui/kit/DrawerNext";
+export type DataGridSettingsDrawerRef = DrawerRef;
 export type DataGridSettingsDrawerProps = {
     title: string;
     subTitle?: string;
     closeButton: string;
     applyButton: string;
-};
+    open?: never;
+    children?: never;
+} & DrawerOmittedProps<'children' | 'open'>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/data-grid",
-  "version": "0.77.0",
+  "version": "0.78.0",
   "description": "React DataGrid library",
   "files": [
     "*"
@@ -28,10 +28,10 @@
     "lodash.sortby": "^4.7.0",
     "mobx": "6.13.7",
     "mobx-react-lite": "4.1.0",
-    "@ozen-ui/fonts": "0.77.0",
-    "@ozen-ui/kit": "0.77.0",
-    "@ozen-ui/icons": "0.77.0",
-    "@ozen-ui/logger": "0.77.0"
+    "@ozen-ui/fonts": "0.78.0",
+    "@ozen-ui/icons": "0.78.0",
+    "@ozen-ui/logger": "0.78.0",
+    "@ozen-ui/kit": "0.78.0"
   },
   "devDependencies": {
     "@types/lodash.clonedeep": "^4.5.0",
@@ -40,9 +40,7 @@
     "@types/lodash.sortby": "^4.7.9",
     "@types/node": "^20.14.7",
     "@types/react-syntax-highlighter": "15.5.13",
-    "fs-extra": "^11.1.1",
-    "react-syntax-highlighter": "15.6.1",
-    "ts-patch": "3.3.0"
+    "fs-extra": "^11.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",