es-grid-template 1.1.7 → 1.2.0

package/es/grid-component/table/Grid.d.ts

@@ -1,8 +1,11 @@
 import React from 'react';
 import type { ColumnsTable, GridTableProps } from "../type";
+import type { GetRowKey } from "../type";
 type Props<T> = GridTableProps<T> & {
     tableRef: any;
     triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
+    triggerChangeData?: (newData: T[], type: string) => void;
+    getRowKey: GetRowKey<T>;
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;

package/es/grid-component/table/Grid.js

@@ -4,12 +4,11 @@ import { GridStyle } from "../GridStyle";
 import TableGrid from "../TableGrid";
 // import type {ColumnsTable} from "../type";
 
-// import {renderContent} from "../hooks/useColumns";
-
 const Grid = props => {
   const {
     height,
     style,
+    rowHoverable,
     ...rest
   } = props;
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
@@ -21,7 +20,8 @@ const Grid = props => {
     style: {
       ...style,
       minHeight: height
-    }
+    },
+    rowHoverable: rowHoverable ?? true
   }))));
 };
 export default Grid;

package/es/grid-component/table/GridEdit.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useEffect, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import classNames from "classnames";
-import { Form } from "antd";
+import { Button, Dropdown, Form } from "antd";
 import { useForm } from 'react-hook-form';
 import { Toaster } from "react-hot-toast";
-import { renderContent } from "../hooks/useColumns";
+import { flatColumns, renderContent } from "../hooks/useColumns";
 import EditableCell from "../EditableCell";
 import { GridStyle } from "../GridStyle";
 import { TableContext } from "../useContext";
@@ -13,9 +13,13 @@ import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
-import { getEditType, isObjEmpty, totalFixedWidth } from "../hooks";
+import { getEditType, getRowNumber, isObjEmpty, totalFixedWidth } from "../hooks";
 import Message from "../../Message/Message";
