@adapttable/mantine 0.2.2 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @adapttable/mantine
 
+## 0.3.1
+
+### Patch Changes
+
+- 6ab1391: docs: every package README now leads with a click-to-play demo — a poster (with
+  a play button) that links to an mp4 of the table in action — replacing the
+  autoplaying GIF. Republishing so the new READMEs land on npm.
+- Updated dependencies [6ab1391]
+  - @adapttable/core@0.3.1
+
+## 0.3.0
+
+### Minor Changes
+
+- a90a2c2: Logical column pinning, so pinning stays correct under RTL.
+
+  **Breaking.** Pinned-side values are now `"start"` / `"end"` (were `"left"` /
+  `"right"`) — this is the public `pinned` layout value and the `colPin` URL token
+  (e.g. `colPin=name:start`); pre-existing `left`/`right` URLs no longer parse. The
+  label keys `pinLeft` / `pinRight` / `moveLeft` / `moveRight` are renamed to
+  `pinStart` / `pinEnd` / `moveStart` / `moveEnd`, with logical display strings
+  shipped for every locale. Pinning a data column is now a start-only toggle; the
+  injected actions column keeps its one-click end-pin.
+
+  To migrate: update any `defaultColumnLayout={{ pinned: { x: "left" } }}` to
+  `"start"` (and `"right"` → `"end"`), any persisted `colPin` URLs, and any custom
+  `labels` overriding the renamed keys.
+
+- a90a2c2: Numbered page buttons in every adapter's pagination (with first/last and
+  ellipsis truncation), replacing the prev/next-only control — driven by a shared
+  `paginationItems` builder in `@adapttable/core`.
+
+### Patch Changes
+
+- Updated dependencies [a90a2c2]
+- Updated dependencies [a90a2c2]
+  - @adapttable/core@0.3.0
+
 ## 0.2.2
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,8 @@
 # @adapttable/mantine
 
