@coreui/data-grid 0.2.0-rc.0 → 0.3.0-rc.0

package/dist/js/data-grid.js

@@ -1,5 +1,5 @@
 /*!
-* CoreUI PRO data-grid v0.2.0-rc.0 (https://coreui.io)
+* CoreUI PRO data-grid v0.3.0-rc.0 (https://coreui.io)
 * Copyright 2026 The CoreUI Team (https://github.com/orgs/coreui/people)
 * License (https://coreui.io/pro/license/)
 * Bundles @tanstack/table-core and @tanstack/virtual-core, MIT (https://github.com/TanStack/table/blob/main/LICENSE)
@@ -920,7 +920,7 @@
 		};
 	};
 	const resolveNavigation = (key, ctrlKey, current, context) => {
-		const { columnIds, rowCount, pageStep, paginated } = context;
+		const { columnIds, rowCount, pageStep, paginated, rtl } = context;
 		const columnIndex = columnIds.indexOf(current.columnId);
 		if (columnIndex === -1 || columnIds.length === 0) return null;
 		const lastRow = rowCount - 1;
@@ -930,8 +930,8 @@
 			columnId: columnIds[index]
 		} });
 		switch (key) {
-			case "ArrowLeft": return cell(current.rowIndex, Math.max(columnIndex - 1, 0));
-			case "ArrowRight": return cell(current.rowIndex, Math.min(columnIndex + 1, lastColumn));
+			case "ArrowLeft": return rtl ? cell(current.rowIndex, Math.min(columnIndex + 1, lastColumn)) : cell(current.rowIndex, Math.max(columnIndex - 1, 0));
+			case "ArrowRight": return rtl ? cell(current.rowIndex, Math.max(columnIndex - 1, 0)) : cell(current.rowIndex, Math.min(columnIndex + 1, lastColumn));
 			case "ArrowUp": return cell(Math.max(current.rowIndex - 1, HEADER_ROW_INDEX), columnIndex);
 			case "ArrowDown": return cell(Math.min(current.rowIndex + 1, lastRow), columnIndex);
 			case "Home":
@@ -1155,6 +1155,7 @@
 		const horizontal = axis === "x";
 		let sourceHit = null;
 		let dragging = false;
+		let axisSign = 1;
 		let origin = {
 			x: 0,
 			y: 0
@@ -1174,6 +1175,11 @@
 		const previewClassed = /* @__PURE__ */ new Set();
 		const contentStarts = /* @__PURE__ */ new Map();
 		const contentSizes = /* @__PURE__ */ new Map();
