ff-step-table 1.0.0

package/lib/components/Table/Table.js

@@ -0,0 +1,207 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Table.scss';
+import { isFunction } from '../../assets/utils/functionUtils';
+import classNames from 'classnames';
+import { useEffect, useRef, useState, useCallback, useMemo, useImperativeHandle, forwardRef, } from 'react';
+import { binarySearch, calculateFrozenWidth } from './utils/virtualization';
+import { BUFFER_SIZE, DEFAULT_ROW_HEIGHT } from './utils/constants';
+import TableHeader from './components/TableHeader';
+import VirtualizedRows from './components/VirtualizedRows';
+import { debounce } from '../../utils/debounce/debounce';
+import { closestCorners, DndContext } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+const Table = forwardRef(({ data = [], columns = [], headerType, withCheckbox = false, onSelect, allSelected, partialSelected = false, withFixedHeader = true, borderWithRadius = false, headerCheckboxDisabled = false, noDataContent, height = '100%', className = '', tableHeadClass = '', tableBodyRowClass = '', headerTextColor, tableDataTextColor, headerIconName = '', headerIconOnClick = () => { }, draggable = false, tableRef = null, isRowCheckBoxDisable, isRowDisabled = true, tableHeaderZindex = 99, freezeColumns, headerIconTooltipTitle, onDragEnd, editMode = '', editComponent, accordionContent, getAccordionStatus = () => { }, selectedNode = { key: '', selected: '' }, uniqueRowIdForAccordion, }, ref) => {
+    const containerRef = useRef(null);
+    const totalRows = data.length;
+    const setContainerRef = (node) => {
+        containerRef.current = node;
+        if (tableRef) {
+            if (typeof tableRef === 'function') {
+                tableRef(node);
+            }
+            else if (typeof tableRef === 'object' && 'current' in tableRef) {
+                tableRef.current = node;
+            }
+        }
+    };
+    const [scrollTop, setScrollTop] = useState(0);
+    const [containerHeight, setContainerHeight] = useState(0);
+    // --- PERFORMANCE FIX 1: Use useRef for heights (No Re-renders) ---
+    const rowHeightsMap = useRef({});
+    // This version number triggers the re-calculation of the virtual list
+    const [heightVersion, setHeightVersion] = useState(0);
+    // Reset heights when data array reference changes
+    useEffect(() => {
+        setHeightVersion((version) => version + 1);
+    }, [data]);
+    // Container Resize Observer
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        setContainerHeight(container.clientHeight);
+        const observer = new ResizeObserver((entries) => {
+            for (let entry of entries) {
+                // Use contentRect for the container
+                const newHeight = entry.contentRect.height;
+                if (Math.abs(newHeight - containerHeight) > 1) {
+                    setContainerHeight(newHeight);
+                }
+            }
+        });
+        observer.observe(container);
+        return () => {
+            observer.unobserve(container);
+            observer.disconnect();
+        };
+    }, [containerHeight]);
+    const handleScroll = useCallback((e) => {
+        // Use requestAnimationFrame for scroll updates if scrolling feels jittery,
+        // generally direct state update is fine for React 18+ automatic batching.
+        setScrollTop(e.currentTarget.scrollTop);
+    }, []);
+    // --- PERFORMANCE FIX 2: Batched Updates (Debounce) ---
+    // If 100 rows mount, this ensures we only re-calculate layout ONCE after 20ms.
+    const commitHeightUpdates = useMemo(() => debounce(() => {
+        setHeightVersion((prev) => prev + 1);
+    }, 20), []);
+    const updateRowHeight = useCallback((index, height) => {
+        const currentHeight = rowHeightsMap.current[index];
+        // Only schedule update if height changed by > 1px
+        if (currentHeight === undefined ||
+            Math.abs(currentHeight - height) > 1) {
+            // 1. Update the Ref (Synchronous, cheap)
+            rowHeightsMap.current[index] = height;
+            // 2. Trigger the Debounced Re-render (Asynchronous)
+            commitHeightUpdates();
+        }
+    }, [commitHeightUpdates]);
+    // --- PERFORMANCE FIX 3: Calculate Cumulative Heights from Ref ---
+    const { cumulativeHeights, totalContentHeight } = useMemo(() => {
+        let cumulative = 0;
+        const heights = [0];
+        for (let i = 0; i < totalRows; i++) {
+            // FAST: Reading directly from the Ref object
+            const height = rowHeightsMap.current[i] ?? DEFAULT_ROW_HEIGHT;
+            cumulative += height;
+            heights.push(cumulative);
+        }
+        return { cumulativeHeights: heights, totalContentHeight: cumulative };
+    }, [totalRows, heightVersion]); // Only runs when 'heightVersion' updates
+    // Virtualization Logic
+    const visibleState = useMemo(() => {
+        if (containerHeight === 0 || totalRows === 0) {
+            return {
+                startIndex: 0,
+                endIndex: -1,
+                paddingTop: 0,
+                paddingBottom: 0,
+                visibleRows: [],
+            };
+        }
+        const startIdxPlusOne = binarySearch(cumulativeHeights, scrollTop + 1);
+        let startIndex = startIdxPlusOne > 0 ? startIdxPlusOne - 1 : 0;
+        const endIdxPlusOne = binarySearch(cumulativeHeights, scrollTop + containerHeight);
+        let endIndex = endIdxPlusOne - 1;
+        let bufferedStart = Math.max(0, startIndex - BUFFER_SIZE);
+        let bufferedEnd = Math.min(totalRows - 1, endIndex + BUFFER_SIZE);
+        const paddingTop = cumulativeHeights[bufferedStart];
+        // Ensure we don't access out of bounds
+        const nextHeight = cumulativeHeights[bufferedEnd + 1];
+        const paddingBottom = totalContentHeight -
+            (nextHeight !== undefined ? nextHeight : totalContentHeight);
+        // Slicing data is cheap
+        return {
+            startIndex: bufferedStart,
+            endIndex: bufferedEnd,
+            paddingTop: paddingTop,
+            paddingBottom: paddingBottom,
+            visibleRows: data.slice(bufferedStart, bufferedEnd + 1),
+        };
+    }, [scrollTop, containerHeight, totalRows, cumulativeHeights, data]);
+    const { startIndex, paddingTop, paddingBottom, visibleRows } = visibleState;
+    let frozenWidth = 0;
+    if (freezeColumns) {
+        frozenWidth = calculateFrozenWidth(columns, freezeColumns);
+    }
+    const handleOnclick = useCallback((column, row) => {
+        let { onClick, accessor } = column;
+        if (onClick && isFunction(onClick)) {
+            onClick(accessor, row);
+        }
+    }, []);
+    const onSelectClick = useCallback((e, item) => {
+        if (onSelect) {
+            onSelect(e, item);
+        }
+    }, [onSelect]);
+    // --- START OF NEW AUTOSCROLL LOGIC ---
+    /**
+     * Calculates the scroll position and imperatively scrolls the table to the row with the given ID.
+     * @param rowId The ID or _id of the row to scroll to.
+     */
+    const scrollToRow = useCallback((rowId) => {
+        // Assuming a safe, estimated fixed header height.
+        // You MUST verify this value matches your actual TableHeader height.
+        const FIXED_HEADER_HEIGHT = 50;
+        const targetIndex = data.findIndex((row) => row.id === rowId || row._id === rowId);
+        if (targetIndex === -1 ||
+            !containerRef.current ||
+            cumulativeHeights.length === 0) {
+            return;
+        }
+        const container = containerRef.current;
+        const targetRowTop = cumulativeHeights[targetIndex];
+        const targetRowBottom = cumulativeHeights[targetIndex + 1];
+        // --- 1. Calculate Initial Adjusted Position (Handling Fixed Header) ---
+        // Scrolls the row down by the header height to bring it into full view.
+        let adjustedScrollPosition = Math.max(0, targetRowTop - FIXED_HEADER_HEIGHT);
+        const currentScrollTop = container.scrollTop;
+        const currentScrollBottom = container.scrollTop + container.clientHeight;
+        if (targetRowTop >= currentScrollTop + FIXED_HEADER_HEIGHT &&
+            targetRowBottom <= currentScrollBottom) {
+            return;
+        }
+        // --- 3. Edge Case: Preventing Overscrolling to the Bottom ---
+        // Find the maximum possible scrollTop value (total height minus viewport height).
+        const maxScrollTop = Math.max(0, totalContentHeight - container.clientHeight);
+        // Clamp the adjusted position to ensure we don't scroll past the content end.
+        adjustedScrollPosition = Math.min(adjustedScrollPosition, maxScrollTop);
+        // --- 4. Perform the Scroll ---
+        container.scrollTop = adjustedScrollPosition;
+        setScrollTop(adjustedScrollPosition);
+    }, [data, cumulativeHeights, totalContentHeight]);
+    // 5. Expose the scroll function to the parent component via the ref
+    useImperativeHandle(ref, () => ({
+        // Expose the custom scroll function
+        scrollToRow: scrollToRow,
+        // You can expose other methods or the containerRef here if needed
+    }));
+    // --- END OF NEW AUTOSCROLL LOGIC ---
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id)
+            return;
+        const oldIndex = data.findIndex((item) => item._id === active.id || item.id === active.id);
+        const newIndex = data.findIndex((item) => item._id === over.id || item.id === over.id);
+        if (oldIndex === -1 || newIndex === -1)
+            return;
+        if (onDragEnd)
+            onDragEnd(oldIndex, newIndex);
+    };
+    return (_jsx(DndContext, { collisionDetection: closestCorners, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { disabled: !draggable, items: data?.map((row) => row._id || row.id), strategy: verticalListSortingStrategy, children: _jsxs("div", { ref: setContainerRef, style: {
+                    height,
+                    overflow: 'auto',
+                    position: 'relative',
+                    scrollbarWidth: draggable ? 'none' : 'auto',
+                    '--frozen-column-width': freezeColumns
+                        ? `${frozenWidth}px`
+                        : '0px',
+                }, id: "ff-table-scroll-container", className: classNames('ff-table-scroll-container', {
+                    'ff-table-fixed-header': withFixedHeader,
+                    'ff-table-container--border-radius': borderWithRadius,
+                }, className), onScroll: handleScroll, children: [_jsxs("table", { className: "ff-table-container", cellSpacing: 0, style: { height: totalContentHeight }, children: [_jsx(TableHeader, { columns: columns, freezeColumns: freezeColumns, headerType: headerType, tableHeadClass: tableHeadClass, headerTextColor: headerTextColor, headerCheckboxDisabled: headerCheckboxDisabled, withCheckbox: withCheckbox, allSelected: allSelected, partialSelected: partialSelected, headerIconName: headerIconName, headerIconOnClick: headerIconOnClick, headerIconTooltipTitle: headerIconTooltipTitle, tableHeaderZindex: tableHeaderZindex, onSelectClick: onSelectClick, withFixedHeader: withFixedHeader }), _jsx(VirtualizedRows, { paddingTop: paddingTop ?? 0, paddingBottom: paddingBottom, columnsLength: columns.length, visibleRows: visibleRows, startIndex: startIndex, columns: columns, tableBodyRowClass: tableBodyRowClass, handleOnclick: handleOnclick, tableDataTextColor: tableDataTextColor, withCheckbox: withCheckbox, onSelectClick: onSelectClick, isRowCheckBoxDisable: isRowCheckBoxDisable, isRowDisabled: isRowDisabled, freezeColumns: freezeColumns, frozenWidth: frozenWidth, updateRowHeight: updateRowHeight, draggable: draggable, editMode: editMode, editComponent: editComponent, getAccordionStatus: getAccordionStatus, accordionContent: accordionContent, selectedNode: selectedNode, uniqueRowIdForAccordion: uniqueRowIdForAccordion })] }), checkEmpty(data) && (_jsx("div", { className: "ff-no-data-content", style: { height: `calc(${height} - 50px)` }, children: noDataContent }))] }) }) }));
+});
+export default Table;
+//# sourceMappingURL=Table.js.map