-![@adapttable/mantine — a Mantine data table built on AdaptTable](https://raw.githubusercontent.com/orwa-mahmoud/adapttable/main/assets/hero-mantine.png)
+[![@adapttable/mantine — a Mantine data table built on AdaptTable](https://orwa-mahmoud.github.io/adapttable/media/demo-mantine-poster.png)](https://orwa-mahmoud.github.io/adapttable/media/demo-mantine.mp4)
+
+▶ **[Watch the demo](https://orwa-mahmoud.github.io/adapttable/media/demo-mantine.mp4)**
 
 **[📖 Documentation](https://orwa-mahmoud.github.io/adapttable/)** · **[🚀 Live demo](https://orwa-mahmoud.github.io/adapttable/demo/)** · **[Get started](https://orwa-mahmoud.github.io/adapttable/getting-started/)**
 

package/dist/index.cjs

@@ -1010,7 +1010,7 @@ function ActionsRow(t0) {
 		$[1] = t1;
 	} else t1 = $[1];
 	const hidden = t1;
-	const pinned = layout.state.pinned[_adapttable_core.ACTIONS_COLUMN_KEY] === "right";
+	const pinned = layout.state.pinned[_adapttable_core.ACTIONS_COLUMN_KEY] === "end";
 	let t2;
 	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, { w: 22 });
@@ -1035,10 +1035,10 @@ function ActionsRow(t0) {
 		$[7] = t3;
 		$[8] = t4;
 	} else t4 = $[8];
-	const t5 = `${pinned ? labels.unpin : labels.pinRight}: ${labels.actions}`;
+	const t5 = `${pinned ? labels.unpin : labels.pinEnd}: ${labels.actions}`;
 	let t6;
 	if ($[9] !== layout || $[10] !== pinned) {
-		t6 = () => layout.setPinned(_adapttable_core.ACTIONS_COLUMN_KEY, pinned ? void 0 : "right");
+		t6 = () => layout.setPinned(_adapttable_core.ACTIONS_COLUMN_KEY, pinned ? void 0 : "end");
 		$[9] = layout;
 		$[10] = pinned;
 		$[11] = t6;
@@ -1136,7 +1136,7 @@ function ColumnMenu(t0) {
 							color: "gray",
 							size: "sm",
 							style: { cursor: "grab" },
-							...(0, _adapttable_core.columnReorderKeyProps)(r.key, r.index, layout.move, `${labels.moveLeft} / ${labels.moveRight}: ${r.name}`),
+							...(0, _adapttable_core.columnReorderKeyProps)(r.key, r.index, layout.move, `${labels.moveStart} / ${labels.moveEnd}: ${r.name}`),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_adapttable_core.GripIcon, {})
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowVisibility, {
@@ -1844,7 +1844,7 @@ function desktopRowPropsEqual(prev, next) {
 function leadingPinStyle(active, inset, zIndex, background) {
 	if (!active) return void 0;
 	const style = (0, _adapttable_core.pinnedCellStyle)({
-		side: "left",
+		side: "start",
 		inset
 	}, zIndex);
 	return background ? {
@@ -1857,11 +1857,11 @@ function leadingPinStyle(active, inset, zIndex, background) {
 * columns). Memoized rows compare this one string instead of the per-render
 * style objects derived from it.
 */
-function pinLayoutSignature(columns, pinOffset, hasLeftPin, actionsEdgePinned) {
+function pinLayoutSignature(columns, pinOffset, hasStartPin, actionsEdgePinned) {
 	return `${columns.map((column) => {
 		const pin = pinOffset?.(column.key);
 		return pin ? `${column.key}:${pin.side}${pin.inset}` : column.key;
-	}).join("|")}|${String(hasLeftPin)}|${String(actionsEdgePinned)}`;
+	}).join("|")}|${String(hasStartPin)}|${String(actionsEdgePinned)}`;
 }
 /**
 * One desktop row (plus its detail row when expanded), extracted so it can
@@ -2035,8 +2035,8 @@ function DesktopTable({ table, rows, rowActions, confirm, prefetch, onRowClick,
 	const expandable = expansion !== void 0;
 	const groupCells = (0, _adapttable_core.headerGroupRow)(columns);
 	const summaryCells = summaryRow?.(rows);
-	const hasRightPin = table.columns.some((c) => pinOffset?.(c.key)?.side === "right");
-	const actionsEdgePinned = showActions && (hasRightPin || actionsPinned);
+	const hasEndPin = table.columns.some((c) => pinOffset?.(c.key)?.side === "end");
+	const actionsEdgePinned = showActions && (hasEndPin || actionsPinned);
 	const hasPinned = table.columns.some((c_0) => pinOffset?.(c_0.key) != null) || actionsEdgePinned;
 	const { ref: wrapperRef, overflowing } = (0, _adapttable_core.useHorizontalOverflow)();
 	const headerCellStyle = stickyHeader ? {
@@ -2051,10 +2051,10 @@ function DesktopTable({ table, rows, rowActions, confirm, prefetch, onRowClick,
 	const actionsWidth = 120;
 	const expansionLead = expandable ? expansionWidth : 0;
 	const leads = {
-		left: expansionLead + (selection ? selectionWidth : 0),
-		right: showActions ? actionsWidth : 0
+		start: expansionLead + (selection ? selectionWidth : 0),
+		end: showActions ? actionsWidth : 0
 	};
-	const hasLeftPin = table.columns.some((c_1) => pinOffset?.(c_1.key)?.side === "left");
+	const hasStartPin = table.columns.some((c_1) => pinOffset?.(c_1.key)?.side === "start");
 	const pinBg = "var(--mantine-color-body)";
 	const headerStyleFor = (column) => {
 		const key = column.key;
@@ -2069,15 +2069,15 @@ function DesktopTable({ table, rows, rowActions, confirm, prefetch, onRowClick,
 	};
 	const expansionHeaderStyle = {
 		...headerCellStyle,
-		...leadingPinStyle(hasLeftPin, 0, _adapttable_core.PIN_Z.headerPinned)
+		...leadingPinStyle(hasStartPin, 0, _adapttable_core.PIN_Z.headerPinned)
 	};
 	const selectionHeaderStyle = {
 		...headerCellStyle,
-		...leadingPinStyle(hasLeftPin, expansionLead, _adapttable_core.PIN_Z.headerPinned)
+		...leadingPinStyle(hasStartPin, expansionLead, _adapttable_core.PIN_Z.headerPinned)
 	};
 	const actionsHeaderStyle = {
 		...headerCellStyle,
-		...(0, _adapttable_core.edgePinStyle)("right", actionsEdgePinned, _adapttable_core.PIN_Z.headerPinned)
+		...(0, _adapttable_core.edgePinStyle)("end", actionsEdgePinned, _adapttable_core.PIN_Z.headerPinned)
 	};
 	const edgeBodyStyle = (side, active) => {
 		const pin_0 = (0, _adapttable_core.edgePinStyle)(side, active, _adapttable_core.PIN_Z.body);
@@ -2086,9 +2086,9 @@ function DesktopTable({ table, rows, rowActions, confirm, prefetch, onRowClick,
 			background: pinBg
 		} : void 0;
 	};
-	const expansionCellStyle = leadingPinStyle(hasLeftPin, 0, _adapttable_core.PIN_Z.body, pinBg);
-	const selectionCellStyle = leadingPinStyle(hasLeftPin, expansionLead, _adapttable_core.PIN_Z.body, pinBg);
-	const actionsCellStyle = edgeBodyStyle("right", actionsEdgePinned);
+	const expansionCellStyle = leadingPinStyle(hasStartPin, 0, _adapttable_core.PIN_Z.body, pinBg);
+	const selectionCellStyle = leadingPinStyle(hasStartPin, expansionLead, _adapttable_core.PIN_Z.body, pinBg);
+	const actionsCellStyle = edgeBodyStyle("end", actionsEdgePinned);
 	const columnName = (column_0) => typeof column_0.header === "string" ? column_0.header : column_0.key;
 	const resizeHandleFor = (column_1) => setWidth ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		...(0, _adapttable_core.columnResizeHandleProps)(column_1.key, setWidth, `${resizeLabel}: ${columnName(column_1)}`),
@@ -2110,7 +2110,7 @@ function DesktopTable({ table, rows, rowActions, confirm, prefetch, onRowClick,
 	selectionRef.current = selection;
 	const toggleSelect = (0, react.useCallback)((id) => selectionRef.current.toggle(id), []);
 	const Row = (0, react.useMemo)(() => (0, react.memo)(DesktopRowBase, desktopRowPropsEqual), []);
-	const pinSignature = pinLayoutSignature(columns, pinOffset, hasLeftPin, actionsEdgePinned);
+	const pinSignature = pinLayoutSignature(columns, pinOffset, hasStartPin, actionsEdgePinned);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: (node) => {
 			wrapperRef(node);
@@ -3620,7 +3620,7 @@ function DataTable(props) {
 		$[2] = t5;
 	} else t5 = $[2];
 	const visibleRowActions = t5;
-	const actionsPinned = chrome.columnLayout.state.pinned[_adapttable_core.ACTIONS_COLUMN_KEY] === "right";
+	const actionsPinned = chrome.columnLayout.state.pinned[_adapttable_core.ACTIONS_COLUMN_KEY] === "end";
 	const { virtualization, loadMoreRef, canLoadMore, virtualScrollRef } = (0, _adapttable_core.useChromeBodyData)(chrome, chromeProps);
 	const [drawerOpened, setDrawerOpened] = (0, react.useState)(false);
 	const filtersTrigger = (0, _adapttable_core.useFilterTriggerToggle)(drawerOpened, setDrawerOpened);