argous 1.2.231 → 1.2.232

package/dist/components/ArgousComplexTable/ArgousComplexTable.js

@@ -65,6 +65,11 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -174,6 +179,30 @@ var ArgousComplexTable = react_1.forwardRef(function (_a, ref) {
     var _3 = react_1.useState({ qtRegs: defaultRowsPerPage, pgAtl: 1 }), ctrlPgn = _3[0], setCtrlPgn = _3[1];
     var qtRegs = ctrlPgn.qtRegs, pgAtl = ctrlPgn.pgAtl, ordCols = ctrlPgn.ordCols;
     var enableCheck = checkEnabled || (enableCheckIfSelected && !!selected.length);
+    var dadosNaoCortados = react_1.useMemo(function () {
+        if (method)
+            return lista || [];
+        if (lodash_1.isArray(lista) && lista.length > 0)
+            return stableSort(lista, getComparator(order, orderBy), line)
+                .filter(function (linha) { return lodash_1.isArray(line(linha)) ? line(linha).filter(function (item) { return filter ? new RegExp(".*" + filter + ".*", 'gi').test(item === null || item === void 0 ? void 0 : item.toString()) : true; }).length > 0 : true; }) || [];
+        return [];
+    }, [lista, filter, order, orderBy, method, line]);
+    var usePagination = ((rowsPerPageOptions !== 0) && (Math.ceil(((method || externalCtrlPgn) ? ctrlPgn.recordCount : dadosNaoCortados.length) / parseInt(rowsPerPageOptions[0], 10)) > 1));
+    var cortaDados = react_1.useCallback(function (dados) { return dados === null || dados === void 0 ? void 0 : dados.slice(defaultRowsPerPage === 0 ? (undefined) : page * rowsPerPage, defaultRowsPerPage === 0 ? (undefined) : page * rowsPerPage + rowsPerPage); }, [page, rowsPerPage, defaultRowsPerPage]);
+    var fillListToKeepHeight = react_1.useCallback(function (array) {
+        var newArray = __spreadArray([], array);
+        if (newArray.length < rowsPerPage) {
+            var gap = (rowsPerPage - newArray.length);
+            var arrayToFillGap = Array.from(Array(gap)).fill(Array.from(Array(head.length)).fill(''));
+            newArray.push.apply(newArray, arrayToFillGap);
+        }
+        return newArray;
+    }, [head, rowsPerPage]);
+    var dadosMostrados = react_1.useMemo(function () {
+        if (method || externalCtrlPgn)
+            return (usePagination) ? fillListToKeepHeight(lista || []) : (lista || []);
+        return (usePagination) ? fillListToKeepHeight(cortaDados(dadosNaoCortados) || []) : (cortaDados(dadosNaoCortados) || []);
+    }, [method, externalCtrlPgn, lista, dadosNaoCortados, cortaDados, usePagination, fillListToKeepHeight]);
     react_1.useEffect(function () {
         dispatch({ type: 'mount', value: savedState.current });
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -246,20 +275,6 @@ var ArgousComplexTable = react_1.forwardRef(function (_a, ref) {
             onSelect(selected);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selected]);
-    var dadosNaoCortados = react_1.useMemo(function () {
-        if (method)
-            return lista || [];
-        if (lodash_1.isArray(lista) && lista.length > 0)
-            return stableSort(lista, getComparator(order, orderBy), line)
-                .filter(function (linha) { return lodash_1.isArray(line(linha)) ? line(linha).filter(function (item) { return filter ? new RegExp(".*" + filter + ".*", 'gi').test(item === null || item === void 0 ? void 0 : item.toString()) : true; }).length > 0 : true; }) || [];
-        return [];
-    }, [lista, filter, order, orderBy, method, line]);
-    var cortaDados = react_1.useCallback(function (dados) { return dados === null || dados === void 0 ? void 0 : dados.slice(defaultRowsPerPage === 0 ? (undefined) : page * rowsPerPage, defaultRowsPerPage === 0 ? (undefined) : page * rowsPerPage + rowsPerPage); }, [page, rowsPerPage, defaultRowsPerPage]);
-    var dadosMostrados = react_1.useMemo(function () {
-        if (method || externalCtrlPgn)
-            return lista || [];
-        return cortaDados(dadosNaoCortados) || [];
-    }, [method, externalCtrlPgn, lista, dadosNaoCortados, cortaDados]);
     var handleOpenClose = react_1.useCallback(function (index) {
         if (index === open || (!index && index !== 0)) {
             dispatch({ type: 'setOpen', value: undefined });
@@ -319,7 +334,7 @@ var ArgousComplexTable = react_1.forwardRef(function (_a, ref) {
                         onClick: onClick, onDoubleClick: onDoubleClick, indexToSelect: indexToSelect, open: open, dadosMostrados: dadosMostrados, customKey: customKey, disableCheckIf: disableCheckIf
                     })),
                     FooterComponent && react_1.default.createElement(FooterComponent, __assign({}, footerProps))),
-                ((rowsPerPageOptions !== 0) && (Math.ceil(((method || externalCtrlPgn) ? ctrlPgn.recordCount : dadosNaoCortados.length) / parseInt(rowsPerPageOptions[0], 10)) > 1)) && (react_1.default.createElement(PaginationComponent, __assign({ count: (method || externalCtrlPgn) ? ctrlPgn.recordCount : dadosNaoCortados.length, onChangePage: function (_, value) {
+                (usePagination) && (react_1.default.createElement(PaginationComponent, __assign({ count: (method || externalCtrlPgn) ? ctrlPgn.recordCount : dadosNaoCortados.length, onChangePage: function (_, value) {
                         dispatch({ type: 'setPage', value: value });
                         setCtrlPgn(__assign(__assign({}, ctrlPgn), { pgAtl: value + 1 }));
                     }, onChangeRowsPerPage: function (e) {

package/dist/components/ArgousComplexTableBody/ArgousComplexTableBody.js

@@ -83,6 +83,18 @@ var useStyles = core_1.makeStyles(function (theme) { return ({
     loading: {
         textAlign: 'center',
         padding: '7px'
+    },
+    ghost: {
+        borderBottom: '1px solid #0000',
+        userSelect: 'none',
+        '&:hover': {
+            backgroundColor: '#0000 !important'
+        }
+    },
+    tableCell: {
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
     }
 }); });
 var ArgousComplexTableBody = react_1.memo(function (_a) {
@@ -118,6 +130,7 @@ var ArgousComplexTableBody = react_1.memo(function (_a) {
                     react_1.default.createElement(core_1.CircularProgress, { disableShrink: true })))) : dadosMostrados.length ? dadosMostrados.map(function (linha, i) {
                 var isItemSelected = isSelected(linha[indexToSelect]);
                 var isItemOpen = i === open;
+                var fullyEmpty = !linha.some(function (value) { return !!value; });
                 var _a = rowProps({ index: i, linhaOriginal: linha, linhaFormatada: line(linha), itensSelecionados: selected }) || {}, title = _a.title, rowProperties = __rest(_a, ["title"]);
                 return react_1.default.createElement(dist_1.Draggable, { key: customKey ? lista[i][customKey] : i, render: function (draggableRef) {
                         var _a;
@@ -126,7 +139,11 @@ var ArgousComplexTableBody = react_1.memo(function (_a) {
                         //TODO criar proprio draggable pois esse remove classes do filho
                         react_1.default.createElement(react_1.Fragment, null,
                             react_1.default.createElement(exports.CustomTooltip, { title: lineTitle || title },
-                                react_1.default.createElement(core_1.TableRow, __assign({ component: dist_1.Draggable }, rowProperties, { className: clsx_1.default((_a = {}, _a[classes.hover] = isItemSelected, _a[classes.open] = isItemOpen && !!children, _a), lineClass(line(linha), linha, i), rowProperties.className), hover: true, role: 'checkbox', tabIndex: -1, selected: isItemSelected, style: lineStyle ? lineStyle(linha, line(linha), i) : undefined, onClick: onClick ? function (e) { return onClick(e, linha, line(linha), i); } : children ? function () { return handleOpenClose(i); } : undefined, onDoubleClick: onDoubleClick ? function (e) { return onDoubleClick(e, linha, line(linha), i); } : undefined, innerRef: draggableRef }),
+                                react_1.default.createElement(core_1.TableRow, __assign({ component: dist_1.Draggable }, rowProperties, { className: clsx_1.default((_a = {},
+                                        _a[classes.hover] = isItemSelected,
+                                        _a[classes.open] = (isItemOpen && !!children),
+                                        _a[classes.ghost] = fullyEmpty,
+                                        _a), lineClass(line(linha), linha, i), rowProperties.className), hover: true, role: 'checkbox', tabIndex: -1, selected: isItemSelected, style: lineStyle ? lineStyle(linha, line(linha), i) : undefined, onClick: (fullyEmpty) ? undefined : (onClick) ? function (e) { return onClick(e, linha, line(linha), i); } : (children) ? function () { return handleOpenClose(i); } : undefined, onDoubleClick: (fullyEmpty) ? undefined : (onDoubleClick) ? function (e) { return onDoubleClick(e, linha, line(linha), i); } : undefined, innerRef: draggableRef }),
                                     enableDrag && react_1.default.createElement(core_1.TableCell, { padding: 'checkbox' },
                                         react_1.default.createElement(core_1.Tooltip, { title: 'Arrastar' },
                                             react_1.default.createElement(core_1.IconButton, { size: 'small', className: classes.dragHandle },
@@ -136,7 +153,7 @@ var ArgousComplexTableBody = react_1.memo(function (_a) {
                                                 e.stopPropagation();
                                                 handleClick(linha[indexToSelect]);
                                             }, checked: isItemSelected })),
-                                    lodash_1.isArray(line(linha)) && line(linha).map(function (coluna, j) { return (react_1.default.createElement(core_1.TableCell, __assign({ key: j }, columnProps(j, coluna, linha, line(linha)), { style: columnStyles ? columnStyles[j] : undefined }), getCellContent(coluna, dadosMostrados[i], j, i))); }))),
+                                    lodash_1.isArray(line(linha)) && line(linha).map(function (coluna, j) { return ((fullyEmpty) ? (react_1.default.createElement(core_1.TableCell, __assign({ key: j }, columnProps(j, coluna, linha, line(linha)), { style: columnStyles ? columnStyles[j] : undefined, className: clsx_1.default(classes.tableCell, classes.ghost) }), "\u00A0")) : (react_1.default.createElement(core_1.TableCell, __assign({ key: j }, columnProps(j, coluna, linha, line(linha)), { style: columnStyles ? columnStyles[j] : undefined, className: classes.tableCell }), getCellContent(coluna, dadosMostrados[i], j, i)))); }))),
                             children && (react_1.default.createElement(core_1.TableRow, { className: classes.group },
                                 react_1.default.createElement(core_1.TableCell, { colSpan: (dadosMostrados === null || dadosMostrados === void 0 ? void 0 : dadosMostrados.length) && ((_b = line(dadosMostrados[0])) === null || _b === void 0 ? void 0 : _b.length) + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0), style: { padding: open === i ? 8 : 0 }, className: 'argous-complex-table-group-cell' },
                                     react_1.default.createElement(core_1.Collapse, { in: open === i, mountOnEnter: true, unmountOnExit: true }, typeof children === 'function' ? children({ linha: line(linha), linhaOriginal: linha, index: i }) : children))))));

package/lib/components/ArgousComplexTable/ArgousComplexTable.js

@@ -18,9 +18,9 @@ const useStyles = makeStyles({
     }
   }
 });
-  
+
 export const TableContext = createContext();
-  
+
 const ehData = valor => {
   const retorno = (format) => moment(valor, format).format('YYYYMMDDHHmmss');
   if (/[0-9]{2}\/[0-9]{2}\/[0-9]{4}/.test(valor)) return retorno('DD/MM/YYYY');
@@ -29,7 +29,7 @@ const ehData = valor => {
   if (/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}(.\d)*/.test(valor)) return retorno('YYYY-MM-DD HH:mm:ss');
   return valor;
 };
-  
+
 function descendingComparator(a, b, orderBy) {
   const aO = ehData(a[orderBy]);
   const bO = ehData(b[orderBy]);
@@ -37,13 +37,13 @@ function descendingComparator(a, b, orderBy) {
   if (bO > aO) return 1;
   return 0;
 }
-  
+
 function getComparator(order, orderBy) {
   return order === 'desc'
     ? (a, b) => descendingComparator(a, b, orderBy)
     : (a, b) => -descendingComparator(a, b, orderBy);
 }
-  
+
 function stableSort(array, comparator, line) {
   const stabilizedThis = array.map((el, index) => [el, line(el), index]);
   stabilizedThis.sort((a, b) => {
@@ -53,7 +53,7 @@ function stableSort(array, comparator, line) {
   });
   return stabilizedThis.map((el) => el[0]);
 }
-  
+
 const reducer = (state, action) => {
   switch (action.type) {
     case 'setSelected':
@@ -108,7 +108,7 @@ const reducer = (state, action) => {
       return state;
   }
 };
-  
+
 const initialState = (defaultRowsPerPage) => ({
   selected: [],
   page: 0,
@@ -119,7 +119,7 @@ const initialState = (defaultRowsPerPage) => ({
   open: undefined,
   loading: false
 });
-  
+
 const ArgousComplexTable = forwardRef(({ 
   ToolbarComponent = ArgousComplexTableToolbar,
   HeadComponent = ArgousComplexTableHead,
@@ -180,31 +180,60 @@ const ArgousComplexTable = forwardRef(({
   code = '',
   token = ''
 }, ref) => {
+
   const classes = useStyles();
   const [state, dispatch] = useReducer(reducer, initialState(defaultRowsPerPage));
   const memoState = useMemo(() => ({ ...state, dispatch }), [state, dispatch]);
   const { selected, page, rowsPerPage, order, orderBy, filter, open } = memoState;
-  
+
   const [lista, setLista] = useState(dados/*.map(linha => isArray(linha) ? linha : Object.values(linha))*/ || []);
   const [ctrlPgn, setCtrlPgn] = useState({ qtRegs: defaultRowsPerPage, pgAtl: 1 });
   const { qtRegs, pgAtl, ordCols } = ctrlPgn;
-  
+
   const enableCheck = checkEnabled || (enableCheckIfSelected && !!selected.length);
-  
+
+  const dadosNaoCortados = useMemo(() => {
+    if (method) return lista || [];
+    if (isArray(lista) && lista.length > 0) return stableSort(lista, getComparator(order, orderBy), line)
+      .filter(linha => isArray(line(linha)) ? line(linha).filter(item => filter ? new RegExp(`.*${filter}.*`, 'gi').test(item?.toString()) : true).length > 0 : true) || [];
+    return [];
+  }, [lista, filter, order, orderBy, method, line]);
+
+  const usePagination = ((rowsPerPageOptions !== 0) && (Math.ceil(((method || externalCtrlPgn) ? ctrlPgn.recordCount : dadosNaoCortados.length) / parseInt(rowsPerPageOptions[0], 10)) > 1));
+
+  const cortaDados = useCallback((dados) => dados
+    ?.slice(defaultRowsPerPage === 0 ? (undefined) : page * rowsPerPage, defaultRowsPerPage === 0 ? (undefined) : page * rowsPerPage + rowsPerPage),
+  [page, rowsPerPage, defaultRowsPerPage]);
+
+  const fillListToKeepHeight = useCallback((array) => {
+    let newArray = [...array];
+    if (newArray.length < rowsPerPage) {
+      const gap = (rowsPerPage - newArray.length);
+      const arrayToFillGap = Array.from(Array(gap)).fill(Array.from(Array(head.length)).fill(''));
+      newArray.push(...arrayToFillGap);
+    }
+    return newArray;
+  }, [head, rowsPerPage]);
+
+  const dadosMostrados = useMemo(() => {
+    if (method || externalCtrlPgn) return (usePagination) ? fillListToKeepHeight(lista || []) : (lista || []);
+    return (usePagination) ? fillListToKeepHeight(cortaDados(dadosNaoCortados) || []) : (cortaDados(dadosNaoCortados) || []);
+  }, [method, externalCtrlPgn, lista, dadosNaoCortados, cortaDados, usePagination, fillListToKeepHeight]);
+
   useEffect(() => {
     dispatch({ type: 'mount', value: savedState.current });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  
+
   useEffect(() => {
-    return () => savedState.current = state;    
+    return () => savedState.current = state;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state]);
-  
+
   useEffect(() => {
     if (isArray(dados)) setLista(dados/*.map(linha => isArray(linha) ? linha : Object.values(linha))*/ || []);
   }, [dados]);
-  
+
   const retornaAcao = useCallback((pgAtl, page) => {
     if (page === pgAtl) return undefined;
     else if (page === pgAtl + 1) return 'N';
@@ -213,7 +242,7 @@ const ArgousComplexTable = forwardRef(({
     else if (page === 0) return 'F';
     return `S=${page}`;
   }, [ctrlPgn.recordCount]);
-  
+
   const buscaMetodo = useCallback(async () => {
     if (!method || !allowMethodRequest) return;
     dispatch({ type: 'setLoading', value: true });
@@ -233,45 +262,29 @@ const ArgousComplexTable = forwardRef(({
     dispatch({ type: 'setLoading', value: false });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [method, allowMethodRequest, qtRegs, pgAtl, retornaAcao, ctrlPgn.pgAtl, page, orderBy, order, methodPrms, handleMethodError, methodResultList, code, token]);
-  
+
   useEffect(() => {
     buscaMetodo();
   }, [buscaMetodo]);
-  
+
   const fielValue = useMemo(() => /*isArray(getField(field, 'value')) ? */getField(field, 'value')/*?.map(item => isArray(item) ? item : Object.values(item)) : []*/, [field]);
-    
+
   useEffect(() => {
     if (field && !isEqual(lista, fielValue)) setLista(fielValue || []);
   }, [field, lista, fielValue]);
-  
+
   useEffect(() => {
     if (method || field || externalCtrlPgn) return;
     if (isArray(lista) && lista.length > 0 && page === Math.ceil(method ? ctrlPgn.recordCount : lista.length / parseInt(rowsPerPage, 10))) dispatch({ type: 'decremmentPage' });
   }, [page, method, lista.length, rowsPerPage, ctrlPgn.recordCount, lista, field, externalCtrlPgn]);
-  
+
   useEffect(() => dispatch({ type: 'setSelected', value: [] }), [lista]);
-    
+
   useEffect(() => {
     if (onSelect) onSelect(selected);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selected]);
-  
-  const dadosNaoCortados = useMemo(() => {
-    if (method) return lista || [];
-    if (isArray(lista) && lista.length > 0) return stableSort(lista, getComparator(order, orderBy), line)
-      .filter(linha => isArray(line(linha)) ? line(linha).filter(item => filter ? new RegExp(`.*${filter}.*`, 'gi').test(item?.toString()) : true).length > 0 : true) || [];
-    return [];
-  }, [lista, filter, order, orderBy, method, line]);
-  
-  const cortaDados = useCallback((dados) => dados
-    ?.slice(defaultRowsPerPage === 0 ? (undefined) : page * rowsPerPage, defaultRowsPerPage === 0 ? (undefined) : page * rowsPerPage + rowsPerPage),
-  [page, rowsPerPage, defaultRowsPerPage]);
-  
-  const dadosMostrados = useMemo(() => {
-    if (method || externalCtrlPgn) return lista || [];
-    return cortaDados(dadosNaoCortados) || [];
-  }, [method, externalCtrlPgn, lista, dadosNaoCortados, cortaDados]);
-  
+
   const handleOpenClose = useCallback((index) => {
     if (index === open || (!index && index !== 0)) {
       dispatch({ type: 'setOpen', value: undefined });
@@ -281,7 +294,7 @@ const ArgousComplexTable = forwardRef(({
       if (onOpen) onOpen({ linhaOriginal: dadosMostrados[index], linhaFormatada: line(dadosMostrados[index]) });
     }
   }, [open, onClose, onOpen, dadosMostrados, dispatch, line]);
-    
+
   useImperativeHandle(ref, () => ({
     setOpen: index => handleOpenClose(index),
     getOpen: dadosMostrados[open],
@@ -353,7 +366,7 @@ const ArgousComplexTable = forwardRef(({
               }}/>
             {FooterComponent && <FooterComponent {...footerProps}/>}
           </Table>
-          {((rowsPerPageOptions !== 0) && (Math.ceil(((method || externalCtrlPgn) ? ctrlPgn.recordCount : dadosNaoCortados.length) / parseInt(rowsPerPageOptions[0], 10)) > 1)) && (
+          {(usePagination) && (
             <PaginationComponent
               count={(method || externalCtrlPgn) ? ctrlPgn.recordCount : dadosNaoCortados.length}
               onChangePage={(_, value) => {
@@ -373,7 +386,7 @@ const ArgousComplexTable = forwardRef(({
     </TableContext.Provider>
   );
 });
-  
+
 ArgousComplexTable.propTypes = {
   dados: PropTypes.array,
   head: PropTypes.array,
@@ -411,5 +424,5 @@ ArgousComplexTable.propTypes = {
   externalCtrlPgn: PropTypes.object,
   setExternalCtrlPgn: PropTypes.func
 };
-  
+
 export default memo(ArgousComplexTable, isEqual);

package/lib/components/ArgousComplexTableBody/ArgousComplexTableBody.js

@@ -37,6 +37,18 @@ const useStyles = makeStyles(theme => ({
   loading: {
     textAlign: 'center',
     padding: '7px'
+  },
+  ghost: {
+    borderBottom: '1px solid #0000',
+    userSelect: 'none',
+    '&:hover': {
+      backgroundColor: '#0000 !important'
+    }
+  },
+  tableCell: {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis'
   }
 }));
 
@@ -96,10 +108,13 @@ const ArgousComplexTableBody = memo(({
         {loading ? (
           <TableRow><TableCell className={classes.loading} colSpan={dadosMostrados?.length && line(dadosMostrados[0])?.length + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0)}><CircularProgress disableShrink/></TableCell></TableRow>
         ) : dadosMostrados.length ? dadosMostrados.map((linha, i) => {
+
           const isItemSelected = isSelected(linha[indexToSelect]);
           const isItemOpen = i === open;
-
+          const fullyEmpty = !linha.some((value) => !!value);
           const { title, ...rowProperties } = rowProps({ index: i, linhaOriginal: linha, linhaFormatada: line(linha), itensSelecionados: selected }) || {};
+
+
           return <Draggable key={customKey ? lista[i][customKey] : i} render={draggableRef => (
             //TODO criar proprio draggable pois esse remove classes do filho
             <Fragment>
@@ -107,15 +122,25 @@ const ArgousComplexTableBody = memo(({
                 <TableRow
                   component={Draggable}
                   {...rowProperties}
-                  className={clsx({ [classes.hover]: isItemSelected, [classes.open]: isItemOpen && !!children }, lineClass(line(linha), linha, i), rowProperties.className)}
+                  className={
+                    clsx(
+                      { 
+                        [classes.hover]: isItemSelected, 
+                        [classes.open]: (isItemOpen && !!children), 
+                        [classes.ghost]: fullyEmpty 
+                      }, 
+                      lineClass(line(linha), linha, i), 
+                      rowProperties.className
+                    )
+                  }
                   hover
                   role='checkbox'
                   tabIndex={-1}
                   selected={isItemSelected}
                   style={lineStyle ? lineStyle(linha, line(linha), i) : undefined}
-                  onClick={onClick ? e => onClick(e, linha, line(linha), i) : children ? () => handleOpenClose(i) : undefined}
-                  onDoubleClick={onDoubleClick ? e => onDoubleClick(e, linha, line(linha), i) : undefined}
-                  innerRef={draggableRef} 
+                  onClick={(fullyEmpty) ? undefined : (onClick) ? e => onClick(e, linha, line(linha), i) : (children) ? () => handleOpenClose(i) : undefined}
+                  onDoubleClick={(fullyEmpty) ? undefined : (onDoubleClick) ? e => onDoubleClick(e, linha, line(linha), i) : undefined}
+                  innerRef={draggableRef}
                 >
                   {enableDrag && <TableCell padding='checkbox'>
                     <Tooltip title='Arrastar'>
@@ -131,7 +156,25 @@ const ArgousComplexTableBody = memo(({
                     }} checked={isItemSelected} />
                   </TableCell>}
                   {isArray(line(linha)) && line(linha).map((coluna, j) => (
-                    <TableCell key={j} {...columnProps(j, coluna, linha, line(linha))} style={columnStyles ? columnStyles[j] : undefined}>{getCellContent(coluna, dadosMostrados[i], j, i)}</TableCell>
+                    (fullyEmpty) ? (
+                      <TableCell 
+                        key={j} 
+                        {...columnProps(j, coluna, linha, line(linha))} 
+                        style={columnStyles ? columnStyles[j] : undefined} 
+                        className={clsx(classes.tableCell, classes.ghost)}
+                      >
+                        &nbsp;
+                      </TableCell>
+                    ) : (
+                      <TableCell 
+                        key={j} 
+                        {...columnProps(j, coluna, linha, line(linha))} 
+                        style={columnStyles ? columnStyles[j] : undefined} 
+                        className={classes.tableCell}
+                      >
+                        {getCellContent(coluna, dadosMostrados[i], j, i)}
+                      </TableCell>
+                    )
                   ))}
                 </TableRow>
               </CustomTooltip>
@@ -139,7 +182,7 @@ const ArgousComplexTableBody = memo(({
                 <TableRow className={classes.group}>
                   <TableCell colSpan={dadosMostrados?.length && line(dadosMostrados[0])?.length + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0)} style={{ padding: open === i ? 8 : 0 }} className='argous-complex-table-group-cell'>
                     <Collapse in={open === i} mountOnEnter unmountOnExit>
-                      {typeof children === 'function' ? children({ linha: line(linha), linhaOriginal: linha, index: i }) : children}                  
+                      {typeof children === 'function' ? children({ linha: line(linha), linhaOriginal: linha, index: i }) : children}
                     </Collapse>
                   </TableCell>
                 </TableRow>
@@ -158,5 +201,5 @@ export const CustomTooltip = ({ title, children }) => {
   if (title) return <Tooltip arrow title={title}>
     {children}
   </Tooltip>;
-  return children; 
+  return children;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "argous",
-  "version": "1.2.231",
+  "version": "1.2.232",
   "description": "Argous.",
   "main": "lib/index.js",
   "author": "Carlos Schneider",