package/lib/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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"}

package/lib/components/Table/Types.d.ts

@@ -0,0 +1,223 @@
+import React, { LegacyRef, ReactNode } from 'react';
+export interface ColumnsProps {
+    /**
+     * column name
+     */
+    header: string;
+    /**
+     * data key for particular column
+     */
+    accessor: string;
+    /**
+     * className for a column
+     */
+    className?: string;
+    /**
+     * width of a column
+     */
+    width?: number;
+    /**
+     * data for the column
+     */
+    cell?: (e: any) => JSX.Element | string | ReactNode;
+    onClick?: (colum: string, row: DataProps) => void;
+}
+export interface DataProps {
+    /**
+     * data for each row
+     */
+    [key: string]: any;
+}
+export interface SelectedItemProps {
+    /**
+     * selected row object | All selected flag
+     */
+    [key: string]: string | number | boolean;
+}
+export interface TableProps {
+    /**
+     * Data for table
+     */
+    data: Array<number | string | DataProps>;
+    /**
+     * Column details for table
+     */
+    columns: Array<any>;
+    /**
+     * Header type to have different background color
+     */
+    headerType: 'default' | 'primary' | 'secondary' | 'tertiary';
+    /**
+     * withFixedHeader prop to have non-scrollable fixed table header
+     */
+    withFixedHeader?: boolean;
+    /**
+     * borderWithRadius prop to have table with border 1px and borderRadius 5px
+     */
+    borderWithRadius?: boolean;
+    /**
+     * Check box feature to select the row
+     */
+    withCheckbox?: boolean;
+    /**
+     * Event for checkbox onClick
+     */
+    onSelect?: (e: object, arg: SelectedItemProps) => void;
+    /**
+     * Check box feature to select the row
+     */
+    allSelected?: boolean;
+    /**
+     * send true to show partial checkbox in the header
+     */
+    partialSelected?: boolean;
+    /**
+     * send true to disable the checkbox in the header
+     */
+    headerCheckboxDisabled?: boolean;
+    /**
+     * The content that to be displayed if no data not found
+     */
+    noDataContent?: string | ReactNode;
+    /**
+     * Image that to be displayed if you don't have data
+     */
+    noDataImage?: string;
+    /**
+     * Size of the image that to be displayed if you don't have data
+     */
+    noDataImageSize?: 'x-large' | 'large' | 'medium' | 'small' | 'x-small';
+    /**
+     *  Height of the table in string
+     */
+    height?: string;
+    /**
+     *  classNames for the table container
+     */
+    className?: string;
+    /**
+     *  classNames for the table Header container
+     */
+    tableHeadClass?: string;
+    /**
+     *  classNames for the table Row container
+     */
+    tableBodyRowClass?: string;
+    /**
+     * custom color for the column text
+     */
+    headerTextColor?: 'default' | 'primary';
+    /**
+     * custom color for the row text
+     */
+    tableDataTextColor?: string;
+    /**
+     * icon for the table header, for expand or other purposes
+     */
+    headerIconName?: string;
+    /**
+     * tooltip title for the table header icon
+     */
+    headerIconTooltipTitle?: string;
+    /**
+     * handle function for the table header icon
+     */
+    headerIconOnClick?: () => void;
+    /**
+     * Drag and Drop pass true to enable
+     */
+    draggable?: boolean;
+    /**
+     * Drag and Drop indexes
+     */
+    onDragEnd?: (startIndex: number, endIndex: number) => void | undefined;
+    loadMore?: (_direction?: string) => void;
+    /**
+     * get the status of the accordion which is open or close
+     */
+    getAccordionStatus?: Function;
+    /**
+     * content for the accordion
+     */
+    accordionContent?: ReactNode;
+    /**
+     * enable editMode by setting state row id
+     */
+    editMode?: string | null;
+    /**
+     * The content that to be displayed if editComponent
+     */
+    editComponent?: ReactNode;
+    /**
+     * tableRef to get the scroll position & to pass control of table to parent component
+     */
+    tableRef?: LegacyRef<HTMLTableSectionElement> | React.RefObject<HTMLTableSectionElement> | null;
+    /**
+     * Explicitly handling the checkbox disability for the row.
+     */
+    isRowCheckBoxDisable?: boolean;
+    /**
+     * Explicitly handling the disability for the row.
+     */
+    isRowDisabled?: boolean;
+    /**
+     * z-index for the table header
+     */
+    tableHeaderZindex?: number;
+    freezeColumns?: number;
+    displayCard?: boolean;
+    selectedNode?: {
+        key: string;
+        selected: string;
+    };
+    uniqueRowIdForAccordion?: string | number;
+}
+export interface FormValues {
+    ifFailed: string | null;
+}
+export interface TableHeaderProps {
+    columns: ColumnsProps[];
+    freezeColumns?: number;
+    headerType?: string;
+    tableHeadClass?: string;
+    headerTextColor?: string;
+    headerCheckboxDisabled?: boolean;
+    withCheckbox?: boolean;
+    allSelected?: boolean;
+    partialSelected?: boolean;
+    headerIconName?: string;
+    headerIconOnClick?: () => void;
+    headerIconTooltipTitle?: string;
+    tableHeaderZindex?: number;
+    onSelectClick: (e: any, payload: any) => void;
+    withFixedHeader?: boolean;
+}
+export interface VirtualizedRowsProps {
+    paddingTop: number;
+    paddingBottom: number;
+    columnsLength: number;
+    visibleRows: any[];
+    startIndex: number;
+    columns: ColumnsProps[];
+    tableBodyRowClass?: string;
+    handleOnclick?: (_column: ColumnsProps, _row: DataProps) => void;
+    tableDataTextColor?: string;
+    withCheckbox?: boolean;
+    onSelectClick?: (_e: object, _item: SelectedItemProps) => void;
+    isRowCheckBoxDisable?: boolean;
+    isRowDisabled?: boolean;
+    freezeColumns?: number;
+    frozenWidth?: number;
+    updateRowHeight?: (index: number, height: number) => void;
+    draggable?: boolean;
+    onDragEnd?: (startIndex: number, endIndex: number) => void | undefined;
+    editMode?: string | null;
+    editComponent?: ReactNode;
+    getAccordionStatus?: Function;
+    accordionContent?: ReactNode;
+    selectedNode?: {
+        key: string;
+        selected: string;
+    };
+    uniqueRowIdForAccordion?: string | number;
+}

