linkmore-design 1.1.21 → 1.1.22-beta.1

package/es/LmTable/Table.js

@@ -9,12 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Summary = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
@@ -45,14 +45,8 @@ var _Empty = _interopRequireDefault(require("../Empty"));
 
 var _DndContainer = _interopRequireDefault(require("./components/DndContainer"));
 
-var _sortableBoxCol = _interopRequireDefault(require("./components/sortableBoxCol"));
-
-var _sortableItemCol = _interopRequireDefault(require("./components/sortableItemCol"));
-
 var _sheelTableCell = _interopRequireDefault(require("./components/sheelTableCell"));
 
-var _tableChartsModal = _interopRequireDefault(require("./components/tableChartsModal"));
-
 var _customRenderEmpty = _interopRequireDefault(require("./components/customRenderEmpty"));
 
 var _util = require("./util");
@@ -63,9 +57,15 @@ var _virTual = require("./virTual");
 
 var _useGroupDataSource3 = _interopRequireDefault(require("./hooks/useGroupDataSource"));
 
-var _excluded = ["columns", "dataSource", "autoSize", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "colSortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "openSheet", "editSheet", "dataChange", "groupRowKeys", "groupColKeys", "emptyProps"],
+var _useDndItems2 = _interopRequireDefault(require("./hooks/useDndItems"));
+
+var _HeaderCol = _interopRequireDefault(require("./components/HeaderCol"));
+
+var _index = require("./common/index");
+
+var _excluded = ["columns", "dataSource", "autoSize", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "colSortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "openSheet", "editSheet", "dataChange", "openColGroup", "colGroupTitle", "openRowGroup", "rowGroupTitle", "groupWidth", "emptyProps"],
     _excluded2 = ["className", "style"],
-    _excluded3 = ["onResize", "width", "onResizeStop"];
+    _excluded3 = ["onResize", "width", "dataIndex", "onResizeStop"];
 var Summary = _proTable.default.Summary;
 exports.Summary = Summary;
 var ConfigContext = _ConfigProvider.default.ConfigContext;
@@ -136,8 +136,11 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       _props$editSheet = props.editSheet,
       editSheet = _props$editSheet === void 0 ? false : _props$editSheet,
       dataChange = props.dataChange,
-      groupRowKeys = props.groupRowKeys,
-      groupColKeys = props.groupColKeys,
+      openColGroup = props.openColGroup,
+      colGroupTitle = props.colGroupTitle,
+      openRowGroup = props.openRowGroup,
+      rowGroupTitle = props.rowGroupTitle,
+      groupWidth = props.groupWidth,
       emptyProps = props.emptyProps,
       resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _resetProps$rowKey = resetProps.rowKey,
@@ -167,11 +170,6 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       setActiveKey = _useState2[1]; // 行选中
 
 
-  var _useState3 = (0, _react.useState)([]),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      useColumns = _useState4[0],
-      setColumns = _useState4[1];
-
   var tableWarpRef = (0, _react.useRef)(null);
   var dataSourceRef = (0, _react.useRef)(null);
   var columnsRef = (0, _react.useRef)(null);
@@ -180,17 +178,31 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var contentMenuRef = (0, _react.useRef)(null);
   /** 当前展开的列 */
 
-  var _useState5 = (0, _react.useState)([]),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      expandedRowKeys = _useState6[0],
-      setExpandedRowKeys = _useState6[1];
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      expandedRowKeys = _useState4[0],
+      setExpandedRowKeys = _useState4[1];
 
   var deepDataSourceRef = (0, _react.useRef)([]);
   var deepColumnsRef = (0, _react.useRef)([]); //
 
-  var copyAllData = (0, _react.useRef)(null);
+  var copyAllData = (0, _react.useRef)(null); //
+
+  var _useDndItems = (0, _useDndItems2.default)({
+    columns: customizeColumns,
+    openColGroup: openColGroup,
+    openRowGroup: openRowGroup,
+    colSortOpen: colSortOpen,
+    filterChange: filterChange
+  }),
+      dndColumns = _useDndItems.dndColumns,
+      items = _useDndItems.items,
+      groupRowKeys = _useDndItems.groupRowKeys,
+      groupColKeys = _useDndItems.groupColKeys,
+      updateItems = _useDndItems.updateItems;
   /** 记录最原始数据 */
 
+
   (0, _react.useEffect)(function () {
     dataSourceRef.current = customizeDataSource;
   }, [customizeDataSource]);
@@ -213,12 +225,12 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (!(groupColKeys === null || groupColKeys === void 0 ? void 0 : groupColKeys.length)) {
       return {
         dataSource: groupDataSource,
-        columns: customizeColumns
+        columns: dndColumns
       };
     }
 
-    return (0, _util.transformWithColGroup)(customizeColumns, groupDataSource, groupColKeys);
-  }, [customizeColumns, groupDataSource, groupColKeys]),
+    return (0, _util.transformWithColGroup)(dndColumns, groupDataSource, groupColKeys);
+  }, [dndColumns, groupDataSource, groupColKeys]),
       columns = _useMemo.columns,
       dataSource = _useMemo.dataSource;
 
