@pdg/react-table 1.0.125 → 1.0.127

package/README.md

@@ -8,7 +8,7 @@ https://parkdigy.github.io/react-table/
 
 ## 설치
 ```shell
-npm install -D @pdg/react-table @dnd-kit/core @dnd-kit/sortable @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/x-date-pickers @pdg/react-component @pdg/react-hook @pdg/react-form @tinymce/tinymce-react @types/uuid classnames dayjs copy-to-clipboard react-number-format react-resize-detector simplebar-react uuid
+npm install -D @pdg/react-table @dnd-kit/core @dnd-kit/sortable @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/x-date-pickers @pdg/react-component @pdg/react-hook @pdg/react-form @tinymce/tinymce-react @types/uuid classnames dayjs copy-to-clipboard react-number-format react-resize-detector simplebar-react uuid react-intersection-observer
 ```
 
 ### simplebar-react css 추가

package/dist/Table/Table.types.d.ts

@@ -66,7 +66,7 @@ export interface TableColumn<T = TableItem> {
     onGetSx?(item: T, index: number): TableCommonSxProps['sx'];
     onHide?(item: T, index: number): boolean;
     onGetTooltip?(item: T, index: number): ReactNode;
-    onRender?(item: T, index: number): ReactNode;
+    onRender?(item: T, index: number, inView: boolean): ReactNode;
     onClick?(item: T, index: number): void;
     onInitChecked?(item: T): boolean;
     onCheckDisabled?(item: T): boolean;
@@ -94,6 +94,7 @@ export interface TableProps<T = TableItem> extends TableCommonSxProps {
     showOddColor?: boolean;
     showEvenColor?: boolean;
     cellPadding?: string | number;
+    inViewRender?: boolean;
     footer?: boolean;
     noData?: ReactNode;
     pagination?: {

package/dist/TableBodyCell/TableBodyCell.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TableBodyCellProps as Props } from './TableBodyCell.types';
-declare const TableBodyCell: React.FC<Props>;
+declare const TableBodyCell: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLTableCellElement>>;
 export default TableBodyCell;

package/dist/TableCommonCell/TableCommonCell.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TableCommonCellProps } from './TableCommonCell.types';
-declare const TableCommonCell: React.FC<TableCommonCellProps>;
+declare const TableCommonCell: React.ForwardRefExoticComponent<TableCommonCellProps & React.RefAttributes<HTMLTableCellElement>>;
 export default TableCommonCell;

package/dist/TableContext/TableContext.types.d.ts

@@ -4,6 +4,7 @@ import { TableHeadCellCommands } from '../TableHeadCell';
 export interface TableContextValue {
     menuOpen: boolean;
     openMenuId?: string;
+    inViewRender?: boolean;
     setMenuOpen(menuOpen: boolean, openMenuId?: string): void;
     setItemColumnChecked(item: TableItem, column: TableColumn, checked: boolean): void;
     setItemColumnCheckDisabled(item: TableItem, column: TableColumn, checkDisabled: boolean): void;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React,{createContext,useContext,useMemo,useCallback,useState,useEffect,useRef,useLayoutEffect,useId}from'react';import classNames from'classnames';import {styled,TableRow,lighten,TableCell,Box,Tooltip,Checkbox,Stack,Pagination,useTheme,TableHead,TableBody,Icon,TableFooter,Paper,Table as Table$1,Grid,Popper,Grow,ClickAwayListener,IconButton}from'@mui/material';import {useResizeDetector}from'react-resize-detector';import {useSortable,sortableKeyboardCoordinates,arrayMove,SortableContext,verticalListSortingStrategy}from'@dnd-kit/sortable';import dayjs from'dayjs';import {personalNoAutoDash,companyNoAutoDash,telNoAutoDash,numberFormat,notEmpty,equal,empty}from'@pdg/util';import {useAutoUpdateLayoutState}from'@pdg/react-hook';import {useSensors,useSensor,MouseSensor,TouchSensor,KeyboardSensor,DndContext,closestCenter}from'@dnd-kit/core';import SimpleBar from'simplebar-react';import'simplebar-react/dist/simplebar.min.css';import {v4}from'uuid';import {Search,SearchGroup,FormHidden}from'@pdg/react-form';import {PdgButton,PdgIcon,PdgCopyToClipboard}from'@pdg/react-component';function styleInject(css, ref) {
+import React,{createContext,useContext,useMemo,useCallback,useState,useEffect,useRef,useLayoutEffect,useId}from'react';import classNames from'classnames';import {styled,TableRow,lighten,TableCell,Box,Tooltip,Checkbox,Stack,Pagination,useTheme,TableHead,TableBody,Icon,TableFooter,Paper,Table as Table$1,Grid,Popper,Grow,ClickAwayListener,IconButton}from'@mui/material';import {useResizeDetector}from'react-resize-detector';import {useSortable,sortableKeyboardCoordinates,arrayMove,SortableContext,verticalListSortingStrategy}from'@dnd-kit/sortable';import dayjs from'dayjs';import {personalNoAutoDash,companyNoAutoDash,telNoAutoDash,numberFormat,notEmpty,equal,empty}from'@pdg/util';import {useInView}from'react-intersection-observer';import {useAutoUpdateLayoutState}from'@pdg/react-hook';import {useSensors,useSensor,MouseSensor,TouchSensor,KeyboardSensor,DndContext,closestCenter}from'@dnd-kit/core';import SimpleBar from'simplebar-react';import'simplebar-react/dist/simplebar.min.css';import {v4}from'uuid';import {Search,SearchGroup,FormHidden}from'@pdg/react-form';import {PdgButton,PdgIcon,PdgCopyToClipboard}from'@pdg/react-component';function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
 
@@ -170,6 +170,7 @@ function typographyColorToSxColor(color) {
 }var TableContextDefaultValue = {
     menuOpen: false,
     openMenuId: undefined,
+    inViewRender: false,
     setMenuOpen: function () { },
     setItemColumnChecked: function () { },
     setItemColumnCheckDisabled: function () { },
@@ -183,7 +184,7 @@ function typographyColorToSxColor(color) {
     }
     return value;
 }var StyledTableCell = styled(TableCell)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  &.ellipsis {\n    position: relative;\n    max-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"], ["\n  &.ellipsis {\n    position: relative;\n    max-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"])));
-var TableCommonCell = function (_a) {
+var TableCommonCell = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
@@ -337,20 +338,21 @@ var TableCommonCell = function (_a) {
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React.createElement(StyledTableCell, { align: align, className: classNames(className, 'TableCommonCell', ellipsis && 'ellipsis', column.type ? "column-type-".concat(column.type) : false), style: style, sx: sx, onClick: type === 'body' ? handleClick : undefined }, children));
-};
+    return (React.createElement(StyledTableCell, { ref: ref, align: align, className: classNames(className, 'TableCommonCell', ellipsis && 'ellipsis', column.type ? "column-type-".concat(column.type) : false), style: style, sx: sx, onClick: type === 'body' ? handleClick : undefined }, children));
+});
 var templateObject_1$3;var StyledButtonsBox = styled(Box)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n"])));
-var TableBodyCell = function (_a) {
+var TableBodyCell = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
     var className = _a.className, style = _a.style, sx = _a.sx, item = _a.item, index = _a.index, column = _a.column, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, onClick = _a.onClick, onCheckChange = _a.onCheckChange;
-    var _b = useTableState(), menuOpen = _b.menuOpen, setItemColumnChecked = _b.setItemColumnChecked, setItemColumnCheckDisabled = _b.setItemColumnCheckDisabled, setItemColumnCommands = _b.setItemColumnCommands;
+    var _b = useTableState(), menuOpen = _b.menuOpen, inViewRender = _b.inViewRender, setItemColumnChecked = _b.setItemColumnChecked, setItemColumnCheckDisabled = _b.setItemColumnCheckDisabled, setItemColumnCommands = _b.setItemColumnCommands;
+    var _c = useInView({ threshold: 0 }), inViewRef = _c.ref, inView = _c.inView;
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
-    var _c = useState(false), checked = _c[0], setChecked = _c[1];
-    var _d = useState(false), checkDisabled = _d[0], setCheckDisabled = _d[1];
+    var _d = useState(false), checked = _d[0], setChecked = _d[1];
+    var _e = useState(false), checkDisabled = _e[0], setCheckDisabled = _e[1];
     /********************************************************************************************************************
      * Effect
      * ******************************************************************************************************************/
@@ -404,7 +406,7 @@ var TableBodyCell = function (_a) {
         var data;
         if (column.type !== 'check') {
             if (column.onRender) {
-                data = column.onRender(item, index);
+                data = column.onRender(item, index, inView);
             }
             else if (column.name) {
                 data = item[column.name];
@@ -513,7 +515,7 @@ var TableBodyCell = function (_a) {
             }
         }
         return data;
-    }, [column, item, index, menuOpen, checked, checkDisabled, buttonsBoxJustifyContent, onCheckChange]);
+    }, [column, item, index, inView, menuOpen, checked, checkDisabled, buttonsBoxJustifyContent, onCheckChange]);
     /********************************************************************************************************************
      * Event Handler
      * ******************************************************************************************************************/
@@ -529,8 +531,20 @@ var TableBodyCell = function (_a) {
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React.createElement(TableCommonCell, { type: 'body', className: classNames('TableBodyCell', className), style: style, sx: sx, column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, !isHidden && data));
-};
+    return (React.createElement(TableCommonCell, { ref: function (cellRef) {
+            if (inViewRender) {
+                inViewRef(cellRef);
+            }
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(cellRef);
+                }
+                else {
+                    ref.current = cellRef;
+                }
+            }
+        }, type: 'body', className: classNames('TableBodyCell', className), style: style, sx: sx, column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, !isHidden && data));
+});
 var templateObject_1$2;var StyledBodyRow = styled(TableRow)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -556,8 +570,9 @@ var TableBodyRow = function (_a) {
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React.createElement(StyledBodyRow, __assign({ className: classNames('TableBodyRow', className), style: sortable
-            ? __assign(__assign({}, style), { transform: CSS.Transform.toString(transform), transition: transition }) : style }, props, sortableProps), columns.map(function (column, columnIdx) { return (React.createElement(TableBodyCell, { className: onGetColumnClassName ? onGetColumnClassName(column, item, index) : undefined, sx: onGetColumnSx ? onGetColumnSx(column, item, index) : undefined, style: onGetColumnStyle ? onGetColumnStyle(column, item, index) : undefined, key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange })); })));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledBodyRow, __assign({ className: classNames('TableBodyRow', className), style: sortable
+                ? __assign(__assign({}, style), { transform: CSS.Transform.toString(transform), transition: transition }) : style }, props, sortableProps), columns.map(function (column, columnIdx) { return (React.createElement(TableBodyCell, { className: onGetColumnClassName ? onGetColumnClassName(column, item, index) : undefined, sx: onGetColumnSx ? onGetColumnSx(column, item, index) : undefined, style: onGetColumnStyle ? onGetColumnStyle(column, item, index) : undefined, key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange })); }))));
 };var TableFooterCell = function (_a) {
     /********************************************************************************************************************
      * Memo
@@ -784,7 +799,7 @@ var Table = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Ref
      * ******************************************************************************************************************/
-    var className = _a.className, initStyle = _a.style, sx = _a.sx, caption = _a.caption, topHeadRows = _a.topHeadRows, initColumns = _a.columns, initItems = _a.items, initPaging = _a.paging, _b = _a.pagingAlign, pagingAlign = _b === void 0 ? 'center' : _b, _c = _a.defaultAlign, defaultAlign = _c === void 0 ? 'left' : _c, defaultEllipsis = _a.defaultEllipsis, initStickyHeader = _a.stickyHeader, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, fullHeight = _a.fullHeight, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, _d = _a.cellPadding, cellPadding = _d === void 0 ? 13 : _d, footer = _a.footer, noData = _a.noData, pagination = _a.pagination, sortable = _a.sortable, onClick = _a.onClick, onGetBodyRowClassName = _a.onGetBodyRowClassName, onGetBodyRowStyle = _a.onGetBodyRowStyle, onGetBodyRowSx = _a.onGetBodyRowSx, onGetBodyColumnClassName = _a.onGetBodyColumnClassName, onGetBodyColumnStyle = _a.onGetBodyColumnStyle, onGetBodyColumnSx = _a.onGetBodyColumnSx, onPageChange = _a.onPageChange, onSortChange = _a.onSortChange, onCheckChange = _a.onCheckChange;
+    var className = _a.className, initStyle = _a.style, sx = _a.sx, caption = _a.caption, topHeadRows = _a.topHeadRows, initColumns = _a.columns, initItems = _a.items, initPaging = _a.paging, _b = _a.pagingAlign, pagingAlign = _b === void 0 ? 'center' : _b, _c = _a.defaultAlign, defaultAlign = _c === void 0 ? 'left' : _c, defaultEllipsis = _a.defaultEllipsis, initStickyHeader = _a.stickyHeader, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, fullHeight = _a.fullHeight, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, _d = _a.cellPadding, cellPadding = _d === void 0 ? 13 : _d, inViewRender = _a.inViewRender, footer = _a.footer, noData = _a.noData, pagination = _a.pagination, sortable = _a.sortable, onClick = _a.onClick, onGetBodyRowClassName = _a.onGetBodyRowClassName, onGetBodyRowStyle = _a.onGetBodyRowStyle, onGetBodyRowSx = _a.onGetBodyRowSx, onGetBodyColumnClassName = _a.onGetBodyColumnClassName, onGetBodyColumnStyle = _a.onGetBodyColumnStyle, onGetBodyColumnSx = _a.onGetBodyColumnSx, onPageChange = _a.onPageChange, onSortChange = _a.onSortChange, onCheckChange = _a.onCheckChange;
     var localHeaderDataRef = useRef({});
     var localBodyDataRef = useRef({});
     var updateHeadCheckTimer = useRef(undefined);
@@ -1312,6 +1327,7 @@ var Table = React.forwardRef(function (_a, ref) {
     return finalColumns ? (React.createElement(TableContextProvider, { value: {
             menuOpen: menuOpen,
             openMenuId: openMenuId,
+            inViewRender: inViewRender,
             setMenuOpen: TableContextSetMenuOpen,
             setItemColumnChecked: TableContextSetItemColumnChecked,
             setItemColumnCheckDisabled: TableContextSetItemColumnCheckDisabled,
@@ -1359,7 +1375,6 @@ var deHash = function () {
     /********************************************************************************************************************
      * Ref
      * ******************************************************************************************************************/
-    var _b, _c;
     var className = _a.className, initStyle = _a.style, sx = _a.sx, color = _a.color, hash = _a.hash, stickyHeader = _a.stickyHeader, fullHeight = _a.fullHeight, search = _a.search, table = _a.table, betweenSearchTableComponent = _a.betweenSearchTableComponent, onGetData = _a.onGetData, onRequestHashChange = _a.onRequestHashChange;
     var initPathRef = useRef(window.location.pathname);
     var searchRef = useRef(undefined);
@@ -1368,13 +1383,13 @@ var deHash = function () {
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
-    var _d = useState(true), isFirstSearchSubmit = _d[0], setIsFirstSearchSubmit = _d[1];
-    var _e = useState(), tableData = _e[0], setTableData = _e[1];
+    var _b = useState(true), isFirstSearchSubmit = _b[0], setIsFirstSearchSubmit = _b[1];
+    var _c = useState(), tableData = _c[0], setTableData = _c[1];
     /********************************************************************************************************************
      * searchInfo
      * ******************************************************************************************************************/
     var searchInfoFirstUseEffect = useRef(true);
-    var _f = useState(function () { return getSearchInfo(search); }), searchInfo = _f[0], setSearchInfo = _f[1];
+    var _d = useState(function () { return getSearchInfo(search); }), searchInfo = _d[0], setSearchInfo = _d[1];
     useEffect(function () {
         if (searchInfoFirstUseEffect.current) {
             searchInfoFirstUseEffect.current = false;
@@ -1387,7 +1402,7 @@ var deHash = function () {
      * tableInfo
      * ******************************************************************************************************************/
     var tableInfoFirstUseEffect = useRef(true);
-    var _g = useState(function () { return getTableInfo(table); }), tableInfo = _g[0], setTableInfo = _g[1];
+    var _e = useState(function () { return getTableInfo(table); }), tableInfo = _e[0], setTableInfo = _e[1];
     useEffect(function () {
         if (tableInfoFirstUseEffect.current) {
             tableInfoFirstUseEffect.current = false;
@@ -1721,25 +1736,25 @@ var deHash = function () {
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React.createElement(Grid, { container: true, direction: 'column', spacing: 1, className: classNames('SearchTable', className), style: fullHeight ? __assign(__assign({}, initStyle), { flex: 1, display: 'flex' }) : initStyle, sx: sx },
-        React.createElement(Grid, { sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
-            React.createElement(Search, __assign({ color: color }, searchInfo.props, { ref: function (commands) {
-                    if (searchInfo.ref) {
-                        if (typeof searchInfo.ref === 'function') {
-                            searchInfo.ref(commands);
-                        }
-                        else {
-                            searchInfo.ref.current = commands;
-                        }
+    var searchView = useMemo(function () { return (React.createElement(Grid, { sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
+        React.createElement(Search, __assign({ color: color }, searchInfo.props, { ref: function (commands) {
+                if (searchInfo.ref) {
+                    if (typeof searchInfo.ref === 'function') {
+                        searchInfo.ref(commands);
                     }
-                    searchRef.current = commands || undefined;
-                }, autoSubmit: true, onSubmit: handleSearchSubmit }),
-                React.createElement(SearchGroup, { hidden: true },
-                    React.createElement(FormHidden, { name: 'page', value: 1 })),
-                searchInfo.searchGroups)),
-        betweenSearchTableComponent && React.createElement(Grid, null, betweenSearchTableComponent),
-        React.createElement(Grid, { style: fullHeight ? { flex: 1, display: 'flex', flexDirection: 'column' } : undefined },
-            React.createElement(Table, __assign({}, tableInfo.props, { stickyHeader: stickyHeader || ((_b = tableInfo.props) === null || _b === void 0 ? void 0 : _b.stickyHeader), fullHeight: fullHeight || ((_c = tableInfo.props) === null || _c === void 0 ? void 0 : _c.fullHeight), ref: function (commands) {
+                    else {
+                        searchInfo.ref.current = commands;
+                    }
+                }
+                searchRef.current = commands || undefined;
+            }, autoSubmit: true, onSubmit: handleSearchSubmit }),
+            React.createElement(SearchGroup, { hidden: true },
+                React.createElement(FormHidden, { name: 'page', value: 1 })),
+            searchInfo.searchGroups))); }, [color, handleSearchSubmit, searchInfo]);
+    var tableView = useMemo(function () {
+        var _a, _b;
+        return (React.createElement(Grid, { style: fullHeight ? { flex: 1, display: 'flex', flexDirection: 'column' } : undefined },
+            React.createElement(Table, __assign({}, tableInfo.props, { stickyHeader: stickyHeader || ((_a = tableInfo.props) === null || _a === void 0 ? void 0 : _a.stickyHeader), fullHeight: fullHeight || ((_b = tableInfo.props) === null || _b === void 0 ? void 0 : _b.fullHeight), ref: function (commands) {
                     if (tableInfo.ref) {
                         if (typeof tableInfo.ref === 'function') {
                             tableInfo.ref(commands);
@@ -1749,7 +1764,12 @@ var deHash = function () {
                         }
                     }
                     tableRef.current = commands || undefined;
-                }, items: tableData === null || tableData === void 0 ? void 0 : tableData.items, paging: tableData === null || tableData === void 0 ? void 0 : tableData.paging, onPageChange: handlePageChange })))));
+                }, items: tableData === null || tableData === void 0 ? void 0 : tableData.items, paging: tableData === null || tableData === void 0 ? void 0 : tableData.paging, onPageChange: handlePageChange }))));
+    }, [fullHeight, handlePageChange, stickyHeader, tableData === null || tableData === void 0 ? void 0 : tableData.items, tableData === null || tableData === void 0 ? void 0 : tableData.paging, tableInfo]);
+    return (React.createElement(Grid, { container: true, direction: 'column', spacing: 1, className: classNames('SearchTable', className), style: fullHeight ? __assign(__assign({}, initStyle), { flex: 1, display: 'flex' }) : initStyle, sx: sx },
+        searchView,
+        betweenSearchTableComponent && React.createElement(Grid, null, betweenSearchTableComponent),
+        tableView));
 });var TableButton = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, initSx = _a.sx, _b = _a.variant, variant = _b === void 0 ? 'outlined' : _b, _c = _a.color, color = _c === void 0 ? 'primary' : _c, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, props = __rest(_a, ["children", "className", "sx", "variant", "color", "startIcon", "endIcon", "onClick"]);
     return (React.createElement(PdgButton, __assign({ ref: ref, className: classNames(className, 'TableButton'), variant: variant, type: 'button', size: 'small', sx: __assign({ minWidth: 0, px: empty(startIcon) && empty(endIcon)

package/dist/index.js

@@ -1,4 +1,4 @@
-'use strict';var React=require('react'),classNames=require('classnames'),material=require('@mui/material'),reactResizeDetector=require('react-resize-detector'),sortable=require('@dnd-kit/sortable'),dayjs=require('dayjs'),util=require('@pdg/util'),reactHook=require('@pdg/react-hook'),core=require('@dnd-kit/core'),SimpleBar=require('simplebar-react');require('simplebar-react/dist/simplebar.min.css');var uuid=require('uuid'),reactForm=require('@pdg/react-form'),reactComponent=require('@pdg/react-component');function styleInject(css, ref) {
+'use strict';var React=require('react'),classNames=require('classnames'),material=require('@mui/material'),reactResizeDetector=require('react-resize-detector'),sortable=require('@dnd-kit/sortable'),dayjs=require('dayjs'),util=require('@pdg/util'),reactIntersectionObserver=require('react-intersection-observer'),reactHook=require('@pdg/react-hook'),core=require('@dnd-kit/core'),SimpleBar=require('simplebar-react');require('simplebar-react/dist/simplebar.min.css');var uuid=require('uuid'),reactForm=require('@pdg/react-form'),reactComponent=require('@pdg/react-component');function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
 
@@ -170,6 +170,7 @@ function typographyColorToSxColor(color) {
 }var TableContextDefaultValue = {
     menuOpen: false,
     openMenuId: undefined,
+    inViewRender: false,
     setMenuOpen: function () { },
     setItemColumnChecked: function () { },
     setItemColumnCheckDisabled: function () { },
@@ -183,7 +184,7 @@ function typographyColorToSxColor(color) {
     }
     return value;
 }var StyledTableCell = material.styled(material.TableCell)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  &.ellipsis {\n    position: relative;\n    max-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"], ["\n  &.ellipsis {\n    position: relative;\n    max-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"])));
-var TableCommonCell = function (_a) {
+var TableCommonCell = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
@@ -337,20 +338,21 @@ var TableCommonCell = function (_a) {
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React.createElement(StyledTableCell, { align: align, className: classNames(className, 'TableCommonCell', ellipsis && 'ellipsis', column.type ? "column-type-".concat(column.type) : false), style: style, sx: sx, onClick: type === 'body' ? handleClick : undefined }, children));
-};
+    return (React.createElement(StyledTableCell, { ref: ref, align: align, className: classNames(className, 'TableCommonCell', ellipsis && 'ellipsis', column.type ? "column-type-".concat(column.type) : false), style: style, sx: sx, onClick: type === 'body' ? handleClick : undefined }, children));
+});
 var templateObject_1$3;var StyledButtonsBox = material.styled(material.Box)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n"])));
-var TableBodyCell = function (_a) {
+var TableBodyCell = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
     var className = _a.className, style = _a.style, sx = _a.sx, item = _a.item, index = _a.index, column = _a.column, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, onClick = _a.onClick, onCheckChange = _a.onCheckChange;
-    var _b = useTableState(), menuOpen = _b.menuOpen, setItemColumnChecked = _b.setItemColumnChecked, setItemColumnCheckDisabled = _b.setItemColumnCheckDisabled, setItemColumnCommands = _b.setItemColumnCommands;
+    var _b = useTableState(), menuOpen = _b.menuOpen, inViewRender = _b.inViewRender, setItemColumnChecked = _b.setItemColumnChecked, setItemColumnCheckDisabled = _b.setItemColumnCheckDisabled, setItemColumnCommands = _b.setItemColumnCommands;
+    var _c = reactIntersectionObserver.useInView({ threshold: 0 }), inViewRef = _c.ref, inView = _c.inView;
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
-    var _c = React.useState(false), checked = _c[0], setChecked = _c[1];
-    var _d = React.useState(false), checkDisabled = _d[0], setCheckDisabled = _d[1];
+    var _d = React.useState(false), checked = _d[0], setChecked = _d[1];
+    var _e = React.useState(false), checkDisabled = _e[0], setCheckDisabled = _e[1];
     /********************************************************************************************************************
      * Effect
      * ******************************************************************************************************************/
@@ -404,7 +406,7 @@ var TableBodyCell = function (_a) {
         var data;
         if (column.type !== 'check') {
             if (column.onRender) {
-                data = column.onRender(item, index);
+                data = column.onRender(item, index, inView);
             }
             else if (column.name) {
                 data = item[column.name];
@@ -513,7 +515,7 @@ var TableBodyCell = function (_a) {
             }
         }
         return data;
-    }, [column, item, index, menuOpen, checked, checkDisabled, buttonsBoxJustifyContent, onCheckChange]);
+    }, [column, item, index, inView, menuOpen, checked, checkDisabled, buttonsBoxJustifyContent, onCheckChange]);
     /********************************************************************************************************************
      * Event Handler
      * ******************************************************************************************************************/
@@ -529,8 +531,20 @@ var TableBodyCell = function (_a) {
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React.createElement(TableCommonCell, { type: 'body', className: classNames('TableBodyCell', className), style: style, sx: sx, column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, !isHidden && data));
-};
+    return (React.createElement(TableCommonCell, { ref: function (cellRef) {
+            if (inViewRender) {
+                inViewRef(cellRef);
+            }
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(cellRef);
+                }
+                else {
+                    ref.current = cellRef;
+                }
+            }
+        }, type: 'body', className: classNames('TableBodyCell', className), style: style, sx: sx, column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, !isHidden && data));
+});
 var templateObject_1$2;var StyledBodyRow = material.styled(material.TableRow)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -556,8 +570,9 @@ var TableBodyRow = function (_a) {
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React.createElement(StyledBodyRow, __assign({ className: classNames('TableBodyRow', className), style: sortable$1
-            ? __assign(__assign({}, style), { transform: CSS.Transform.toString(transform), transition: transition }) : style }, props, sortableProps), columns.map(function (column, columnIdx) { return (React.createElement(TableBodyCell, { className: onGetColumnClassName ? onGetColumnClassName(column, item, index) : undefined, sx: onGetColumnSx ? onGetColumnSx(column, item, index) : undefined, style: onGetColumnStyle ? onGetColumnStyle(column, item, index) : undefined, key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange })); })));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledBodyRow, __assign({ className: classNames('TableBodyRow', className), style: sortable$1
+                ? __assign(__assign({}, style), { transform: CSS.Transform.toString(transform), transition: transition }) : style }, props, sortableProps), columns.map(function (column, columnIdx) { return (React.createElement(TableBodyCell, { className: onGetColumnClassName ? onGetColumnClassName(column, item, index) : undefined, sx: onGetColumnSx ? onGetColumnSx(column, item, index) : undefined, style: onGetColumnStyle ? onGetColumnStyle(column, item, index) : undefined, key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange })); }))));
 };var TableFooterCell = function (_a) {
     /********************************************************************************************************************
      * Memo
@@ -784,7 +799,7 @@ var Table = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Ref
      * ******************************************************************************************************************/
-    var className = _a.className, initStyle = _a.style, sx = _a.sx, caption = _a.caption, topHeadRows = _a.topHeadRows, initColumns = _a.columns, initItems = _a.items, initPaging = _a.paging, _b = _a.pagingAlign, pagingAlign = _b === void 0 ? 'center' : _b, _c = _a.defaultAlign, defaultAlign = _c === void 0 ? 'left' : _c, defaultEllipsis = _a.defaultEllipsis, initStickyHeader = _a.stickyHeader, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, fullHeight = _a.fullHeight, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, _d = _a.cellPadding, cellPadding = _d === void 0 ? 13 : _d, footer = _a.footer, noData = _a.noData, pagination = _a.pagination, sortable$1 = _a.sortable, onClick = _a.onClick, onGetBodyRowClassName = _a.onGetBodyRowClassName, onGetBodyRowStyle = _a.onGetBodyRowStyle, onGetBodyRowSx = _a.onGetBodyRowSx, onGetBodyColumnClassName = _a.onGetBodyColumnClassName, onGetBodyColumnStyle = _a.onGetBodyColumnStyle, onGetBodyColumnSx = _a.onGetBodyColumnSx, onPageChange = _a.onPageChange, onSortChange = _a.onSortChange, onCheckChange = _a.onCheckChange;
+    var className = _a.className, initStyle = _a.style, sx = _a.sx, caption = _a.caption, topHeadRows = _a.topHeadRows, initColumns = _a.columns, initItems = _a.items, initPaging = _a.paging, _b = _a.pagingAlign, pagingAlign = _b === void 0 ? 'center' : _b, _c = _a.defaultAlign, defaultAlign = _c === void 0 ? 'left' : _c, defaultEllipsis = _a.defaultEllipsis, initStickyHeader = _a.stickyHeader, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, fullHeight = _a.fullHeight, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, _d = _a.cellPadding, cellPadding = _d === void 0 ? 13 : _d, inViewRender = _a.inViewRender, footer = _a.footer, noData = _a.noData, pagination = _a.pagination, sortable$1 = _a.sortable, onClick = _a.onClick, onGetBodyRowClassName = _a.onGetBodyRowClassName, onGetBodyRowStyle = _a.onGetBodyRowStyle, onGetBodyRowSx = _a.onGetBodyRowSx, onGetBodyColumnClassName = _a.onGetBodyColumnClassName, onGetBodyColumnStyle = _a.onGetBodyColumnStyle, onGetBodyColumnSx = _a.onGetBodyColumnSx, onPageChange = _a.onPageChange, onSortChange = _a.onSortChange, onCheckChange = _a.onCheckChange;
     var localHeaderDataRef = React.useRef({});
     var localBodyDataRef = React.useRef({});
     var updateHeadCheckTimer = React.useRef(undefined);
@@ -1312,6 +1327,7 @@ var Table = React.forwardRef(function (_a, ref) {
     return finalColumns ? (React.createElement(TableContextProvider, { value: {
             menuOpen: menuOpen,
             openMenuId: openMenuId,
+            inViewRender: inViewRender,
             setMenuOpen: TableContextSetMenuOpen,
             setItemColumnChecked: TableContextSetItemColumnChecked,
             setItemColumnCheckDisabled: TableContextSetItemColumnCheckDisabled,
@@ -1359,7 +1375,6 @@ var deHash = function () {
     /********************************************************************************************************************
      * Ref
      * ******************************************************************************************************************/
-    var _b, _c;
     var className = _a.className, initStyle = _a.style, sx = _a.sx, color = _a.color, hash = _a.hash, stickyHeader = _a.stickyHeader, fullHeight = _a.fullHeight, search = _a.search, table = _a.table, betweenSearchTableComponent = _a.betweenSearchTableComponent, onGetData = _a.onGetData, onRequestHashChange = _a.onRequestHashChange;
     var initPathRef = React.useRef(window.location.pathname);
     var searchRef = React.useRef(undefined);
@@ -1368,13 +1383,13 @@ var deHash = function () {
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
-    var _d = React.useState(true), isFirstSearchSubmit = _d[0], setIsFirstSearchSubmit = _d[1];
-    var _e = React.useState(), tableData = _e[0], setTableData = _e[1];
+    var _b = React.useState(true), isFirstSearchSubmit = _b[0], setIsFirstSearchSubmit = _b[1];
+    var _c = React.useState(), tableData = _c[0], setTableData = _c[1];
     /********************************************************************************************************************
      * searchInfo
      * ******************************************************************************************************************/
     var searchInfoFirstUseEffect = React.useRef(true);
-    var _f = React.useState(function () { return getSearchInfo(search); }), searchInfo = _f[0], setSearchInfo = _f[1];
+    var _d = React.useState(function () { return getSearchInfo(search); }), searchInfo = _d[0], setSearchInfo = _d[1];
     React.useEffect(function () {
         if (searchInfoFirstUseEffect.current) {
             searchInfoFirstUseEffect.current = false;
@@ -1387,7 +1402,7 @@ var deHash = function () {
      * tableInfo
      * ******************************************************************************************************************/
     var tableInfoFirstUseEffect = React.useRef(true);
-    var _g = React.useState(function () { return getTableInfo(table); }), tableInfo = _g[0], setTableInfo = _g[1];
+    var _e = React.useState(function () { return getTableInfo(table); }), tableInfo = _e[0], setTableInfo = _e[1];
     React.useEffect(function () {
         if (tableInfoFirstUseEffect.current) {
             tableInfoFirstUseEffect.current = false;
@@ -1721,25 +1736,25 @@ var deHash = function () {
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React.createElement(material.Grid, { container: true, direction: 'column', spacing: 1, className: classNames('SearchTable', className), style: fullHeight ? __assign(__assign({}, initStyle), { flex: 1, display: 'flex' }) : initStyle, sx: sx },
-        React.createElement(material.Grid, { sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
-            React.createElement(reactForm.Search, __assign({ color: color }, searchInfo.props, { ref: function (commands) {
-                    if (searchInfo.ref) {
-                        if (typeof searchInfo.ref === 'function') {
-                            searchInfo.ref(commands);
-                        }
-                        else {
-                            searchInfo.ref.current = commands;
-                        }
+    var searchView = React.useMemo(function () { return (React.createElement(material.Grid, { sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
+        React.createElement(reactForm.Search, __assign({ color: color }, searchInfo.props, { ref: function (commands) {
+                if (searchInfo.ref) {
+                    if (typeof searchInfo.ref === 'function') {
+                        searchInfo.ref(commands);
                     }
-                    searchRef.current = commands || undefined;
-                }, autoSubmit: true, onSubmit: handleSearchSubmit }),
-                React.createElement(reactForm.SearchGroup, { hidden: true },
-                    React.createElement(reactForm.FormHidden, { name: 'page', value: 1 })),
-                searchInfo.searchGroups)),
-        betweenSearchTableComponent && React.createElement(material.Grid, null, betweenSearchTableComponent),
-        React.createElement(material.Grid, { style: fullHeight ? { flex: 1, display: 'flex', flexDirection: 'column' } : undefined },
-            React.createElement(Table, __assign({}, tableInfo.props, { stickyHeader: stickyHeader || ((_b = tableInfo.props) === null || _b === void 0 ? void 0 : _b.stickyHeader), fullHeight: fullHeight || ((_c = tableInfo.props) === null || _c === void 0 ? void 0 : _c.fullHeight), ref: function (commands) {
+                    else {
+                        searchInfo.ref.current = commands;
+                    }
+                }
+                searchRef.current = commands || undefined;
+            }, autoSubmit: true, onSubmit: handleSearchSubmit }),
+            React.createElement(reactForm.SearchGroup, { hidden: true },
+                React.createElement(reactForm.FormHidden, { name: 'page', value: 1 })),
+            searchInfo.searchGroups))); }, [color, handleSearchSubmit, searchInfo]);
+    var tableView = React.useMemo(function () {
+        var _a, _b;
+        return (React.createElement(material.Grid, { style: fullHeight ? { flex: 1, display: 'flex', flexDirection: 'column' } : undefined },
+            React.createElement(Table, __assign({}, tableInfo.props, { stickyHeader: stickyHeader || ((_a = tableInfo.props) === null || _a === void 0 ? void 0 : _a.stickyHeader), fullHeight: fullHeight || ((_b = tableInfo.props) === null || _b === void 0 ? void 0 : _b.fullHeight), ref: function (commands) {
                     if (tableInfo.ref) {
                         if (typeof tableInfo.ref === 'function') {
                             tableInfo.ref(commands);
@@ -1749,7 +1764,12 @@ var deHash = function () {
                         }
                     }
                     tableRef.current = commands || undefined;
-                }, items: tableData === null || tableData === void 0 ? void 0 : tableData.items, paging: tableData === null || tableData === void 0 ? void 0 : tableData.paging, onPageChange: handlePageChange })))));
+                }, items: tableData === null || tableData === void 0 ? void 0 : tableData.items, paging: tableData === null || tableData === void 0 ? void 0 : tableData.paging, onPageChange: handlePageChange }))));
+    }, [fullHeight, handlePageChange, stickyHeader, tableData === null || tableData === void 0 ? void 0 : tableData.items, tableData === null || tableData === void 0 ? void 0 : tableData.paging, tableInfo]);
+    return (React.createElement(material.Grid, { container: true, direction: 'column', spacing: 1, className: classNames('SearchTable', className), style: fullHeight ? __assign(__assign({}, initStyle), { flex: 1, display: 'flex' }) : initStyle, sx: sx },
+        searchView,
+        betweenSearchTableComponent && React.createElement(material.Grid, null, betweenSearchTableComponent),
+        tableView));
 });var TableButton = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, initSx = _a.sx, _b = _a.variant, variant = _b === void 0 ? 'outlined' : _b, _c = _a.color, color = _c === void 0 ? 'primary' : _c, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, props = __rest(_a, ["children", "className", "sx", "variant", "color", "startIcon", "endIcon", "onClick"]);
     return (React.createElement(reactComponent.PdgButton, __assign({ ref: ref, className: classNames(className, 'TableButton'), variant: variant, type: 'button', size: 'small', sx: __assign({ minWidth: 0, px: util.empty(startIcon) && util.empty(endIcon)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pdg/react-table",
   "title": "React Table",
-  "version": "1.0.125",
+  "version": "1.0.127",
   "description": "React Table",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -58,6 +58,7 @@
     "dayjs": "^1.0.0",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
+    "react-intersection-observer": "^9.16.0",
     "react-number-format": "^5.0.0",
     "react-resize-detector": "^12.0.0",
     "simplebar-react": "^3.0.0",