package/lib/components/Table/Types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Types.js.map

package/lib/components/Table/Types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Types.js","sourceRoot":"","sources":["../../../src/components/Table/Types.ts"],"names":[],"mappings":""}

package/lib/components/Table/components/SortableRow.d.ts

@@ -0,0 +1,2 @@
+declare const SortableRow: import("react").MemoExoticComponent<({ row, index, serialNumber, columns, tableBodyRowClass, handleOnclick, tableDataTextColor, withCheckbox, onSelectClick, draggable, isRowCheckBoxDisable, isRowDisabled, freezeColumns, updateRowHeight, editMode, isAccordionOpen, accordionContent, selectedNode, }: any) => import("react/jsx-runtime").JSX.Element>;
+export default SortableRow;

package/lib/components/Table/components/SortableRow.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, memo, useCallback } from 'react';
+import classNames from 'classnames';
+import Typography from '../../Typography';
+import Icon from '../../Icon';
+import Checkbox from '../../Checkbox';
+import { prepareData } from '../../../utils/TableCell/TableCell';
+import { getColumnLeftPosition } from '../utils/virtualization';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+// OPTIMIZATION: Memoize to prevent re-rendering when parent Table updates
+const SortableRow = memo(({ row, index, serialNumber, columns, tableBodyRowClass, handleOnclick, tableDataTextColor, withCheckbox, onSelectClick, draggable, isRowCheckBoxDisable, isRowDisabled, freezeColumns, updateRowHeight, editMode, isAccordionOpen, accordionContent, selectedNode, }) => {
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+        id: row?._id || row?.id,
+        disabled: row.disabled || !!editMode,
+    });
+    const rowRef = useRef(null);
+    const accordionRef = useRef(null);
+    const updateHeight = useCallback(() => {
+        if (!updateRowHeight)
+            return;
+        const mainRowHeight = rowRef.current?.getBoundingClientRect().height || 0;
+        const accordionHeight = accordionRef.current?.getBoundingClientRect().height || 0;
+        const totalHeight = mainRowHeight + accordionHeight;
+        if (totalHeight > 0) {
+            updateRowHeight(index, totalHeight);
+        }
+    }, [index, updateRowHeight]);
+    useEffect(() => {
+        const mainElement = rowRef.current;
+        const accordionElement = accordionRef.current;
+        if (!updateRowHeight)
+            return;
+        // OPTIMIZATION: ResizeObserver
+        // We do NOT call getBoundingClientRect() here anymore.
+        // Calling it manually forces the browser to calculate layout immediately (Reflow).
+        // The observer will deliver the height asynchronously without freezing the thread.
+        const observer = new ResizeObserver(() => {
+            updateHeight();
+        });
+        if (mainElement)
+            observer.observe(mainElement);
+        if (accordionElement)
+            observer.observe(accordionElement);
+        return () => {
+            observer.disconnect();
+        };
+    }, [updateHeight, isAccordionOpen]);
+    const key = row?.[selectedNode?.key] || row._id || row.id;
+    const selectedRow = key === selectedNode.selected;
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("tr", { ref: (node) => {
+                    if (rowRef.current !== node) {
+                        rowRef.current = node;
+                    }
+                    setNodeRef(node);
+                }, className: classNames('ff-table-data-row ', tableBodyRowClass, {
+                    'ff-table-disabled': row.disabled && isRowDisabled,
+                    'ff-table-selected-node': selectedRow,
+                }), id: key, style: style, children: columns.map((column, columnIndex) => {
+                    const isFrozen = freezeColumns && columnIndex < freezeColumns;
+                    return (_jsx("td", { onClick: () => handleOnclick(column, row), style: {
+                            position: isFrozen ? 'sticky' : 'static',
+                            left: isFrozen
+                                ? getColumnLeftPosition(columnIndex, columns, freezeColumns)
+                                : 'auto',
+                            zIndex: isFrozen ? 100 : 'auto',
+                            backgroundColor: isFrozen
+                                ? 'var(--input-label-bg-color)'
+                                : 'transparent',
+                            width: column.width ? `${column.width}px` : 'auto',
+                            padding: '7px 8px',
+                            boxSizing: 'border-box',
+                            paddingRight: isFrozen ? 0 : '8px',
+                        }, className: classNames('ff-table-data-cell ff-table-icon-container', column.className, {
+                            'ff-table-clickable-cell': column.onClick,
+                            'ff-table-sticky-column': isFrozen,
+                        }), children: _jsxs(Typography, { as: "div", color: tableDataTextColor, className: "ff-table-data-container", children: [columnIndex === 0 && withCheckbox && (_jsx("span", { className: "ff-table-checkbox-table", children: _jsx(Checkbox, { onChange: (e) => onSelectClick(e, row), checked: row.checked, disabled: isRowCheckBoxDisable === undefined
+                                            ? !!row.disabled
+                                            : isRowCheckBoxDisable }) })), columnIndex === 0 && draggable && (_jsxs(_Fragment, { children: [_jsx("span", { className: row.disabled ? 'ff-table-drag' : 'ff-table-drag-icon', ...listeners, ...attributes, children: _jsx(Icon, { name: "drag", className: "ff-table-drag-active" }) }), _jsx(Typography, { color: "var(--brand-color)", children: serialNumber && `${serialNumber}.` })] })), prepareData(row, column)] }) }, column.accessor + columnIndex));
+                }) }, key), isAccordionOpen && (_jsx("tr", { ref: accordionRef, children: _jsx("td", { className: "ff-table-data-cell", colSpan: columns.length, children: _jsx("div", { style: { maxHeight: 'none', overflow: 'visible' }, children: accordionContent }) }) }))] }));
+}, 
+// OPTIMIZATION: Custom Memo Comparison
+// Returns true if props are equal (prevents re-render)
+(prev, next) => {
+    return (prev.row === next.row &&
+        prev.index === next.index &&
+        prev.serialNumber === next.serialNumber &&
+        prev.updateRowHeight === next.updateRowHeight &&
+        prev.columns === next.columns);
+});
+export default SortableRow;
+//# sourceMappingURL=SortableRow.js.map

