ar-design 0.4.61 → 0.4.62

package/dist/components/data-display/table/IProps.d.ts

@@ -82,6 +82,7 @@ interface IProps<T extends object> extends IChildren {
     actions?: Actions;
     rowBackgroundColor?: (item: T) => string;
     selections?: (selectionItems: T[]) => void;
+    selectionDisabled?: (item: T) => boolean;
     previousSelections?: T[];
     sortedParams?: (params: Sort<T>[], query: string) => void;
     searchedParams?: (params: SearchedParam | null, query: string, operator: FilterOperator) => void;

package/dist/components/data-display/table/body/Editable.js

@@ -1,11 +1,12 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import Input from "../../../form/input";
 import DatePicker from "../../../form/date-picker";
 import Select from "../../../form/select";
 import { ExtractKey } from "../Helpers";
 import Checkbox from "../../../form/checkbox";
 const Editable = function ({ c, item, trackByValue, onEditable, config }) {
+    // refs
     // variables
     const key = c.key;
     const itemValue = item[c.key];
@@ -17,15 +18,20 @@ const Editable = function ({ c, item, trackByValue, onEditable, config }) {
     const _vText = validation?.errors?.[`${c.key}_${trackByValue}`];
     // states
     const [_value, setValue] = useState(itemValue);
+    // methods
+    const handleChange = useCallback((value, set = true) => {
+        if (set)
+            setValue(value);
+        onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
+    }, [item]);
     // useEffects
-    useEffect(() => setValue(itemValue), [item]);
+    useEffect(() => setValue(itemValue), [itemValue]);
+    // return
     switch (c.editable?.(item)?.type) {
         case "string":
         case "number":
             return (React.createElement(Input, { variant: "borderless", value: String(_value ?? ""), onChange: (event) => {
-                    const { value } = event.target;
-                    setValue(value);
-                    onEditable({ ...item, [key]: c.editable?.(item)?.type === "number" ? Number(value) : value }, trackByValue, ExtractKey(c.key));
+                    handleChange(c.editable?.(item)?.type === "number" ? Number(event.target.value) : event.target.value);
                 }, validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         case "boolean":
             return (React.createElement(Checkbox, { variant: "borderless", color: "blue", checked: Boolean(_value), onChange: (event) => {
@@ -37,30 +43,15 @@ const Editable = function ({ c, item, trackByValue, onEditable, config }) {
                     }, trackByValue, ExtractKey(c.key));
                 }, validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         case "decimal":
-            return (React.createElement(Input.Decimal, { variant: "borderless", name: c.key, value: String(_value ?? ""), onChange: (event) => {
-                    const { value } = event.target;
-                    setValue(value);
-                    onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
-                }, validation: { text: _vText }, locale: config.locale, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
+            return (React.createElement(Input.Decimal, { variant: "borderless", name: c.key, value: String(_value ?? ""), onChange: (event) => handleChange(event.target.value), validation: { text: _vText }, locale: config.locale, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         case "input-formatted-decimal":
-            return (React.createElement(Input.FormattedDecimal, { variant: "borderless", name: c.key, value: String(_value ?? ""), onChange: (event) => {
-                    const { value } = event.target;
-                    setValue(value);
-                    onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
-                }, validation: { text: _vText }, locale: config.locale, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
+            return (React.createElement(Input.FormattedDecimal, { variant: "borderless", name: c.key, value: String(_value ?? ""), onChange: (event) => handleChange(event.target.value), validation: { text: _vText }, locale: config.locale, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         case "date-picker":
-            return (React.createElement(DatePicker, { variant: "borderless", value: String(_value ?? ""), onChange: (value) => {
-                    setValue(value);
-                    onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
-                }, validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
+            return (React.createElement(DatePicker, { variant: "borderless", value: String(_value ?? ""), onChange: (value) => handleChange(value), validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         case "single-select":
-            return (React.createElement(Select, { variant: "borderless", value: selectItem, options: c.editable?.(item).options, onClick: async () => await c.editable?.(item)?.method?.(), onChange: (option) => {
-                    onEditable({ ...item, [key]: option?.value }, trackByValue, ExtractKey(c.key));
-                }, validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
+            return (React.createElement(Select, { variant: "borderless", value: selectItem, options: c.editable?.(item).options, onClick: async () => await c.editable?.(item)?.method?.(), onChange: (option) => handleChange(option?.value, false), validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         case "multiple-select":
-            return (React.createElement(Select, { variant: "borderless", value: selectItems, options: c.editable?.(item).options, onClick: async () => await c.editable?.(item)?.method?.(), onChange: (options) => {
-                    onEditable({ ...item, [key]: options.map((option) => option.value) }, trackByValue, ExtractKey(c.key));
-                }, validation: { text: _vText }, multiple: true, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
+            return (React.createElement(Select, { variant: "borderless", value: selectItems, options: c.editable?.(item).options, onClick: async () => await c.editable?.(item)?.method?.(), onChange: (options) => handleChange(options.map((option) => option.value), false), validation: { text: _vText }, multiple: true, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         default:
             return null;
     }

package/dist/components/data-display/table/body/TBody.d.ts

@@ -25,12 +25,12 @@ interface IProps<T extends object> {
     methods: {
         trackBy?: (item: T) => string;
         selections?: (selectionItems: T[]) => void;
+        selectionDisabled?: (item: T) => boolean;
         onDnD?: (item: T[]) => void;
         onEditable?: (item: T, trackByValue: string, currentKey?: keyof T | null) => void;
         rowBackgroundColor?: (item: T) => string;
     };
     config: Config<T>;
 }
-declare function TBody<T extends object>({ data, columns, refs, methods, states, config }: IProps<T>): React.JSX.Element | React.JSX.Element[];
-declare const _default: typeof TBody;
+declare const _default: <T extends object>(props: IProps<T>) => React.JSX.Element;
 export default _default;

package/dist/components/data-display/table/body/TBody.js

@@ -1,11 +1,48 @@
+"use client";
 import React, { Fragment, memo, useEffect, useRef, useState } from "react";
 import { ARIcon } from "../../../icons";
 import Checkbox from "../../../form/checkbox";
 import Editable from "./Editable";
 import { useTranslation } from "../../../../libs/core/application/hooks";
+// SubitemList bağımsız bir bileşen.
+// Böylece her render döngüsünde hafızada sıfırdan yaratılıp alt DOM elementlerini çökertmiyor.
+const SubitemList = ({ items, columns, depth, level = 1, parentKey = "", config, methods, states, renderCell, }) => {
+    const _subrowSelector = config.subrow?.selector ?? "subitems";
+    const _subrowButton = config.subrow?.button ?? true;
+    if (config.subrow?.render) {
+        return (React.createElement("tr", { className: `subrow-item ${_subrowButton ? "type-b" : "type-a"}`, "data-level": level },
+            _subrowButton && React.createElement("td", { style: { ...config.subrow.render.styles, width: 0, minWidth: 0 } }),
+            React.createElement("td", { colSpan: columns.length || 1, style: { ...config.subrow.render.styles, padding: "7.5px 7.5px 7.5px 0" } }, config.subrow?.render.element(items) ?? React.createElement(React.Fragment, null))));
+    }
+    return (React.createElement(React.Fragment, null, items.map((subitem, subindex) => {
+        const id = methods.trackBy?.(subitem) ?? `sub-${subindex}`;
+        const key = `${parentKey}.${id}`;
+        const _subitem = subitem[_subrowSelector];
+        const isHasSubitems = _subrowSelector in subitem;
+        return (React.createElement(Fragment, { key: `subitem-wrapper-${key}` },
+            React.createElement("tr", { className: `subrow-item ${_subrowButton ? "type-b" : "type-a"}`, "data-level": level },
+                isHasSubitems && _subrowButton ? (React.createElement("td", { className: "subrow-col sticky sticky-left", "data-sticky-position": "left" },
+                    React.createElement("div", { className: "subitem-open-button-wrapper" },
+                        React.createElement("span", { className: `${(states.showSubitems.get[key] && "opened") ?? ""} ${!_subitem && "passive"}`, onClick: () => {
+                                if (!_subitem)
+                                    return;
+                                states.showSubitems.set((prev) => ({ ...prev, [key]: !prev[key] }));
+                            } })))) : !isHasSubitems && _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
+                columns.map((column, cIndex) => renderCell({
+                    item: subitem,
+                    column,
+                    index: subindex,
+                    cIndex,
+                    depth: depth * (config.isTreeView ? 2.25 : 1.75),
+                    level,
+                    height: 0,
+                    isSubrows: true,
+                }))),
+            states.showSubitems.get[key] && _subitem && (React.createElement(SubitemList, { items: _subitem, columns: columns, depth: depth + 0.75, level: level + 1, parentKey: key, config: config, methods: methods, states: states, renderCell: renderCell }))));
+    })));
+};
 function TBody({ data, columns, refs, methods, states, config }) {
     // refs
-    const _hasMeasured = useRef(false);
     const _tBodyTR = useRef([]);
     const _tHeadTH = useRef([]);
     // states
@@ -17,63 +54,12 @@ function TBody({ data, columns, refs, methods, states, config }) {
     // hooks
     const { t } = useTranslation(String(config.locale ?? "tr"));
     // methods
-    const renderRow = (item, index, deph, parentKey = "") => {
-        const id = methods.trackBy?.(item) ?? index.toString();
-        const key = parentKey ? `${parentKey}.${id}` : id;
-        const _subitem = item[_subrowSelector];
-        const isHasSubitems = _subrowSelector in item;
-        return (React.createElement(Fragment, { key: `row-${index}` },
-            React.createElement("tr", { ref: (element) => {
-                    _tBodyTR.current[index] = element;
-                }, ...(methods.rowBackgroundColor ? { style: { backgroundColor: methods.rowBackgroundColor(item) } } : {}), ...(methods.onDnD && data.length > 1 ? { className: "draggable", draggable: true } : {}) },
-                methods.selections && (React.createElement("td", { ref: (element) => {
-                        _tHeadTH.current[index] = element;
-                    }, className: "flex justify-content-center sticky sticky-left", "data-sticky-position": "left" },
-                    React.createElement(Checkbox, { key: Date.now(), ref: (element) => {
-                            if (!element)
-                                return;
-                            refs._checkboxItems.current[index] = element;
-                        }, variant: "filled", color: "green", checked: refs._selectionItems.current.some((selectionItem) => methods.trackBy?.(selectionItem) === methods.trackBy?.(item)), onChange: (event) => {
-                            const key = methods.trackBy?.(item);
-                            if (event.target.checked) {
-                                if (!refs._selectionItems.current.some((_item) => methods.trackBy?.(_item) === key)) {
-                                    refs._selectionItems.current = [...refs._selectionItems.current, item];
-                                }
-                            }
-                            else {
-                                refs._selectionItems.current = refs._selectionItems.current.filter((_item) => methods.trackBy?.(_item) !== key);
-                            }
-                            methods.selections?.(refs._selectionItems.current);
-                            setTriggerForRender((prev) => !prev);
-                        } }))),
-                isHasSubitems && _subrowButton ? (React.createElement("td", { className: "subrow-col sticky sticky-left", "data-sticky-position": "left" },
-                    React.createElement("div", { className: "subitem-open-button-wrapper" },
-                        React.createElement("span", { className: `subitem-open-button ${(states.showSubitems.get[key] && "opened") ?? ""} ${!_subitem && "passive"}`, onClick: () => {
-                                states.showSubitems.set((prev) => ({
-                                    ...prev,
-                                    [`${key}`]: !prev[`${key}`],
-                                }));
-                            } })))) : isHasSubitems && _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
-                columns.map((column, cIndex) => {
-                    return renderCell({
-                        item,
-                        column,
-                        index,
-                        cIndex,
-                        depth: deph * (config.isTreeView ? 1.75 : 0),
-                        level: 0,
-                        height: rowHeights[index] ?? 0,
-                    });
-                })),
-            states.showSubitems.get[key] && item[_subrowSelector] && (React.createElement(SubitemList, { items: item[_subrowSelector], columns: columns, index: index, depth: 1.5, parentKey: key }))));
-    };
     const renderCell = ({ item, column, index, cIndex, depth, level, height = 0, isSubrows = false }) => {
         let render;
-        const isHasSubitems = _subrowSelector in item;
-        // `column.key` bir string ise
+        // const isHasSubitems = _subrowSelector in item;
+        const itemTrackId = methods.trackBy?.(item) ?? index.toString();
         if (typeof column.key !== "object")
             render = column.render ? column.render(item) : item[column.key];
-        // `column.key` bir nesne ise ve `nestedKey` mevcutsa
         else if (typeof column.key === "object") {
             const _item = item[column.key.field];
             if (_item && typeof _item === "object") {
@@ -89,83 +75,86 @@ function TBody({ data, columns, refs, methods, states, config }) {
             _className.push(`sticky-${column.config.sticky}`);
         if (column.config?.textWrap)
             _className.push(`text-${column.config.textWrap}`);
-        return (React.createElement("td", { key: `cell-${index}-${cIndex}`, className: _className.join(" "), style: {
+        const firstCleanDataColumn = columns.find((col) => col.config?.sticky === undefined || col.config?.sticky !== "left");
+        const isTargetPaddingColumn = firstCleanDataColumn !== undefined && column === firstCleanDataColumn;
+        return (React.createElement("td", { key: `cell-${itemTrackId}-${cIndex}`, className: _className.join(" "), style: {
                 ...(column.config?.sticky ? { height } : {}),
                 ...(column.config?.width
                     ? { width: column.config.width, minWidth: column.config.width, maxWidth: column.config.width }
                     : {}),
             }, "data-sticky-position": column.config?.sticky },
             React.createElement("div", { style: {
-                    paddingLeft: cIndex === (methods.selections || (isHasSubitems && _subrowButton) ? 1 : 0)
-                        ? `${depth == 0 ? 1 : depth}rem`
-                        : "",
+                    paddingLeft: isTargetPaddingColumn ? `${depth == 0 ? 1 : depth}rem` : "",
                 }, className: "table-cell" },
                 config.isTreeView && cIndex === 0 && (React.createElement(React.Fragment, null,
                     isSubrows &&
-                        Array.from({ length: level }).map((_, i) => {
-                            if (i > 0)
-                                i *= 1.655;
-                            return (React.createElement("div", { key: `last-before-${i}`, style: { left: `${i + 0.65}rem` }, className: "last-before" }));
-                        }),
+                        Array.from({ length: level }).map((_, i) => (React.createElement("div", { key: `last-before-${itemTrackId}-${i}`, style: { left: `${(i > 0 ? i * 1.655 : i) + 0.65}rem` }, className: "last-before" }))),
                     React.createElement("div", { className: "before" }))),
-                React.isValidElement(render) ? (render) : column.editable && methods.onEditable ? (React.createElement(Editable, { c: column, item: item, trackByValue: methods.trackBy?.(item) ?? "", onEditable: methods.onEditable, config: config })) : (React.createElement("span", null, render)),
+                React.isValidElement(render) ? (render) : column.editable && methods.onEditable ? (React.createElement(Editable, { key: `editable-${itemTrackId}-${String(column.key)}`, c: column, item: item, trackByValue: itemTrackId, onEditable: methods.onEditable, config: config })) : (React.createElement("span", null, render)),
                 config.isTreeView && cIndex === 0 && (React.createElement("div", { className: "after" },
                     React.createElement("div", { className: "circle" }))))));
     };
-    const SubitemList = ({ items, columns, index, depth, level = 1, parentKey = "" }) => {
-        if (config.subrow?.render) {
-            return (React.createElement("tr", { className: `subrow-item ${_subrowButton ? "type-b" : "type-a"}`, "data-level": level },
-                _subrowButton && React.createElement("td", { style: { ...config.subrow.render.styles, width: 0, minWidth: 0 } }),
-                React.createElement("td", { colSpan: columns.length || 1, style: { ...config.subrow.render.styles, padding: "7.5px 7.5px 7.5px 0" } }, config.subrow?.render.element(items) ?? React.createElement(React.Fragment, null))));
-        }
-        return items.map((subitem, subindex) => {
-            const id = methods.trackBy?.(subitem) ?? subindex.toString();
-            const key = `${parentKey}.${id}`;
-            const _subitem = subitem[_subrowSelector];
-            const isHasSubitems = _subrowSelector in subitem;
-            return (React.createElement(Fragment, { key: `subitem-${index}-${subindex}-${Math.random()}` },
-                React.createElement("tr", { className: `subrow-item ${_subrowButton ? "type-b" : "type-a"}`, "data-level": level },
-                    isHasSubitems && _subrowButton ? (React.createElement("td", { className: "subrow-col sticky sticky-left", "data-sticky-position": "left" },
-                        React.createElement("div", { className: "subitem-open-button-wrapper" },
-                            React.createElement("span", { className: `${(states.showSubitems.get[key] && "opened") ?? ""} ${!_subitem && "passive"}`, onClick: () => {
-                                    if (!_subitem)
-                                        return;
-                                    states.showSubitems.set((prev) => ({
-                                        ...prev,
-                                        [key]: !prev[key],
-                                    }));
-                                } })))) : !isHasSubitems && _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
-                    !config.subrow?.render ? (columns.map((column, cIndex) => renderCell({
-                        item: subitem,
-                        column,
-                        index,
-                        cIndex,
-                        depth: depth * (config.isTreeView ? 2.25 : 1.75),
-                        level,
-                        height: 0,
-                        isSubrows: true,
-                    }))) : (React.createElement("td", { colSpan: columns.length || 1 }, config.subrow?.render.element(items) ?? React.createElement(React.Fragment, null)))),
-                states.showSubitems.get[key] && _subitem && (React.createElement(SubitemList, { items: _subitem, columns: columns, index: subindex, depth: depth + 0.75, level: level + 1, parentKey: key }))));
-        });
+    const renderRow = (item, index, deph, parentKey = "") => {
+        const id = methods.trackBy?.(item) ?? index.toString();
+        const key = parentKey ? `${parentKey}.${id}` : id;
+        const _subitem = item[_subrowSelector];
+        const isHasSubitems = _subrowSelector in item;
+        return (React.createElement(Fragment, { key: `row-wrapper-${id}` },
+            React.createElement("tr", { ref: (element) => {
+                    _tBodyTR.current[index] = element;
+                }, ...(methods.rowBackgroundColor ? { style: { backgroundColor: methods.rowBackgroundColor(item) } } : {}), ...(methods.onDnD && data.length > 1 ? { className: "draggable", draggable: true } : {}) },
+                methods.selections && (React.createElement("td", { ref: (element) => {
+                        _tHeadTH.current[index] = element;
+                    }, className: "flex justify-content-center sticky sticky-left", "data-sticky-position": "left" },
+                    React.createElement(Checkbox, { ref: (element) => {
+                            if (element)
+                                refs._checkboxItems.current[index] = element;
+                        }, variant: "filled", color: "green", checked: refs._selectionItems.current.some((sItem) => methods.trackBy?.(sItem) === methods.trackBy?.(item)), onChange: (event) => {
+                            const rKey = methods.trackBy?.(item);
+                            if (event.target.checked) {
+                                if (!refs._selectionItems.current.some((_item) => methods.trackBy?.(_item) === rKey)) {
+                                    refs._selectionItems.current = [...refs._selectionItems.current, item];
+                                }
+                            }
+                            else {
+                                refs._selectionItems.current = refs._selectionItems.current.filter((_item) => methods.trackBy?.(_item) !== rKey);
+                            }
+                            methods.selections?.(refs._selectionItems.current);
+                            setTriggerForRender((prev) => !prev);
+                        }, disabled: methods.selectionDisabled?.(item) }))),
+                isHasSubitems && _subrowButton ? (React.createElement("td", { className: "subrow-col sticky sticky-left", "data-sticky-position": "left" },
+                    React.createElement("div", { className: "subitem-open-button-wrapper" },
+                        React.createElement("span", { className: `subitem-open-button ${(states.showSubitems.get[key] && "opened") ?? ""} ${!_subitem && "passive"}`, onClick: () => {
+                                states.showSubitems.set((prev) => ({ ...prev, [key]: !prev[key] }));
+                            } })))) : isHasSubitems && _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
+                columns.map((column, cIndex) => renderCell({
+                    item,
+                    column,
+                    index,
+                    cIndex,
+                    depth: deph * (config.isTreeView ? 1.75 : 0),
+                    level: 0,
+                    height: rowHeights[index] ?? 0,
+                }))),
+            states.showSubitems.get[key] && _subitem && (React.createElement(SubitemList, { items: _subitem, columns: columns, depth: 1.5, parentKey: key, config: config, methods: methods, states: states, renderCell: renderCell }))));
     };
     // useEffects
     useEffect(() => {
-        if (_hasMeasured.current)
-            return;
         if (!data || data.length === 0)
             return;
         const heights = _tBodyTR.current.map((el) => (el ? el.getBoundingClientRect().height : 0));
         setRowHeights(heights);
-        setTriggerForRender((prev) => !prev);
-        _hasMeasured.current = true;
-    }, [data]);
+    }, [data.length]);
     useEffect(() => {
         if (Array.isArray(refs._checkboxItems.current) && refs._checkboxItems.current.length > 0) {
             const allChecked = refs._checkboxItems.current.every((item) => item?.checked === true);
             states.setSelectAll.set(allChecked);
         }
     }, [triggerForRender]);
-    return data.length > 0 ? (data.map((item, index) => React.createElement(React.Fragment, { key: index }, renderRow(item, index, 1)))) : (React.createElement("tr", null,
+    return data.length > 0 ? (data.map((item, index) => {
+        const rowKey = methods.trackBy?.(item) ?? index.toString();
+        return React.createElement(React.Fragment, { key: `tbody-row-${rowKey}` }, renderRow(item, index, 1));
+    })) : (React.createElement("tr", null,
         React.createElement("td", { colSpan: columns.length || 1 },
             React.createElement("div", { className: "no-item" },
                 React.createElement(ARIcon, { icon: "Inbox-Fill", fill: "var(--gray-300)", size: 64, style: { position: "relative", zIndex: 1 } }),

package/dist/components/data-display/table/index.js

@@ -21,7 +21,7 @@ import TBody from "./body/TBody";
 import DatePicker from "../../form/date-picker";
 import { useTranslation } from "../../../libs/core/application/hooks";
 const { Row, Column } = Grid;
-const Table = forwardRef(({ children, trackBy, title, description, data, columns, actions, rowBackgroundColor, selections, previousSelections, sortedParams, searchedParams, onEditable, onDnD, pagination, config = { isSearchable: false }, }, ref) => {
+const Table = forwardRef(({ children, trackBy, title, description, data, columns, actions, rowBackgroundColor, selections, selectionDisabled, previousSelections, sortedParams, searchedParams, onEditable, onDnD, pagination, config = { isSearchable: false }, }, ref) => {
     // refs
     const _innerRef = useRef(null);
     const _tableWrapper = useRef(null);
@@ -379,7 +379,8 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             const indexOfFirstRow = indexOfLastRow - selectedPerPage;
             _data = _data.slice(indexOfFirstRow, indexOfLastRow);
         }
-        handleScroll();
+        // Önemli, Data yenilenmesi durumunda sticky alanlar tazelenir.
+        setTimeout(() => handleScroll(), 0);
         return _data;
     }, [data, searchedText, currentPage, selectedPerPage, sortConfig, config.isServerSide]);
     // useEffects
@@ -579,6 +580,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             });
             config.validation?.getChangeData?.(updatedData);
         }
+        handleScroll();
     }, [createTrigger]);
     useEffect(() => {
         setIsMobile(window.innerWidth <= 768);
@@ -698,6 +700,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                         }, methods: {
                             trackBy: trackBy,
                             selections: selections,
+                            selectionDisabled: selectionDisabled,
                             onDnD: onDnD,
                             onEditable: onEditable,
                             rowBackgroundColor: rowBackgroundColor,
@@ -732,11 +735,12 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                     setTimeout(() => handleScroll(), 0);
                 } })))));
 });
-export default memo(Table, (prevProps, nextProps) => {
-    const data = Utils.DeepEqual(prevProps.data, nextProps.data);
-    const columns = Utils.DeepEqual(prevProps.columns, nextProps.columns);
-    const actions = Utils.DeepEqual(prevProps.actions, nextProps.actions);
-    const previousSelections = Utils.DeepEqual(prevProps.previousSelections, nextProps.previousSelections);
-    const pagination = Utils.DeepEqual(prevProps.pagination, nextProps.pagination);
-    return data && columns && actions && previousSelections && pagination;
-});
+// export default memo(Table, <T extends object>(prevProps: IProps<T>, nextProps: IProps<T>) => {
+//   const data = Utils.DeepEqual(prevProps.data, nextProps.data);
+//   const columns = Utils.DeepEqual(prevProps.columns, nextProps.columns);
+//   const actions = Utils.DeepEqual(prevProps.actions, nextProps.actions);
+//   const previousSelections = Utils.DeepEqual(prevProps.previousSelections, nextProps.previousSelections);
+//   const pagination = Utils.DeepEqual(prevProps.pagination, nextProps.pagination);
+//   return data && columns && actions && previousSelections && pagination;
+// }) as <T extends object>(props: IProps<T> & { ref?: React.Ref<HTMLTableElement> }) => React.JSX.Element;
+export default memo(Table);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.4.61",
+  "version": "0.4.62",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",