react-graph-grid 0.1.3 → 0.1.5

package/dist/index19.js

@@ -0,0 +1,624 @@
+const require_jsx_runtime$1 = require("./index7.js");
+const require_Base = require("./index8.js");
+const require_Overlay = require("./index9.js");
+const require_server_browser$1 = require("./index14.js");
+let react = require("react");
+var import_server_browser = require_server_browser$1.default;
+var import_jsx_runtime = require_jsx_runtime$1.default;
+function Grid(props) {
+	let grid = null;
+	const [gridState, setState] = (0, react.useState)({
+		grid,
+		ind: 0
+	});
+	grid = gridState.grid;
+	let needGetRows = false;
+	if (!grid || grid.uid !== props.uid && props.uid != null) {
+		grid = null;
+		if (props.findGrid) grid = props.findGrid(props);
+		grid = grid || new GridClass(props);
+		needGetRows = !props.noAutoRefresh;
+	}
+	if (props.init) props.init(grid);
+	grid.opt.selectedRowClass = props.selectedRowClass || require_Base.BaseComponent.theme.selectedRowClass || "";
+	grid.refreshState = function() {
+		setState({
+			grid,
+			ind: grid.stateind++
+		});
+	};
+	grid._waitingRows = needGetRows && (grid.rows.length <= 0 || grid.columns.length <= 0);
+	(0, react.useEffect)(() => {
+		grid.setupEvents(grid);
+		if (grid._waitingRows) grid.getRows({
+			filters: grid.collectFilters(),
+			grid
+		}).then((rows) => {
+			grid.rows = rows;
+			grid.afterGetRows();
+			grid.refreshState();
+		}).finally(() => {
+			grid._waitingRows = false;
+			grid.refreshState();
+		});
+		else if (grid.columns.length <= 0 && grid.getColumns) grid.prepareColumns().then(() => grid.refreshState());
+		return () => {
+			grid.clearEvents();
+		};
+	}, [grid]);
+	return grid.render();
+}
+var GridClass = class GridClass extends require_Base.BaseComponent {
+	constructor(props) {
+		super(props);
+		const grid = this;
+		grid.opt = { zInd: props.zInd || 1 };
+		grid.id = GridClass._seq++;
+		if (props.getRows) grid.getRows = props.getRows;
+		grid._waitingRows = true;
+		grid.getColumns = props.getColumns || grid.getColumns;
+		grid.selectedRowIndex = 0;
+		grid.keyField = props.keyField;
+		grid.nameField = props.nameField;
+		if (props.renderCell) {
+			grid.defaultRenderCell = grid.renderCell;
+			grid.renderCell = props.renderCell;
+		}
+		grid.dateFormat = props.dateFormat || require_Base.BaseComponent.dateFormat || "dd.MM.yyyy";
+		grid.dateTimeFormat = props.dateTimeFormat || require_Base.BaseComponent.dateTimeFormat || "dd.MM.yyyy HH:mm:ss";
+		grid.rows = [];
+		grid.columns = [];
+		grid.stateind = 0;
+		grid.frozenHeader = props.frozenHeader == null ? true : props.frozenHeader;
+		grid.opt.selectedRowClass = props.selectedRowClass || require_Base.BaseComponent.theme.selectedRowClass || "";
+	}
+	static _seq = 0;
+	log(message, pref) {
+		pref = pref || `grid#${this.id}`;
+		require_Base.log(`${pref} : ${message}`);
+	}
+	afterGetRowsEvents() {
+		const grid = this;
+		grid.calculatePagesCount();
+		grid.getSelectedRowIndex();
+		grid.onSelectedRowChanged({
+			grid,
+			prev: grid.selectedRowIndex,
+			new: grid.selectedRowIndex,
+			source: "afterGetRows"
+		});
+	}
+	afterGetRows() {
+		const grid = this;
+		grid._waitingRows = false;
+		grid.log(`afterGetRows(). rows = ${grid.rows.length}. state = ${grid.stateind}`);
+		if (grid.totalRows == null && grid.pageSize <= 0) grid.totalRows = grid.rows && grid.rows.length ? grid.rows.length : 0;
+		if (grid.columns.length <= 0) grid.prepareColumns().then(() => {
+			grid.afterGetRowsEvents();
+			grid.refreshState();
+		});
+		else grid.afterGetRowsEvents();
+	}
+	getSelectedRowIndex() {
+		const grid = this;
+		if (grid.selectedRowIndex == null || grid.selectedRowIndex < 0) grid.selectedRowIndex = 0;
+	}
+	setupEvents() {
+		const grid = this;
+		grid.clearEvents = function() {};
+	}
+	calculatePagesCount() {
+		const grid = this;
+		grid.pagesCount = (grid.totalRows / grid.pageSize | 0) + (grid.totalRows % grid.pageSize > 0 ? 1 : 0);
+	}
+	refresh() {
+		const grid = this;
+		grid._waitingRows = true;
+		grid.refreshState();
+		grid.getRows({
+			filters: grid.collectFilters(),
+			grid
+		}).then((rows) => {
+			grid.rows = rows;
+			grid.afterGetRows();
+			grid._waitingRows = false;
+			grid.refreshState();
+		}).catch(() => {
+			grid._waitingRows = false;
+		}).finally(() => {
+			grid._waitingRows = false;
+			grid.refreshState();
+		});
+	}
+	collectFilters() {
+		return [];
+	}
+	render() {
+		const grid = this;
+		grid.getGridWidth();
+		grid.log(`render(). rows = ${grid.rows.length}. columns = ${grid.columns.length}. state = ${grid.stateind}`);
+		require_Base.log(" -------------------------------------------------------------------------------------------------------------------------------------- ");
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "grid-div",
+			style: {
+				maxHeight: grid.getGridMaxHeight(),
+				overflowY: grid.frozenHeader ? "auto" : "hidden"
+			},
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", {
+				className: grid.opt.gridClass || require_Base.BaseComponent.theme.gridClass || "grid-default",
+				style: {
+					width: grid._currW + "px",
+					tableLayout: "fixed"
+				},
+				children: [grid.renderHeader(), grid.renderBody()]
+			}, `grid_${grid.id}_`)
+		}, `gridDiv_${grid.id}_`);
+	}
+	getGridMaxHeight() {
+		return this.frozenHeader ? "40vh" : "";
+	}
+	getGridWidth() {
+		const grid = this;
+		let w = 0;
+		for (let col of grid.columns) {
+			if (col.visible === false) continue;
+			w += col.w;
+		}
+		grid._currW = w;
+		return grid._currW;
+	}
+	keyAdd() {
+		return "";
+	}
+	keyCellAdd() {
+		return this.stateind;
+	}
+	getHeaderGridTemplateColumns() {
+		return "auto 8px";
+	}
+	getHeaderMinHeight() {
+		return "1em";
+	}
+	renderHeader(columns, context) {
+		const grid = this;
+		columns = columns || grid.columns;
+		if (!columns) return "";
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [context !== "fake" ? grid.renderSelectColumnHeader() : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}), columns.map((col, ind) => {
+			return col.visible === false ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+				"grid-header": `${grid.id}_${col.id}_${col.w}_`,
+				className: `${grid.opt.columnClass ? grid.opt.columnClass : ""} grid-header-th`,
+				style: {
+					position: grid.frozenHeader ? "sticky" : "inherit",
+					top: grid.frozenHeader ? 0 : void 0,
+					zIndex: grid.frozenHeader ? 1 : void 0,
+					width: col.w + "px",
+					overflow: "hidden"
+				},
+				onMouseDown: (e) => grid.mouseDownColumnDrag(e, col),
+				onMouseEnter: (e) => grid.mouseOverColumnDrag(e, col),
+				onMouseLeave: (e) => grid.mouseOutColumnDrag(e, col),
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					style: {
+						overflow: "hidden",
+						verticalAlign: "top",
+						display: "grid",
+						gridTemplateColumns: "calc(100% - 6px) 6px"
+					},
+					disabled: grid._waitingRows || col.disabled ? "disabled" : "",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: `grid-header-div-default ${grid.opt.headerDivClass || "grid-header-div"}`,
+						style: {
+							display: "grid",
+							gridTemplateColumns: grid.getHeaderGridTemplateColumns(col),
+							alignItems: "center",
+							justifyItems: "start",
+							gridTemplateRows: "1.5em auto",
+							gridAutoFlow: "row",
+							width: "calc(100% + 8px)"
+						},
+						children: grid.renderHeaderCell(col, context)
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						"grid-rsz-x": `${grid.id}_${col.id}`,
+						style: {
+							position: "relative",
+							minHeight: grid.getHeaderMinHeight(col),
+							cursor: "e-resize",
+							height: "100%",
+							width: "6px",
+							left: "0px",
+							zIndex: grid.opt.zInd + 1
+						},
+						onMouseDown: (e) => {
+							e.detail === 2 ? grid.mouseResizerDoubleClick(e, col) : grid.mouseResizerClick(e, col);
+						}
+					})]
+				})
+			}, `headerCell_${grid.id}_${col.id}_${col.w}_${ind}_${grid.keyAdd()}_`);
+		})] }) });
+	}
+	renderSelectColumnHeader() {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+	}
+	renderHeaderCell(col) {
+		return this.translate(col.title || col.name);
+	}
+	renderBody() {
+		const grid = this;
+		if (grid._waitingRows || !grid.columns || !grid.rows) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: grid.rows && grid.rows.length > 0 ? grid.rows.map((row, rind) => {
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", {
+				className: "grid-waiting",
+				style: {
+					borderTop: "0",
+					borderBottom: "0"
+				},
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+					colSpan: grid.columns ? grid.columns.length : 0,
+					className: "grid-waiting",
+					children: rind === Math.min(Math.floor(grid.rows.length / 2), 10) ? grid.Spinner(grid.id, Math.min(Math.max(grid._currW, 100), window.innerWidth), window.innerWidth) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\xA0" })
+				})
+			}, `gridRowWait_${grid.id}_${rind}_`);
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+			colSpan: grid.columns ? grid.columns.length : 0,
+			className: "grid-waiting",
+			children: grid.Spinner(grid.id, Math.min(Math.max(grid._currW, 100), window.innerWidth), window.innerWidth)
+		}) }, `gridRowWait_${grid.id}_0_`) });
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tbody", { children: [grid.rows.map((row, rind) => {
+			let selected = grid.isRowSelected(row, rind);
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", {
+				className: selected ? `grid-selected-row ${grid.opt.selectedRowClass || ""}` : "",
+				onDoubleClick: (e) => {
+					if (!grid._clicksDisabled) grid.onRowDblClick(e, row);
+					e.stopPropagation();
+				},
+				onClick: (e) => {
+					if (!grid._clicksDisabled) grid.onSelectGridRow(e);
+					e.stopPropagation();
+				},
+				children: grid.renderRow(row, rind, selected)
+			}, `gridRow_${grid.id}_${rind}_${row[grid.keyField]}_${grid.keyAdd()}_${grid.keyCellAdd(selected)}_`);
+		}), grid.renderAdditionalRows()] });
+	}
+	renderAdditionalRows() {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+	}
+	isRowSelected(row, rowInd) {
+		return this.selectedRowIndex === rowInd;
+	}
+	renderRow(row, rowInd, selected) {
+		const grid = this;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: grid.columns.map((col, cind) => {
+			return col.visible === false ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: grid.renderCell(grid, col, row, selected) }, `gridCell_${grid.id}_${rowInd}_${cind}_${grid.keyAdd()}_${row[grid.keyField]}_`);
+		}) });
+	}
+	renderCell(grid, col, row) {
+		let val = row[col.name];
+		if (col.type === "date" && val != null) try {
+			val = grid.formatDate(val, grid.dateFormat);
+		} catch {}
+		else if (col.type === "datetime" && val != null) try {
+			val = grid.formatDate(val, grid.dateTimeFormat);
+		} catch {}
+		if (col.allowVerticalResize) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			style: { display: "flex" },
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
+				className: col.inputClass,
+				value: val != null ? val : "",
+				style: {
+					width: "calc(100% - 0px)",
+					minHeight: !col.inputClass ? col.textareaH : col.h,
+					height: "1.8em",
+					padding: "0",
+					boxSizing: "border-box",
+					gridColumn: "span 3",
+					resize: "vertical",
+					overflow: "hidden",
+					border: "0"
+				},
+				readOnly: true
+			}, `cellTextarea_${col.id}_`)
+		});
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: "grid-cell",
+			style: {
+				display: "block",
+				whiteSpace: "nowrap",
+				overflow: "hidden",
+				textOverflow: "clip"
+			},
+			children: val != null ? val : ""
+		});
+	}
+	getColumns() {
+		const grid = this;
+		const res = [];
+		grid.colDict = {};
+		for (let row of grid.rows) for (let key in row) {
+			if (grid.colDict[key]) continue;
+			const col = grid.createColumn(key);
+			grid.colDict[col.name] = col;
+			res.push(col);
+		}
+		return res;
+	}
+	createColumn(name) {
+		return { name };
+	}
+	getSortedString() {}
+	afterGetColumns() {
+		const grid = this;
+		grid.columns = grid.columns || [];
+		grid.colDict = grid.colDict || {};
+		let id = 0;
+		for (let col of grid.columns) {
+			col.id = id++;
+			col.title = col.title || col.name;
+			col.w = col.w || 100;
+			col.initW = col.initW || 100;
+			col.minW = col.minW || 50;
+			col.grid = grid;
+			grid.colDict[col.id] = grid.colDict[col.name] = grid.colDict[col.name.toLowerCase()] = col;
+		}
+		if (!grid.columnsDefaultOrder) {
+			grid.columnsDefaultOrder = [];
+			Object.assign(grid.columnsDefaultOrder, grid.columns);
+		}
+		grid.getSortedString();
+		delete grid._waitingColumns;
+	}
+	async prepareColumns() {
+		const grid = this;
+		if (grid._waitingColumns) return;
+		grid._waitingColumns = true;
+		if (grid.getColumns && (!grid.columns || grid.columns.length <= 0)) {
+			grid.columns = await grid.getColumns();
+			grid.afterGetColumns();
+		} else grid.afterGetColumns();
+	}
+	resetColumnsOrderToDefault() {
+		const grid = this;
+		let columns = [];
+		Object.assign(columns, grid.columnsDefaultOrder);
+		grid.refreshState();
+		grid.columns = columns;
+	}
+	resetColumnsWidthsToDefault() {
+		const grid = this;
+		for (let col of grid.columns) {
+			if (col.w === col.initW) continue;
+			col.w = col.initW;
+		}
+		grid.refreshState();
+	}
+	onSelectedRowChanged() {}
+	mouseDownColumnDrag(e, column) {
+		const grid = this;
+		if (grid.columns.length < 2) return;
+		if (e.target.tagName === "INPUT" || e.target.hasAttribute("grid-rsz-x")) return;
+		const th = e.target.closest("TH");
+		if (!th || !th.hasAttribute("grid-header")) return;
+		grid._movingColumn = column;
+		let fakeGrid;
+		function drawMovingColumn(pageX) {
+			fakeGrid = fakeGrid || grid.addFakeGrid(e, column, th);
+			const x = pageX + 10;
+			fakeGrid.style.left = x + "px";
+		}
+		function onMouseMove(ev) {
+			drawMovingColumn(ev.clientX);
+			grid._skipClickColumn = column;
+		}
+		document.addEventListener("mousemove", onMouseMove);
+		document.addEventListener("mouseup", onMouseUp);
+		function onMouseUp() {
+			document.removeEventListener("mousemove", onMouseMove);
+			document.removeEventListener("mouseup", onMouseUp);
+			if (fakeGrid) fakeGrid.remove();
+			grid.clearMovingClass(th);
+			if (grid._movingColumn && grid._targetColumn && grid._movingColumn !== grid._targetColumn) {
+				const newColumns = [];
+				for (let col of grid.columns) switch (col) {
+					case grid._movingColumn: break;
+					case grid._targetColumn:
+						if (grid.columns.indexOf(grid._movingColumn) > grid.columns.indexOf(grid._targetColumn)) {
+							newColumns.push(grid._movingColumn);
+							newColumns.push(grid._targetColumn);
+						} else {
+							newColumns.push(grid._targetColumn);
+							newColumns.push(grid._movingColumn);
+						}
+						break;
+					default:
+						newColumns.push(col);
+						break;
+				}
+				grid.columns = newColumns;
+				grid.afterDragColumn(column);
+				grid.refreshState();
+			}
+			delete grid._movingColumn;
+			delete grid._targetColumn;
+		}
+	}
+	addFakeGrid(e, column, th) {
+		const grid = this;
+		const rect = th.getBoundingClientRect();
+		const fakeGrid = document.createElement("table");
+		fakeGrid.className = grid.opt.gridClass || require_Base.BaseComponent.theme.gridClass || "grid-default";
+		fakeGrid.style = grid.opt.style || "";
+		fakeGrid.style.zIndex = ++require_Overlay.OverlayClass._zInd || 1e3;
+		fakeGrid.style.position = "fixed";
+		fakeGrid.style.top = (e.offsetY || 0 + rect.top + 5) + "px";
+		fakeGrid.style.width = rect.width + "px";
+		fakeGrid.style.height = rect.height + "px";
+		fakeGrid.innerHTML = (0, import_server_browser.renderToStaticMarkup)(grid.renderHeader([column], "fake"));
+		document.body.append(fakeGrid);
+		return fakeGrid;
+	}
+	clearMovingClass = function(th) {
+		if (th.classList.contains("grid-header-drag-over")) th.classList.remove("grid-header-drag-over");
+	};
+	mouseOverColumnDrag(e, column) {
+		const grid = this;
+		if (!grid._movingColumn || !grid.colDict) return;
+		const th = e.target.closest("TH");
+		if (!th || !th.hasAttribute("grid-header")) return;
+		grid._targetColumn = column;
+		th.classList.add("grid-header-drag-over");
+	}
+	mouseOutColumnDrag(e) {
+		const grid = this;
+		const th = e.target.closest("TH");
+		if (!th || !th.hasAttribute("grid-header")) return;
+		if (!grid._movingColumn) return;
+		grid.clearMovingClass(th);
+		delete grid._targetColumn;
+	}
+	onRowDblClick() {}
+	async canLeaveRow() {
+		return true;
+	}
+	async onSelectGridRow(e) {
+		const grid = this;
+		const gridElement = e.target.closest("TABLE");
+		if (!gridElement) return;
+		const rows = gridElement.tBodies[0].rows;
+		const clickedRow = e.target.closest("TR");
+		const prevSelectedIndex = grid.selectedRowIndex;
+		const newSelectedIndex = clickedRow.rowIndex - 1;
+		if (newSelectedIndex === prevSelectedIndex) return;
+		if (!await grid.canLeaveRow(prevSelectedIndex)) return;
+		const prevSelRow = rows[grid.selectedRowIndex];
+		if (prevSelRow) {
+			prevSelRow.classList.remove("grid-selected-row");
+			if (grid.opt.selectedRowClass) prevSelRow.classList.remove(grid.opt.selectedRowClass);
+		}
+		grid.selectedRowIndex = newSelectedIndex;
+		const newSelRow = rows[grid.selectedRowIndex];
+		newSelRow.classList.add(`grid-selected-row`);
+		if (grid.opt.selectedRowClass) newSelRow.classList.add(grid.opt.selectedRowClass);
+		grid.onSelectedRowChanged({
+			grid,
+			prev: prevSelectedIndex,
+			new: grid.selectedRowIndex,
+			source: "rowClick"
+		});
+	}
+	getKeyColumn() {
+		const grid = this;
+		if (grid.keyField) return grid.keyField;
+		if (!grid.columns || grid.columns.length <= 0) return "";
+		for (let col of grid.columns) if (col.name.toLowerCase() === "id") {
+			grid.keyField = col.name;
+			break;
+		}
+		grid.keyField = grid.keyField || grid.columns[0].name;
+		return grid.keyField;
+	}
+	selectedRow() {
+		const grid = this;
+		if (grid.selectedRowIndex == null || !grid.rows || grid.rows.length <= 0 || grid.selectedRowIndex < 0 || grid.selectedRowIndex >= grid.rows.length) return;
+		return grid.rows[grid.selectedRowIndex];
+	}
+	selectedValue() {
+		const grid = this;
+		const keyColumn = grid.getKeyColumn();
+		const row = grid.selectedRow();
+		return row != null ? row[keyColumn] : "";
+	}
+	selectedText() {
+		const grid = this;
+		if (!grid.nameField) return "";
+		const row = grid.selectedRow();
+		return row != null ? row[grid.nameField] : "";
+	}
+	selectedValues() {
+		const grid = this;
+		const keyColumn = grid.getKeyColumn();
+		const row = grid.selectedRow();
+		return row != null ? [{
+			value: row[keyColumn],
+			label: row[grid.nameField]
+		}] : [];
+	}
+	mouseResizerDoubleClick(e, column) {
+		const grid = this;
+		const th = e.target.closest("TH");
+		if (!th || !th.hasAttribute("grid-header")) return;
+		const initW = parseInt(th.style.width);
+		const fakeDiv = document.createElement("div");
+		fakeDiv.className = "grid-header-div-default " + (grid.opt.headerDivClass || "grid-header-div");
+		fakeDiv.style.opacity = 0;
+		fakeDiv.style.position = "fixed";
+		fakeDiv.innerHTML = (0, import_server_browser.renderToStaticMarkup)(grid.renderHeaderCell(column, "fake"));
+		document.body.append(fakeDiv);
+		let contentSize = Math.max(column.minW, parseInt(getComputedStyle(fakeDiv).width));
+		fakeDiv.className = "";
+		for (let row of grid.rows) {
+			fakeDiv.innerHTML = (0, import_server_browser.renderToStaticMarkup)(grid.renderCell(grid, column, row, false));
+			contentSize = Math.max(contentSize, parseInt(getComputedStyle(fakeDiv).width));
+		}
+		if (column.maxW != null) contentSize = Math.min(contentSize, +column.maxW);
+		const newW = contentSize + 12;
+		if (newW !== initW) {
+			grid._currW = grid._currW - column.w + newW;
+			column.w = newW;
+			grid.afterResizeColumn(column);
+			grid.refreshState();
+		}
+		fakeDiv.remove();
+	}
+	mouseResizerClick(e, column) {
+		const grid = this;
+		const th = e.target.closest("TH");
+		if (!th || !th.hasAttribute("grid-header")) return;
+		const gridElement = th.closest("TABLE");
+		const initW = parseInt(getComputedStyle(th).width);
+		const shiftX = e.pageX;
+		let otherColsW = grid._currW - column.w;
+		let resizing;
+		function resize(pageX) {
+			if (shiftX > 0) {
+				let w = initW + pageX - shiftX;
+				const prevW = column.w;
+				column.w = (!column.maxW || w <= column.maxW) && (!column.minW || w >= column.minW) ? w : column.w;
+				if (column.w !== prevW) {
+					grid._currW = otherColsW + column.w;
+					gridElement.style.width = "";
+					th.style.width = column.w + "px";
+					gridElement.style.width = grid._currW + "px";
+				}
+			}
+		}
+		function onMouseMove(e$1) {
+			resizing = true;
+			resize(e$1.pageX);
+		}
+		const remDS = gridElement.ondragstart;
+		gridElement.ondragstart = function() {
+			return false;
+		};
+		const remSS = gridElement.onselectstart;
+		gridElement.onselectstart = function() {
+			return false;
+		};
+		function onMouseUp() {
+			document.removeEventListener("mousemove", onMouseMove);
+			document.removeEventListener("mouseup", onMouseUp);
+			gridElement.ondragstart = remDS;
+			gridElement.onselectstart = remSS;
+			if (resizing) {
+				resizing = false;
+				if (initW !== column.w) {
+					grid.afterResizeColumn(column);
+					grid.refreshState();
+				}
+			}
+		}
+		document.addEventListener("mousemove", onMouseMove);
+		document.addEventListener("mouseup", onMouseUp);
+	}
+	afterResizeColumn() {}
+	afterDragColumn() {}
+};
+exports.Grid = Grid;
+exports.GridClass = GridClass;

package/dist/index2.esm.js

@@ -0,0 +1,6 @@
+var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
+	if (typeof require !== "undefined") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function.");
+});
+export { __commonJSMin, __require };

package/dist/index2.js

@@ -0,0 +1,2 @@
+var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+exports.__commonJSMin = __commonJSMin;