package/lib/components/Table/components/SortableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableRow.js","sourceRoot":"","sources":["../../../../src/components/Table/components/SortableRow.tsx"],"names":[],"mappings":"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"}

package/lib/components/Table/components/TableHeader.d.ts

@@ -0,0 +1,3 @@
+import { TableHeaderProps } from '../Types';
+declare const TableHeader: import("react").MemoExoticComponent<(props: TableHeaderProps) => import("react/jsx-runtime").JSX.Element>;
+export default TableHeader;

package/lib/components/Table/components/TableHeader.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import classNames from 'classnames';
+import { getColumnLeftPosition } from '../utils/virtualization';
+import Tooltip from '../../Tooltip';
+import Icon from '../../Icon';
+import Typography from '../../Typography';
+import Checkbox from '../../Checkbox';
+const TableHeader = memo((props) => {
+    const { columns, freezeColumns, headerType, tableHeadClass, headerTextColor, headerCheckboxDisabled, withCheckbox, allSelected, partialSelected, headerIconName = '', headerIconOnClick, headerIconTooltipTitle, tableHeaderZindex, onSelectClick, withFixedHeader, } = props;
+    return (_jsx("thead", { className: classNames('ff-table-header', { 'ff-table-fixed-header': withFixedHeader }, tableHeadClass), style: { zIndex: tableHeaderZindex }, children: _jsx("tr", { children: columns.map((column, index) => {
+                const isFrozen = freezeColumns && index < freezeColumns;
+                return (_jsxs("th", { className: classNames('ff-table-header-cell', headerType !== 'default' ? `ff-table-${headerType}-bg` : '', headerTextColor && `ff-table-${headerTextColor}-color`), style: {
+                        position: isFrozen ? 'sticky' : 'static',
+                        left: isFrozen
+                            ? getColumnLeftPosition(index, columns, freezeColumns)
+                            : 'auto',
+                        zIndex: isFrozen ? 999 : 'auto',
+                        width: column.width ? `${column.width}px` : 'auto',
+                        padding: '8px 8px',
+                        boxSizing: 'border-box',
+                        paddingRight: isFrozen ? 0 : '8px',
+                    }, children: [_jsx("div", { className: "ff-table-icon", children: _jsx(Tooltip, { title: headerIconTooltipTitle || '', placement: "bottom", children: _jsx(Icon, { height: 14, width: 14, name: headerIconName, onClick: headerIconOnClick, cursorType: "pointer" }) }) }), _jsxs(Typography, { style: column.width ? { width: column.width } : undefined, as: "div", fontWeight: "semi-bold", className: "ff-table-label-checkbox-container", children: [index === 0 && withCheckbox && (_jsx("span", { className: "ff-table-checkbox-table", children: _jsx(Checkbox, { onChange: (e) => onSelectClick(e, {
+                                            allSelected: e.target.checked,
+                                        }), checked: allSelected || false, partial: !!partialSelected, disabled: headerCheckboxDisabled }) })), column.header] })] }, column.header));
+            }) }) }));
+});
+export default TableHeader;
+//# sourceMappingURL=TableHeader.js.map