@@ -229,7 +241,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [groupRowKeys, groupColKeys]);
   /** sheel数据的表格 */
 
-  var _useState7 = (0, _react.useState)({
+  var _useState5 = (0, _react.useState)({
     // 记录框选的行列坐标信息
     start: {},
     end: {},
@@ -242,9 +254,9 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     // 记录右下角小方块的拖动信息
     commiting: {}
   }),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      sheelStataus = _useState8[0],
-      setSheelStatus = _useState8[1];
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      sheelStataus = _useState6[0],
+      setSheelStatus = _useState6[1];
 
   var shellStatusRef = (0, _react.useRef)({
     start: {},
@@ -256,49 +268,45 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     commiting: {}
   });
 
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      selectIng = _useState8[0],
+      setSelectIng = _useState8[1];
+
   var _useState9 = (0, _react.useState)(false),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      selectIng = _useState10[0],
-      setSelectIng = _useState10[1];
+      editIng = _useState10[0],
+      setEditIng = _useState10[1];
 
   var _useState11 = (0, _react.useState)(false),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      editIng = _useState12[0],
-      setEditIng = _useState12[1];
-
-  var _useState13 = (0, _react.useState)(false),
-      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      commitIng = _useState14[0],
-      setCommitIng = _useState14[1];
+      commitIng = _useState12[0],
+      setCommitIng = _useState12[1];
   /** 右键菜单是否显示 */
 
 
-  var _useState15 = (0, _react.useState)(false),
-      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      contextMenuStatus = _useState16[0],
-      setContextMenuStatus = _useState16[1];
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      contextMenuStatus = _useState14[0],
+      setContextMenuStatus = _useState14[1];
   /** 右键按钮的位置 */
 
 
-  var _useState17 = (0, _react.useState)({
+  var _useState15 = (0, _react.useState)({
     position: 'fixed',
     left: 300,
     top: 200
   }),
-      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      style = _useState18[0],
-      setStyle = _useState18[1];
-
-  var _useState19 = (0, _react.useState)(null),
-      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      chartsModalStatus = _useState20[0],
-      setChartsModalStatus = _useState20[1]; // 列设置
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      style = _useState16[0],
+      setStyle = _useState16[1]; // const [chartsModalStatus, setChartsModalStatus] = useState(null)
+  // 列设置
 
 
-  var _useState21 = (0, _react.useState)(false),
-      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-      columnsStateMap = _useState22[0],
-      setColumnsStateMap = _useState22[1];
+  var _useState17 = (0, _react.useState)(false),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      columnsStateMap = _useState18[0],
+      setColumnsStateMap = _useState18[1];
 
   var SortableItem = (0, _reactSortableHoc.SortableElement)(function (props) {
     return /*#__PURE__*/_react.default.createElement("tr", props);
@@ -341,6 +349,15 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     deepColumnsRef.current = source;
   }, [columns, groupColKeys]);
 
+  var _useState19 = (0, _react.useState)(columns),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      useColumns = _useState20[0],
+      setColumns = _useState20[1];
+
+  (0, _react.useEffect)(function () {
+    setColumns(columns);
+  }, [columns]);
+
   var onSortEnd = function onSortEnd(_ref) {
     var oldIndex = _ref.oldIndex,
         newIndex = _ref.newIndex;
@@ -354,20 +371,6 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   };
 
-  var onColSortEnd = function onColSortEnd(active, over) {
-    var oldIndex = columns.findIndex(function (item) {
-      return item.dataIndex === active;
-    });
-    var newIndex = columns.findIndex(function (item) {
-      return item.dataIndex === over;
-    });
-    filterChange === null || filterChange === void 0 ? void 0 : filterChange((0, _sortable.arrayMove)(columns, oldIndex, newIndex).map(function (item, index) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-        order: index
-      });
-    }));
-  };
-
   var DraggableContainer = function DraggableContainer(props) {
     return /*#__PURE__*/_react.default.createElement(SortContainer, (0, _extends2.default)({
       useDragHandle: true,
@@ -1018,10 +1021,12 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           col.onHeaderCell = function (column) {
             return resizeable ? {
               width: column.width,
+              dataIndex: column.dataIndex,
               onResize: handleResize(index),
               onResizeStop: endResize
             } : {
-              width: column.width
+              width: column.width,
+              dataIndex: column.dataIndex
             };
           };
 
@@ -1063,15 +1068,13 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         title: '分组',
         dataIndex: '_group',
         key: '_group',
-        width: 100
+        width: groupWidth || 100,
+        fixed: true
       }].concat((0, _toConsumableArray2.default)(innerColumns));
     }
 
     return sortOpen ? [sortDefaultColumnItem].concat((0, _toConsumableArray2.default)(innerColumns)) : innerColumns;
-  }, [useColumns, sortOpen, selectIng, dataSource, groupRowKeys, commitIng]);
-  (0, _react.useEffect)(function () {
-    setColumns(columns);
-  }, [columns]); // 行点击事件
+  }, [useColumns, sortOpen, selectIng, dataSource, groupRowKeys, commitIng]); // 行点击事件
 
   var onRecord = function onRecord(record) {
     var _Object$assign = Object.assign(_resetConfig.default.checkConfig, checkConfig),
@@ -1257,12 +1260,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         return (0, _lodash.omit)(item, ['render', 'sorter', 'onFilter', 'filters']);
       })
     };