-import Command from "../Command";
+
+// import Command from "../Command";
+
+import { Toolbar } from "rc-master-ui";
+import classnames from "classnames";
 dayjs.extend(customParseFormat);
 const toast = 'top-right';
 const GridEdit = props => {
@@ -37,6 +41,7 @@ const GridEdit = props => {
     style,
     getRowKey,
     className,
+    toolbarItems,
     ...rest
   } = props;
 
@@ -47,11 +52,78 @@ const GridEdit = props => {
   const startCell = useRef(null);
   const isSelectingRow = useRef(false);
   const rowStart = useRef(null);
+  const itemsAdd = [{
+    key: '10',
+    label: '10 rows'
+  }, {
+    key: '50',
+    label: '50 rows'
+  }, {
+    key: '100',
+    label: '100 rows'
+  }];
   const [form] = Form.useForm();
   const [editingKey, setEditingKey] = useState('');
   const [selectedCells, setSelectedCells] = useState(new Set());
   const [rowsSelected, setRowsSelected] = useState(new Set());
   const [selectedCell, setSelectedCell] = useState(null);
+  const handleAdd = item => {
+    console.log(item);
+    if (item.onClick) {
+      console.log('cccccccccccccccc');
+    } else {
+      console.log('bbbbbbbbbbbbb');
+    }
+  };
+  const handleDuplicate = () => {};
+  const handleInsertBefore = () => {};
+  const handleInsertAfter = () => {};
+  const handleDeleteAll = () => {};
+  const toolbarItemsBottom = useMemo(() => {
+    return toolbarItems?.filter(it => it.position === 'Bottom').map(item => {
+      return {
+        ...item,
+        template: () => {
+          return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
+            className: classnames(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+            menu: {
+              items: itemsAdd,
+              onClick: () => handleAdd(item)
+            }
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item')), item.key === 'DUPLICATE' && item.visible !== false && editingKey && /*#__PURE__*/React.createElement("div", {
+            className: classnames(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/React.createElement(Button, {
+            color: "green",
+            variant: 'outlined',
+            onClick: handleDuplicate,
+            className: "d-flex be-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Duplicate') : 'Duplicate')), item.key === 'INSERT_BEFORE' && item.visible !== false && editingKey && /*#__PURE__*/React.createElement("div", {
+            className: classnames(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/React.createElement(Button, {
+            color: "green",
+            variant: 'outlined',
+            onClick: handleInsertBefore,
+            className: "d-flex be-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item before') : 'Insert item before')), item.key === 'INSERT_AFTER' && item.visible !== false && editingKey && /*#__PURE__*/React.createElement("div", {
+            className: classnames(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/React.createElement(Button, {
+            color: "green",
+            variant: 'outlined',
+            onClick: handleInsertAfter,
+            className: "d-flex be-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item after') : 'Insert item after')), item.key === 'DELETE' && item.visible !== false && /*#__PURE__*/React.createElement("div", {
+            className: classnames(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/React.createElement(Button, {
+            color: "primary",
+            variant: 'outlined',
+            onClick: handleDeleteAll,
+            className: "d-flex be-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Delete all item') : 'Delete all item')));
+        }
+      };
+    });
+  }, [toolbarItems]);
   const {
     control,
     handleSubmit,
@@ -83,9 +155,10 @@ const GridEdit = props => {
 
         if (!tableBody.contains(event.target)) {
           setEditingKey('');
-          // isSelecting.current = false;
-          // startCell.current = null;
+          isSelecting.current = false;
+          startCell.current = null;
           setSelectedCells(new Set());
+          setRowsSelected(new Set());
         } else {}
       }
     };
@@ -574,175 +647,166 @@ const GridEdit = props => {
       }
     }
   };
-  const addResizeHandlers = (cols, parentPath = []) => {
-    return cols.map((col, colIndex) => {
-      const currentPath = [...parentPath, colIndex];
-      if (!col?.dataIndex && !col.key) {
-        return col;
-      }
-      if (col.children) {
-        return {
-          ...col,
-          children: addResizeHandlers(col.children, currentPath)
-        };
-      }
-      if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.dataIndex === '#') {
-        return {
-          ...col,
-          className: 'rc-ui-cell-editable',
-          render: (value, record, rowIndex) => {
-            return /*#__PURE__*/React.createElement("div", {
-              className: classNames('ui-rc_cell-content ui-rc_cell-content--index', {
-                selected: rowsSelected.has(`${rowIndex}-${colIndex}`),
-                focus: selectedCells && Array.from(selectedCells).some(item => item.startsWith(`${rowIndex}-`))
-              }),
-              onMouseDown: event => handleMouseDownColIndex(rowIndex, colIndex, event),
-              onMouseEnter: event => handleMouseEnterColIndex(rowIndex, colIndex, event),
-              onClick: () => handleClickRowHeader(rowIndex, colIndex)
-            }, /*#__PURE__*/React.createElement("div", {
-              className: 'ui-rc_content'
-            }, rowIndex + 1));
-          }
-        };
-      }
-      if (col.dataIndex === 'command' || col.field === 'command') {
-        return {
-          ...col,
-          title: col.headerText ?? col.title,
-          ellipsis: col.ellipsis !== false,
-          onCell: () => ({
-            className: 'ui-rc-cell-command'
-          }),
-          // render: (value: any, record: any, rowIndex: number) => {
-          render: () => {
-            return /*#__PURE__*/React.createElement("div", {
-              className: classNames('ui-rc-cell-command__content', {})
-            }, col.commandItems && col.commandItems?.map((item, indexComm) => {
-              if (item.visible !== false) {
-                // return  (
-                //   <span>{item.title}</span>
-                // )
-
-                return /*#__PURE__*/React.createElement(Command, {
-                  key: `command-${indexComm}`,
-                  item: item,
-                  onClick: e => {
-                    e.preventDefault();
-                    // handleCommandClick({command: item, rowData: record, index: rowIndex})
-                  }
-                });
-              }
-            }));
-          }
-        };
-      }
+  const convertColumns = flatColumns(columns).map((column, colIndex) => {
+    if (!column?.field && !column?.key) {
+      return column;
+    }
+    if (column.dataIndex === 'index' || column.field === 'index' || column.dataIndex === '#' || column.dataIndex === '#') {
       return {
-        ...col,
-        onCell: (record, rowIndex) => ({
-          onKeyDown: event => {
-            if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
-              if (!isEditing(record) && record[rowKey] !== editingKey) {
-                handleEdit(record, col, col.editType, event);
-              }
-              if (editingKey && editingKey !== '' && (rowIndex ?? 0) + 1 < dataSource.length && event.key === 'Enter') {
-                handleFocusCell((rowIndex ?? 0) + 1, colIndex, col, 'vertical', event);
-              }
-            }
-            if (event.key === 'Tab') {
-              if (colIndex + 1 !== cols.length) {
-                handleFocusCell(rowIndex, colIndex + 1, col, 'horizontal', event);
-              } else {
-                event.stopPropagation();
-                event.preventDefault();
-              }
-            }
-            if (event.key === 'ArrowRight' && colIndex + 1 !== cols.length) {
-              if (editingKey !== '') {} else {
-                handleFocusCell(rowIndex, colIndex + 1, col, 'horizontal', event);
-              }
-            }
-            if (event.key === 'ArrowLeft' && colIndex > 0) {
-              if (!col.dataIndex && !col.key || col.field === 'index' || col.field === '#' || col.dataIndex === 'index' || col.dataIndex === '#') {
-                event.stopPropagation();
-                event.preventDefault();
-              } else {
-                if (editingKey !== '') {} else {
-                  handleFocusCell(rowIndex, colIndex - 1, col, 'horizontal', event);
-                }
-              }
-            }
-            if (event.key === 'ArrowDown' && (rowIndex ?? 0) + 1 < dataSource.length) {
-              handleFocusCell((rowIndex ?? 0) + 1, colIndex, col, 'vertical', event);
-            }
-            if (event.key === 'ArrowUp' && (rowIndex ?? 0) > 0) {
-              handleFocusCell((rowIndex ?? 0) - 1, colIndex, col, 'vertical', event);
-            }
-          },
-          onPaste: event => {
-            if (editingKey === '') {
-              handlePaste(event, colIndex, rowIndex);
-              event.preventDefault();
-            }
-          },
-          onCopy: e => {
-            if (editingKey === '') {
-              handleCopy(e);
-              e.preventDefault();
-            }
-          },
-          onDoubleClick: event => {
-            if (!isEditing(record) && record[rowKey] !== editingKey) {
-              handleEdit(record, col, col.editType, event);
-            }
-          },
-          // onMouseDown: (event) => {
-          //   handleMouseDown(rowIndex, colIndex, event)
-          // },
-          //
-          // onMouseEnter: () => {
-          //   handleMouseEnter(rowIndex, colIndex)
-          // },
-
-          onClick: () => {
-            if (record[rowKey] !== editingKey && editingKey !== '') {
-              setEditingKey('');
-            }
-          },
-          className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
-          record,
-          column: col,
-          editType: getEditType(col, record),
-          dataIndex: col.dataIndex,
-          title: col.title,
-          'data-col-index': colIndex,
-          'data-row-index': rowIndex,
-          // colIndex: colIndex,
-          indexCol: colIndex,
-          indexRow: rowIndex,
-          editing: isEditing(record),
-          tabIndex: (rowIndex ?? 0) * columns.length + colIndex
-        }),
-        // onHeaderCell: (data) => ({
-        //   ...col.onHeaderCell(),
-        //   onClick: () => {
-        //     handleClickColHeader(data as ColumnTable, colIndex)
-        //   }
-        // }),
+        ...column,
+        className: 'rc-ui-cell-editable',
         render: (value, record, rowIndex) => {
+          const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
           return /*#__PURE__*/React.createElement("div", {
-            className: classNames('ui-rc_cell-content', {
-              selected: selectedCells.has(`${rowIndex}-${colIndex}`)
+            className: classNames('ui-rc_cell-content ui-rc_cell-content--index', {
+              selected: rowsSelected.has(`${rowNumber}-${colIndex}`),
+              focus: selectedCells && Array.from(selectedCells).some(item => item.startsWith(`${rowNumber}-`))
             }),
-            onMouseDown: event => handleMouseDown(rowIndex, colIndex, event),
-            onMouseEnter: () => handleMouseEnter(rowIndex, colIndex)
+            onMouseDown: event => handleMouseDownColIndex(rowNumber, colIndex, event),
+            onMouseEnter: event => handleMouseEnterColIndex(rowNumber, colIndex, event),
+            onClick: () => handleClickRowHeader(rowNumber, colIndex)
           }, /*#__PURE__*/React.createElement("div", {
             className: 'ui-rc_content'
-          }, renderContent(col, value, record, rowIndex, format)));
+          }, rowIndex + 1));
         }
       };
+    }
+    if ((column.key || column.field) === 'command') {
+      return {
+        ...column
+      };
+    }
+    return {
+      ...column,
+      // editType: getEditType(column, record),
+      onCell: (record, rowIndex) => ({
+        onKeyDown: event => {
+          if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
+            if (!isEditing(record) && record[rowKey] !== editingKey) {
+              handleEdit(record, column, column.editType, event);
+            }
+            if (editingKey && editingKey !== '' && (rowIndex ?? 0) + 1 < dataSource.length && event.key === 'Enter') {
+              handleFocusCell((rowIndex ?? 0) + 1, colIndex, column, 'vertical', event);
+            }
+          }
+          if (event.key === 'Tab') {
+            if (colIndex + 1 !== columns.length) {
+              handleFocusCell(rowIndex, colIndex + 1, column, 'horizontal', event);
+            } else {
+              event.stopPropagation();
+              event.preventDefault();
+            }
+          }
+          if (event.key === 'ArrowRight' && colIndex + 1 !== columns.length) {
+            if (editingKey !== '') {} else {
+              handleFocusCell(rowIndex, colIndex + 1, column, 'horizontal', event);
+            }
+          }
+          if (event.key === 'ArrowLeft' && colIndex > 0) {
+            if (!column.dataIndex && !column.key || column.field === 'index' || column.field === '#' || column.dataIndex === 'index' || column.dataIndex === '#') {
+              event.stopPropagation();
+              event.preventDefault();
+            } else {
+              if (editingKey !== '') {} else {
+                handleFocusCell(rowIndex, colIndex - 1, column, 'horizontal', event);
+              }
+            }
+          }
+          if (event.key === 'ArrowDown' && (rowIndex ?? 0) + 1 < dataSource.length) {
+            handleFocusCell((rowIndex ?? 0) + 1, colIndex, column, 'vertical', event);
+          }
+          if (event.key === 'ArrowUp' && (rowIndex ?? 0) > 0) {
+            handleFocusCell((rowIndex ?? 0) - 1, colIndex, column, 'vertical', event);
+          }
+        },
+        onPaste: event => {
+          if (editingKey === '') {
+            handlePaste(event, colIndex, rowIndex);
+            event.preventDefault();
+          }
+        },
+        onCopy: e => {
+          if (editingKey === '') {
+            handleCopy(e);
+            e.preventDefault();
+          }
+        },
+        onDoubleClick: event => {
+          if (!isEditing(record) && record[rowKey] !== editingKey) {
+            handleEdit(record, column, getEditType(column, record), event);
+          }
+        },
+        onClick: () => {
+          if (record[rowKey] !== editingKey && editingKey !== '') {
+            setEditingKey('');
+          }
+        },
+        className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
+        record,
+        column: column,
+        editType: getEditType(column, record),
+        dataIndex: column.dataIndex,
+        title: column.title,
+        'data-col-index': colIndex,
+        'data-row-index': rowIndex,
+        // colIndex: colIndex,
+        indexCol: colIndex,
+        indexRow: rowIndex,
+        editing: isEditing(record),
+        tabIndex: (rowIndex ?? 0) * columns.length + colIndex
+      }),
+      render: (value, record, rowIndex) => {
+        const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
+        return /*#__PURE__*/React.createElement("div", {
+          className: classNames('ui-rc_cell-content', {
+            // selected: selectedCells.has(`${record[rowKey]}-${colIndex}`)
+            selected: selectedCells.has(`${rowNumber}-${colIndex}`)
+          }),
+          onMouseDown: event => handleMouseDown(rowNumber, colIndex, event)
+          // onMouseEnter={() => handleMouseEnter(record[rowKey], colIndex)}
+          ,
+          onMouseEnter: () => handleMouseEnter(rowNumber, colIndex)
+        }, /*#__PURE__*/React.createElement("div", {
+          className: 'ui-rc_content'
+        }, renderContent(column, value, record, rowIndex, format)));
+      }
+    };
+  });
+  const transformColumns = React.useCallback(cols => {
+    // @ts-ignore
+    return cols.map(column => {
+      const find = convertColumns.find(it => it.key === column.key);
+      if (!column?.field && !column?.key) {
+        return column;
+      }
+      if (find) {
+        return {
+          ...find
+        };
+      }
+
+      // Xử lý đệ quy cho children
+      if (column.children?.length) {
+        return {
+          ...column,
+          children: transformColumns(column.children)
+        };
+      }
     });
+  }, [convertColumns]);
+  const mergedColumns = React.useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
+  const bottomToolbar = () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Toolbar, {
+      style: {
+        width: '100%'
+      },
+      items: toolbarItemsBottom ?? [],
+      mode: 'scroll'
+      // onClick={({  item }) => {
+      //   console.log('item', item)
+      // }}
+    }));
   };
-  const resizableColumns = addResizeHandlers(columns);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     heightTable: height,
     style: {
@@ -774,11 +838,12 @@ const GridEdit = props => {
     },
     className: classNames(className, 'grid-editable'),
     rowKey: rowKey,
-    columns: resizableColumns,
+    columns: mergedColumns,
     showSorterTooltip: {
       target: 'sorter-icon'
     },
     format: format,
+    toolbarItems: toolbarItems,
     selectionSettings: selectionSettings ? {
       ...selectionSettings,
       checkboxOnly: true
@@ -787,7 +852,8 @@ const GridEdit = props => {
       ...style,
       minHeight: height
     },
-    rowHoverable: false
+    rowHoverable: false,
+    bottomToolbar: bottomToolbar
   }))))), /*#__PURE__*/React.createElement(Toaster, {
     position: toast,
     toastOptions: {

package/es/grid-component/type.d.ts

@@ -3,12 +3,16 @@ import type React from "react";
 import type { IOperator } from "./hooks";
 import type { TypeFilter, TableProps as RcTableProps, TableColumnType as RcColumnType, EditType } from "rc-master-ui";
 import type { FilterOperator, TableRowSelection } from "rc-master-ui/es/table/interface";
-import type { ToolbarItem } from "rc-master-ui/es/toolbar";
+import type { ToolbarItem as RcToolbarItem } from "rc-master-ui/es/toolbar";
 import type { ItemType } from "rc-master-ui/es/menu/interface";
 import type { FieldNames, FilterFunc } from "rc-select/es/Select";
 import type { ColorPickerProps } from "antd";
 export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
 export type AnyObject = Record<PropertyKey, any>;
+export type ToolbarItem = Omit<RcToolbarItem, 'position'> & {
+    position?: 'Top' | 'Bottom';
+    onClick?: (args: any) => void;
+};
 export type SelectMode = 'checkbox' | 'radio' | undefined;
 export type ITextAlign = 'center' | 'left' | 'right';
 export type Frozen = 'left' | 'right' | 'Left' | 'Right';
@@ -104,7 +108,7 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     children?: ColumnType<RecordType>[];
 };
 export type ColumnEditType<RecordType> = Omit<ColumnType<RecordType>, 'children'> & {
-    editType?: EditType | ((rowData?: any) => EditType);
+    editType?: EditType | ((rowData?: RecordType) => EditType);
     disable?: boolean | ((rowData: any) => boolean);
     isClearable?: boolean;
     maxDate?: any;

package/lib/grid-component/ColumnsChoose.js

@@ -163,7 +163,7 @@ const ColumnsChoose = props => {
       style: {
         marginBottom: 8
       },
-      placeholder: "Search",
+      placeholder: t ? t("Search") : 'Search',
       prefix: /*#__PURE__*/_react.default.createElement(_SearchOutlined.default, null),
       onChange: onChange
     }), /*#__PURE__*/_react.default.createElement(_tree.default, {

package/lib/grid-component/GridStyle.js

@@ -9,4 +9,4 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})([".ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;z-index:-1;}}.react-resizable{position:relative;background-clip:padding-box;}.react-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined, props => props.heightTable ? `${props.heightTable}px` : undefined);
+})([".ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;z-index:-1;}&.pagination-template{&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;z-index:-1;}}}.react-resizable{position:relative;background-clip:padding-box;}.react-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : '50px', props => props.heightTable ? `${props.heightTable}px` : '50px');