package/lib/components/Table/components/TableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../../src/components/Table/components/TableHeader.tsx"],"names":[],"mappings":"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"}

package/lib/components/Table/components/VirtualizedRows.d.ts

@@ -0,0 +1,3 @@
+import { VirtualizedRowsProps } from '../Types';
+declare const VirtualizedRows: import("react").MemoExoticComponent<({ paddingTop, paddingBottom, columnsLength, visibleRows, startIndex, columns, freezeColumns, frozenWidth, handleOnclick, isRowCheckBoxDisable, isRowDisabled, onSelectClick, tableBodyRowClass, tableDataTextColor, updateRowHeight, withCheckbox, draggable, editMode, editComponent, accordionContent, getAccordionStatus, selectedNode, uniqueRowIdForAccordion, }: VirtualizedRowsProps) => import("react/jsx-runtime").JSX.Element>;
+export default VirtualizedRows;

package/lib/components/Table/components/VirtualizedRows.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, Fragment, isValidElement, memo, } from 'react';
+import SortableRow from './SortableRow';
+const VirtualizedRows = memo(({ paddingTop, paddingBottom, columnsLength, visibleRows, startIndex, columns, freezeColumns, frozenWidth, handleOnclick, isRowCheckBoxDisable, isRowDisabled, onSelectClick, tableBodyRowClass, tableDataTextColor, updateRowHeight, withCheckbox, draggable, editMode, editComponent, accordionContent, getAccordionStatus = () => { }, selectedNode, uniqueRowIdForAccordion, }) => {
+    return (_jsxs(_Fragment, { children: [paddingTop > 0 && (_jsx("tr", { children: _jsx("td", { style: { height: paddingTop, padding: 0 }, colSpan: columnsLength }) })), visibleRows.map((row, i) => {
+                const absoluteIndex = startIndex + i;
+                const rowId = row._id ?? row.id;
+                if (editMode === rowId) {
+                    return (_jsx("tr", { className: "edit-row", children: _jsx("td", { colSpan: columns.length, style: { padding: '0px' }, children: isValidElement(editComponent) &&
+                                cloneElement(editComponent, {
+                                    rowData: row,
+                                    rowIndex: absoluteIndex + 1,
+                                }) }) }, `edit-${rowId}`));
+                }
+                const isOpen = getAccordionStatus(row?.id ||
+                    row?._id ||
+                    (uniqueRowIdForAccordion
+                        ? row?.[uniqueRowIdForAccordion]
+                        : undefined));
+                return (_jsx(Fragment, { children: _jsx(SortableRow, { row: row, index: absoluteIndex, serialNumber: absoluteIndex + 1, columns: columns, tableBodyRowClass: tableBodyRowClass, handleOnclick: handleOnclick, tableDataTextColor: tableDataTextColor, withCheckbox: withCheckbox, onSelectClick: onSelectClick, isRowCheckBoxDisable: isRowCheckBoxDisable, isRowDisabled: isRowDisabled, freezeColumns: freezeColumns, frozenWidth: frozenWidth, updateRowHeight: updateRowHeight, draggable: draggable, editMode: editMode, isAccordionOpen: isOpen, accordionContent: accordionContent, selectedNode: selectedNode }, rowId) }, row._id || absoluteIndex));
+            }), paddingBottom > 0 && (_jsx("tr", { children: _jsx("td", { style: { height: paddingBottom, padding: 0 }, colSpan: columnsLength }) }))] }));
+});
+export default VirtualizedRows;
+//# sourceMappingURL=VirtualizedRows.js.map