-  }); // loading触发清空选中状态
-  // useEffect(() => {
-  //   console.log(3)
-  //   setSelectedRows({ selectedRows: [] })
-  // }, [loading])
-
+  });
 
   var onTableChange = function onTableChange(pagination, filters, sorter, extra) {
     var resultColumns = useColumns.map(function (item) {
@@ -1296,6 +1294,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var _props$onResize = props.onResize,
         onResize = _props$onResize === void 0 ? function () {} : _props$onResize,
         width = props.width,
+        dataIndex = props.dataIndex,
         onResizeStop = props.onResizeStop,
         restProps = (0, _objectWithoutProperties2.default)(props, _excluded3);
 
@@ -1303,6 +1302,14 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return /*#__PURE__*/_react.default.createElement("th", restProps);
     }
 
+    var column = (0, _index.treeFind)(columnsRef.current, function (node) {
+      return node.dataIndex === dataIndex;
+    });
+
+    if (!column) {
+      return /*#__PURE__*/_react.default.createElement("th", restProps);
+    }
+
     return /*#__PURE__*/_react.default.createElement(_reactResizable.Resizable, {
       width: width,
       height: 0,
@@ -1317,23 +1324,17 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       draggableOpts: {
         enableUserSelectHack: false
       }
-    }, /*#__PURE__*/_react.default.createElement("th", restProps));
+    }, /*#__PURE__*/_react.default.createElement("th", restProps, /*#__PURE__*/_react.default.createElement(_HeaderCol.default, {
+      column: column
+    })));
   };
 
   var colDraggableContainer = (0, _react.useCallback)(function (_ref4) {
     var props = (0, _extends2.default)({}, _ref4);
-    return /*#__PURE__*/_react.default.createElement("tr", null, _react.default.Children.map(props.children, function (child) {
-      var _child$props, _child$props$column;
+    var children = props.children;
+    return /*#__PURE__*/_react.default.createElement("tr", null, children);
+  }, [columns]); // 重写表格
 
-      if (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : (_child$props$column = _child$props.column) === null || _child$props$column === void 0 ? void 0 : _child$props$column.fixed) {
-        return child;
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_sortableItemCol.default, {
-        id: child.key
-      }, child);
-    }));
-  }, [columns]);
   var tableComponents = (0, _react.useMemo)(function () {
     var _ref5 = components || {},
         _ref5$body = _ref5.body,
@@ -1341,14 +1342,23 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         _ref5$header = _ref5.header,
         header = _ref5$header === void 0 ? {} : _ref5$header;
 
+    var headerRow = null;
+
+    if (openRowGroup || openColGroup) {
+      headerRow = colDraggableContainer;
+    }
+
+    var headerCell = null;
+
+    if (openRowGroup || openColGroup || resizeable) {
+      headerCell = ResizableTitle;
+    }
+
     return {
-      // table: (record) => {
-      //   return <div style={record.style}>{record.children}</div>
-      // }
       table: virtual ? _virTual.VirtualTable : null,
       header: (0, _objectSpread2.default)({
-        row: colSortOpen ? colDraggableContainer : null,
-        cell: resizeable ? ResizableTitle : null
+        row: headerRow,
+        cell: headerCell
       }, header),
       body: (0, _objectSpread2.default)((0, _objectSpread2.default)({
         wrapper: sortOpen ? DraggableContainer : virtual ? _virTual.VirtualWrapper : null,
@@ -1371,12 +1381,11 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     } : emptyProps ? function () {
       return /*#__PURE__*/_react.default.createElement(_Empty.default, emptyProps, (emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.footer) || null);
     } : _customRenderEmpty.default
-  }, colSortOpen ? /*#__PURE__*/_react.default.createElement(_DndContainer.default, {
-    move: onColSortEnd
-  }, /*#__PURE__*/_react.default.createElement(_sortableBoxCol.default, {
-    items: columns.reduce(function (acc, item) {
-      return [].concat((0, _toConsumableArray2.default)(acc), [item.dataIndex]);
-    }, [])
+  }, openRowGroup || openColGroup || colSortOpen ? /*#__PURE__*/_react.default.createElement(_DndContainer.default, {
+    items: items,
+    updateItems: updateItems,
+    rowGroupTitle: rowGroupTitle,
+    colGroupTitle: colGroupTitle
   }, /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
     loading: loading,
     dataSource: dataSource,
@@ -1403,7 +1412,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     summary: function summary(pageData) {
       return _summary && _summary(pageData, resultColumns);
     }
-  })))) : /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
+  }))) : /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
     loading: loading,
     dataSource: dataSource,
     components: tableComponents,