+		const logicalStart = (rect) => {
+			if (!horizontal) return rect.top;
+			return axisSign === 1 ? rect.left : -rect.right;
+		};
+		const logicalPointer = () => horizontal ? pointer.x * axisSign : pointer.y;
 		const stopAutoScroll = () => {
 			if (scrollFrame) {
 				cancelAnimationFrame(scrollFrame);
@@ -1210,7 +1216,8 @@
 			const rootRect = root.getBoundingClientRect();
 			indicator.hidden = false;
 			if (horizontal) {
-				indicator.style.left = `${after ? rect.right : rect.left}px`;
+				const trailing = after === (axisSign === 1);
+				indicator.style.left = `${trailing ? rect.right : rect.left}px`;
 				indicator.style.top = `${rootRect.top}px`;
 				indicator.style.height = `${rootRect.height}px`;
 			} else {
@@ -1221,6 +1228,7 @@
 		};
 		const startDrag = () => {
 			dragging = true;
+			axisSign = horizontal && getComputedStyle(root).direction === "rtl" ? -1 : 1;
 			const active = document.activeElement;
 			if (active instanceof HTMLElement && root.contains(active)) active.blur();
 			root.classList.add(CLASS_NAME_DRAG_ACTIVE);
@@ -1247,13 +1255,13 @@
 			const scrollElement = options.getScrollElement();
 			if (!scrollElement) return 0;
 			const rect = scrollElement.getBoundingClientRect();
-			return horizontal ? rect.left - scrollElement.scrollLeft : rect.top - scrollElement.scrollTop;
+			return horizontal ? logicalStart(rect) - axisSign * scrollElement.scrollLeft : rect.top - scrollElement.scrollTop;
 		};
 		const captureItem = (id, origin) => {
 			const element = options.items.getElements(id)[0];
 			if (!element) return false;
 			const rect = element.getBoundingClientRect();
-			const start = (horizontal ? rect.left : rect.top) - (previewDeltas.get(id) ?? 0);
+			const start = logicalStart(rect) - (previewDeltas.get(id) ?? 0);
 			contentStarts.set(id, start - origin);
 			contentSizes.set(id, horizontal ? rect.width : rect.height);
 			return true;
@@ -1265,7 +1273,7 @@
 			for (const id of options.items.getOrderedIds()) captureItem(id, origin);
 		};
 		const updateTarget = () => {
-			const position = horizontal ? pointer.x : pointer.y;
+			const position = logicalPointer();
 			const origin = contentOrigin();
 			const zones = [];
 			for (const id of options.items.getOrderedIds()) {
@@ -1368,7 +1376,7 @@
 			for (const [id, delta] of next) {
 				if (previewDeltas.get(id) === delta) continue;
 				for (const element of options.items.getElements(id)) {
-					element.style.transform = horizontal ? `translateX(${delta}px)` : `translateY(${delta}px)`;
+					element.style.transform = horizontal ? `translateX(${axisSign * delta}px)` : `translateY(${delta}px)`;
 					element.classList.add(CLASS_NAME_PREVIEW);
 				}
 				previewClassed.add(id);
@@ -1402,7 +1410,7 @@
 			};
 			const delta = previewDeltas.get(sourceHit.id) ?? 0;
 			return horizontal ? {
-				x: rect.left - delta,
+				x: rect.left - axisSign * delta,
 				y: rect.top
 			} : {
 				x: rect.left,
@@ -9449,6 +9457,22 @@
 		return filterValue.value.some((candidate) => String(candidate) === String(cellValue));
 	};
 	//#endregion
+	//#region src/util/direction.ts
+	/**
+	* --------------------------------------------------------------------------
+	* CoreUI PRO data-grid util/direction.ts
+	* License (https://coreui.io/pro/license/)
+	* --------------------------------------------------------------------------
+	*/
+	const isElementRTL = (element) => typeof getComputedStyle === "function" && element ? getComputedStyle(element).direction === "rtl" : false;
+	const syncResizeDirection = (table, element) => {
+		const direction = isElementRTL(element) ? "rtl" : "ltr";
+		if (table.options.columnResizeDirection !== direction) table.setOptions((previous) => ({
+			...previous,
+			columnResizeDirection: direction
+		}));
+	};
+	//#endregion
 	//#region src/ui/toolbar.ts
 	const CLASS_NAME_TOOLBAR = "data-grid-toolbar";
 	const CLASS_NAME_ACTIONS = "data-grid-toolbar-actions";
@@ -9579,7 +9603,7 @@
 		if (filterFn) return (row, columnId, filterValue) => filterFn(row.getValue(columnId), filterValue, row.original);
 		return (row, columnId, filterValue) => evaluateColumnFilter(row.getValue(columnId), filterValue, column.filterType);
 	};
-	const createGridTable = (options) => {
+	const createGridTable = (options, getElement) => {
 		const sortingOptions = typeof options.sorting === "object" ? options.sorting : {};
 		const sizingOptions = typeof options.columnSizing === "object" ? options.columnSizing : {};
 		const paginationOptions = typeof options.pagination === "object" ? options.pagination : {};
@@ -9642,6 +9666,7 @@
 				};
 			}),
 			columnResizeMode: sizingOptions.mode ?? "onChange",
+			columnResizeDirection: isElementRTL(getElement?.()) ? "rtl" : "ltr",
 			data: serverSide ? [] : options.items,
 			enableCellSelection: Boolean(options.cellSelection),
 			enableColumnFilters: Boolean(options.columnFilters),
@@ -12684,6 +12709,10 @@
 	const STATE_STORAGE_PREFIX = "coreui-data-grid:";
 	const STATE_AUTOSAVE_DEBOUNCE_MS = 250;
 	const HISTORY_LIMIT = 100;
+	const INVERTED_ARROWS = {
+		ArrowLeft: "ArrowRight",
+		ArrowRight: "ArrowLeft"
+	};
 	const CELL_SELECTION_DIRECTIONS = {
 		ArrowDown: "down",
 		ArrowLeft: "left",
@@ -12995,7 +13024,7 @@
 		}
 		_createTable() {
 			this._unsubscribeState?.();
-			const table = createGridTable(this._config);
+			const table = createGridTable(this._config, () => this._element);
 			this._unsubscribeState = subscribeToTableState(table, (previous, next) => {
 				this._notifyStateChange(previous, next);
 				this._scheduler.schedule();
@@ -13497,7 +13526,7 @@
 			if (!result) return;
 			event.preventDefault();
 			if (this._config.cellSelection && found.cell.rowIndex >= 0 && result.cell.rowIndex >= 0) {
-				const direction = CELL_SELECTION_DIRECTIONS[event.key];
+				const direction = CELL_SELECTION_DIRECTIONS[isElementRTL(this._element) ? INVERTED_ARROWS[event.key] ?? event.key : event.key];
 				if (event.shiftKey && direction) {
 					this._table.extendCellSelection(direction);
 					this._scheduler.schedule();
@@ -13740,7 +13769,8 @@
 				columnIds: this._visibleLeafColumns().map((column) => column.id),
 				rowCount,
 				pageStep: paginated ? this._table.store.state.pagination.pageSize : Math.max(1, viewportRows || rowCount),
-				paginated
+				paginated,
+				rtl: isElementRTL(this._element)
 			};
 		}
 		_cellElementFor(cell) {
@@ -13939,6 +13969,7 @@
 			const key = (event.delegateTarget ?? event.target).closest("th")?.dataset.coreuiColumn;
 			if (!key) return;
 			if (event.type === "mousedown") event.preventDefault();
+			syncResizeDirection(this._table, this._element);
 			(this._table.getHeaderGroups()[0]?.headers.find((item) => item.column.id === key))?.getResizeHandler()(event);
 		}
 		_toggleRowSelection(event) {