@@ -1441,35 +1450,24 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, "\u590D\u5236"), /*#__PURE__*/_react.default.createElement("div", {
     className: "rightClickItems",
     onClick: handleCopyAll
-  }, "\u590D\u5236\u5168\u90E8")), chartsModalStatus && /*#__PURE__*/_react.default.createElement(_tableChartsModal.default, {
-    type: chartsModalStatus,
-    onCancel: function onCancel() {
-      return setChartsModalStatus(false);
-    },
-    onOk: function onOk() {
-      return setChartsModalStatus(false);
-    },
-    data: dataSource,
-    deepDataSource: deepDataSourceRef.current,
-    rowKey: rowKey,
-    columns: columns,
-    selectInfo: (0, _lodash.pick)(shellStatusRef.current, ['start', 'end'])
-  }));
+  }, "\u590D\u5236\u5168\u90E8")));
 }); // 监听大小: 这里的高度是整个表格的高度，表体需要减去列头和分页的高度
 
 /** 1: 使用scroll.x y 来控制宽高 默认都是100% */
 
 var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$autoSizer = props.autoSizer,
-      autoSizer = _props$autoSizer === void 0 ? false : _props$autoSizer;
+      autoSizer = _props$autoSizer === void 0 ? false : _props$autoSizer,
+      openRowGroup = props.openRowGroup,
+      openColGroup = props.openColGroup;
 
-  var _useState23 = (0, _react.useState)({
+  var _useState21 = (0, _react.useState)({
     width: '100%',
     height: '100%'
   }),
-      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
-      tableSize = _useState24[0],
-      setTableSize = _useState24[1];
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      tableSize = _useState22[0],
+      setTableSize = _useState22[1];
 
   var defaultRef = ref || (0, _react.useRef)(null);
   var tableWarpRef = (0, _react.useRef)(null);
@@ -1494,7 +1492,12 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   var resetHeight = (0, _react.useMemo)(function () {
-    var height = tableSize.height; // 头部高度
+    var height = tableSize.height;
+
+    if (typeof height === 'string') {
+      return height;
+    } // 头部高度
+
 
     var h = height - (props.size === 'middle' ? 47 : 40);
 
@@ -1508,6 +1511,10 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       h -= 32;
     }
 
+    if (openRowGroup || openColGroup) {
+      h -= 100;
+    }
+
     return h;
   }, [props.hiddenPage, props.customCheck, props.columns, tableSize]);
   var throttleSize = (0, _react.useCallback)(function () {

package/es/LmTable/common/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 查找单极树节点
+ * @param tree
+ * @param func
+ * @param options
+ * @returns
+ */
+export declare const treeFind: (tree: any[] | Object, func: (node: any) => boolean, options?: any) => any;
+declare const _default: {};
+export default _default;

package/es/LmTable/common/index.js

@@ -0,0 +1,38 @@
+/**
+ * 查找单极树节点
+ * @param tree
+ * @param func
+ * @param options
+ * @returns
+ */
+export var treeFind = function treeFind(tree, func) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var _options$children = options.children,
+      children = _options$children === void 0 ? 'children' : _options$children;
+  var list = [];
+
+  if (Array.isArray(tree)) {
+    list = tree;
+  } else if (Object.prototype.toString.call(tree) === '[object Object]') {
+    list.push(tree);
+  }
+
+  for (var i = 0; i < list.length; i += 1) {
+    var data = list[i];
+
+    if (func(data)) {
+      return data;
+    }
+
+    if (data["".concat(children)]) {
+      var res = treeFind(data["".concat(children)], func, options);
+
+      if (res) {
+        return res;
+      }
+    }
+  }
+
+  return null;
+};
+export default {};

package/es/LmTable/components/Container/Container.css

@@ -0,0 +1,87 @@
+.dnd_container {
+  display: flex;
+  flex-direction: column;
+  grid-auto-rows: max-content;
+  overflow: hidden;
+  box-sizing: border-box;
+  appearance: none;
+  outline: none;
+  flex: 1;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  transition: background-color 350ms ease;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  font-size: 1em;
+}
+.dnd_container:last-child {
+  margin-right: 0;
+}
+.dnd_container ul {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 10px;
+  margin: 0;
+  min-height: 40px;
+}
+.dnd_container.scrollable ul {
+  overflow-y: auto;
+}
+.dnd_container.placeholder {
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.5);
+  background-color: transparent;
+  border-style: dashed;
+  border-color: rgba(0, 0, 0, 0.08);
+}
+.dnd_container.placeholder:hover {
+  border-color: rgba(0, 0, 0, 0.15);
+}
+.dnd_container.hover {
+  background-color: #ebebeb;
+}
+.dnd_container.unstyled {
+  overflow: visible;
+  background-color: transparent !important;
+  border: none !important;
+}
+.dnd_container.horizontal {
+  width: 100%;
+}
+.dnd_container.horizontal ul {
+  grid-auto-flow: column;
+}
+.dnd_container.shadow {
+  box-shadow: 0 1px 10px 0 rgba(34, 33, 81, 0.1);
+}
+.dnd_container:focus-visible {
+  border-color: transparent;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0px 0px 2px #4c9ffe;
+}
+.dnd_header {
+  display: flex;
+  padding: 5px 20px;
+  padding-right: 8px;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.dnd_header:hover .Actions > * {
+  opacity: 1 !important;
+}
+.dnd_actions {
+  display: flex;
+}
+.dnd_actions > *:first-child:not(:last-child) {
+  opacity: 0;
+}
+.dnd_actions > *:first-child:not(:last-child):focus-visible {
+  opacity: 1;
+}

package/es/LmTable/components/Container/Container.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import './Container.less';
+export interface Props {
+    children: React.ReactNode;
+    columns?: number;
+    label?: string;
+    style?: React.CSSProperties;
+    horizontal?: boolean;
+    hover?: boolean;
+    handleProps?: React.HTMLAttributes<any>;
+    scrollable?: boolean;
+    shadow?: boolean;
+    placeholder?: boolean;
+    unstyled?: boolean;
+    onClick?: (e: any) => void;
+    onRemove?: (e: any) => void;
+}
+export declare const Container: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;

package/es/LmTable/components/Container/Container.js

@@ -0,0 +1,48 @@
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import React, { forwardRef } from 'react';
+import classNames from 'classnames'; // import {Handle, Remove} from '../Item';
+
+import "./Container.css";
+export var Container = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      _a$columns = _a.columns,
+      columns = _a$columns === void 0 ? 1 : _a$columns,
+      handleProps = _a.handleProps,
+      horizontal = _a.horizontal,
+      hover = _a.hover,
+      onClick = _a.onClick,
+      onRemove = _a.onRemove,
+      label = _a.label,
+      placeholder = _a.placeholder,
+      style = _a.style,
+      scrollable = _a.scrollable,
+      shadow = _a.shadow,
+      unstyled = _a.unstyled,
+      props = __rest(_a, ["children", "columns", "handleProps", "horizontal", "hover", "onClick", "onRemove", "label", "placeholder", "style", "scrollable", "shadow", "unstyled"]);
+
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    ref: ref,
+    style: Object.assign(Object.assign({}, style), {
+      '--columns': columns
+    }),
+    className: classNames('dnd_container', unstyled && 'unstyled', horizontal && 'horizontal', hover && 'hover', placeholder && 'placeholder', scrollable && 'scrollable', shadow && 'shadow'),
+    onClick: onClick,
+    tabIndex: onClick ? 0 : undefined
+  }), label ? /*#__PURE__*/React.createElement("div", {
+    className: 'dnd_header'
+  }, label, /*#__PURE__*/React.createElement("div", {
+    className: 'dnd_actions'
+  })) : null, placeholder ? children : /*#__PURE__*/React.createElement("ul", null, children));
+});