@multiplatform.one/table 6.0.0

package/dist/cjs/components/DataTableColumnPinning/DataTableColumnPinning.spec.cjs

@@ -0,0 +1,287 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var import_react_table = require("@tanstack/react-table");
+var import_react = require("@testing-library/react");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_react2 = __toESM(require("react"));
+var import_vitest = require("vitest");
+var import_index = require("./index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const mockData = [{
+  id: 1,
+  name: "John Doe",
+  email: "john@example.com",
+  role: "Admin",
+  status: "Active"
+}, {
+  id: 2,
+  name: "Jane Smith",
+  email: "jane@example.com",
+  role: "User",
+  status: "Active"
+}, {
+  id: 3,
+  name: "Bob Johnson",
+  email: "bob@example.com",
+  role: "User",
+  status: "Inactive"
+}];
+const columnHelper = (0, import_react_table.createColumnHelper)();
+const columns = [columnHelper.accessor("id", {
+  header: "ID",
+  cell: info => info.getValue()
+}), columnHelper.accessor("name", {
+  header: "Name",
+  cell: info => info.getValue()
+}), columnHelper.accessor("email", {
+  header: "Email",
+  cell: info => info.getValue()
+}), columnHelper.accessor("role", {
+  header: "Role",
+  cell: info => info.getValue()
+}), columnHelper.accessor("status", {
+  header: "Status",
+  cell: info => info.getValue()
+})];
+function TestComponent({
+  onPinChange,
+  maxPinnedColumns = 3,
+  allowPinning = true
+}) {
+  const [pinnedColumns, setPinnedColumns] = import_react2.default.useState({
+    left: [],
+    right: []
+  });
+  const [forceRender, setForceRender] = import_react2.default.useState(0);
+  const table = (0, import_react_table.useReactTable)({
+    data: mockData,
+    columns,
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
+    state: {
+      columnPinning: pinnedColumns
+    },
+    onColumnPinningChange: updater => {
+      const newState = typeof updater === "function" ? updater(pinnedColumns) : updater;
+      setPinnedColumns({
+        left: newState.left || [],
+        right: newState.right || []
+      });
+      setForceRender(prev => prev + 1);
+    }
+  });
+  const pinning = (0, import_index.DataTableColumnPinning)({
+    table,
+    onPinChange,
+    maxPinnedColumns,
+    allowPinning
+  });
+  import_react2.default.useEffect(() => {}, [forceRender]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    children: [table.getAllColumns().map(column => /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      "data-testid": `column-${column.id}`,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+        children: column.id
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(pinning.PinButton, {
+        columnId: column.id,
+        position: "left"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+        "data-testid": `pinned-${column.id}`,
+        children: pinning.isPinned(column.id) ? "pinned" : "not-pinned"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+        "data-testid": `position-${column.id}`,
+        children: pinning.getPinPosition(column.id) || "none"
+      })]
+    }, column.id)), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      "data-testid": "pinned-left",
+      children: pinning.pinnedLeftColumns.length
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      "data-testid": "pinned-right",
+      children: pinning.pinnedRightColumns.length
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      "data-testid": "scrollable",
+      children: pinning.scrollableColumns.length
+    })]
+  });
+}
+(0, import_vitest.describe)("DataTableColumnPinning", () => {
+  (0, import_vitest.it)("should render without errors", () => {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {}));
+    (0, import_vitest.expect)(import_react.screen.getByTestId("column-id")).toBeDefined();
+    (0, import_vitest.expect)(import_react.screen.getByTestId("column-name")).toBeDefined();
+  });
+  (0, import_vitest.it)("should pin column to left", async () => {
+    const onPinChange = import_vitest.vi.fn();
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {
+      onPinChange
+    }));
+    const nameColumn = import_react.screen.getByTestId("column-name");
+    const pinButton = nameColumn.querySelector('[role="button"], button');
+    (0, import_vitest.expect)(import_react.screen.getByTestId("pinned-name")).toHaveTextContent("not-pinned");
+    (0, import_vitest.expect)(import_react.screen.getByTestId("position-name")).toHaveTextContent("none");
+    import_react.fireEvent.click(pinButton);
+    await (0, import_react.waitFor)(() => {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("pinned-name")).toHaveTextContent("pinned");
+      (0, import_vitest.expect)(import_react.screen.getByTestId("position-name")).toHaveTextContent("left");
+      (0, import_vitest.expect)(onPinChange).toHaveBeenCalledWith("name", "left");
+    });
+  });
+  (0, import_vitest.it)("should track pin state changes", async () => {
+    const onPinChange = import_vitest.vi.fn();
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {
+      onPinChange
+    }));
+    const nameColumn = import_react.screen.getByTestId("column-name");
+    const pinButton = nameColumn.querySelector('[role="button"], button');
+    (0, import_vitest.expect)(pinButton).toBeDefined();
+    (0, import_vitest.expect)(import_react.screen.getByTestId("pinned-name")).toHaveTextContent("not-pinned");
+  });
+  (0, import_vitest.it)("should render with maxPinnedColumns prop", async () => {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {
+      maxPinnedColumns: 2
+    }));
+    const idButton = import_react.screen.getByTestId("column-id").querySelector('[role="button"], button');
+    const nameButton = import_react.screen.getByTestId("column-name").querySelector('[role="button"], button');
+    (0, import_vitest.expect)(idButton).toBeDefined();
+    (0, import_vitest.expect)(nameButton).toBeDefined();
+    (0, import_vitest.expect)(import_react.screen.getByTestId("pinned-left")).toHaveTextContent("0");
+  });
+  (0, import_vitest.it)("should not show pin buttons when allowPinning is false", () => {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {
+      allowPinning: false
+    }));
+    const buttons = import_react.screen.queryAllByRole("button");
+    (0, import_vitest.expect)(buttons).toHaveLength(0);
+  });
+  (0, import_vitest.it)("should correctly categorize columns", async () => {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {}));
+    (0, import_vitest.expect)(import_react.screen.getByTestId("pinned-left")).toHaveTextContent("0");
+    (0, import_vitest.expect)(import_react.screen.getByTestId("pinned-right")).toHaveTextContent("0");
+    (0, import_vitest.expect)(import_react.screen.getByTestId("scrollable")).toHaveTextContent("5");
+    const nameButton = import_react.screen.getByTestId("column-name").querySelector('[role="button"], button');
+    import_react.fireEvent.click(nameButton);
+    await (0, import_react.waitFor)(() => {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("pinned-left")).toHaveTextContent("1");
+      (0, import_vitest.expect)(import_react.screen.getByTestId("scrollable")).toHaveTextContent("4");
+    });
+  });
+});
+(0, import_vitest.describe)("useColumnPinning", () => {
+  function HookTestComponent() {
+    const table = (0, import_react_table.useReactTable)({
+      data: mockData,
+      columns,
+      getCoreRowModel: (0, import_react_table.getCoreRowModel)()
+    });
+    const {
+      pinnedState,
+      pinColumn,
+      unpinColumn,
+      resetPinning
+    } = (0, import_index.useColumnPinning)(table, {
+      maxPinnedColumns: 2,
+      initialPinnedColumns: {
+        left: ["id"],
+        right: []
+      }
+    });
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        "data-testid": "left-pins",
+        children: pinnedState.left.join(",")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        "data-testid": "right-pins",
+        children: pinnedState.right.join(",")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+        type: "button",
+        onClick: () => pinColumn("name", "left"),
+        children: "Pin Name Left"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+        type: "button",
+        onClick: () => pinColumn("email", "right"),
+        children: "Pin Email Right"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+        type: "button",
+        onClick: () => unpinColumn("id"),
+        children: "Unpin ID"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+        type: "button",
+        onClick: () => resetPinning(),
+        children: "Reset"
+      })]
+    });
+  }
+  (0, import_vitest.it)("should initialize with provided pinned columns", () => {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(HookTestComponent, {}));
+    (0, import_vitest.expect)(import_react.screen.getByTestId("left-pins")).toHaveTextContent("id");
+    (0, import_vitest.expect)(import_react.screen.getByTestId("right-pins")).toHaveTextContent("");
+  });
+  (0, import_vitest.it)("should pin column to specified position", async () => {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(HookTestComponent, {}));
+    const pinNameButton = import_react.screen.getByText("Pin Name Left");
+    import_react.fireEvent.click(pinNameButton);
+    await (0, import_react.waitFor)(() => {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("left-pins")).toHaveTextContent("id,name");
+    });
+    const pinEmailButton = import_react.screen.getByText("Pin Email Right");
+    import_react.fireEvent.click(pinEmailButton);
+    await (0, import_react.waitFor)(() => {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("right-pins")).toHaveTextContent("email");
+    });
+  });
+  (0, import_vitest.it)("should unpin column", async () => {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(HookTestComponent, {}));
+    const unpinButton = import_react.screen.getByText("Unpin ID");
+    import_react.fireEvent.click(unpinButton);
+    await (0, import_react.waitFor)(() => {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("left-pins")).toHaveTextContent("");
+    });
+  });
+  (0, import_vitest.it)("should reset all pinning", async () => {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(HookTestComponent, {}));
+    import_react.fireEvent.click(import_react.screen.getByText("Pin Name Left"));
+    import_react.fireEvent.click(import_react.screen.getByText("Pin Email Right"));
+    await (0, import_react.waitFor)(() => {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("left-pins")).not.toHaveTextContent("");
+      (0, import_vitest.expect)(import_react.screen.getByTestId("right-pins")).not.toHaveTextContent("");
+    });
+    import_react.fireEvent.click(import_react.screen.getByText("Reset"));
+    await (0, import_react.waitFor)(() => {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("left-pins")).toHaveTextContent("");
+      (0, import_vitest.expect)(import_react.screen.getByTestId("right-pins")).toHaveTextContent("");
+    });
+  });
+  (0, import_vitest.it)("should move column between positions", async () => {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(HookTestComponent, {}));
+    import_react.fireEvent.click(import_react.screen.getByText("Pin Name Left"));
+    await (0, import_react.waitFor)(() => {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("left-pins")).toHaveTextContent("id,name");
+    });
+    import_react.fireEvent.click(import_react.screen.getByText("Pin Email Right"));
+    await (0, import_react.waitFor)(() => {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("right-pins")).toHaveTextContent("email");
+      (0, import_vitest.expect)(import_react.screen.getByTestId("left-pins")).toHaveTextContent("id,name");
+    });
+  });
+});

package/dist/cjs/components/DataTableColumnPinning/DataTableColumnPinning.spec.native.js

@@ -0,0 +1,315 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_table = require("@tanstack/react-table");
+var import_react = require("@testing-library/react");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_react2 = __toESM(require("react"));
+var import_vitest = require("vitest");
+var import_index = require("./index.native.js");
+var mockData = [{
+  id: 1,
+  name: "John Doe",
+  email: "john@example.com",
+  role: "Admin",
+  status: "Active"
+}, {
+  id: 2,
+  name: "Jane Smith",
+  email: "jane@example.com",
+  role: "User",
+  status: "Active"
+}, {
+  id: 3,
+  name: "Bob Johnson",
+  email: "bob@example.com",
+  role: "User",
+  status: "Inactive"
+}];
+var columnHelper = (0, import_react_table.createColumnHelper)();
+var columns = [columnHelper.accessor("id", {
+  header: "ID",
+  cell: function cell(info) {
+    return info.getValue();
+  }
+}), columnHelper.accessor("name", {
+  header: "Name",
+  cell: function cell2(info) {
+    return info.getValue();
+  }
+}), columnHelper.accessor("email", {
+  header: "Email",
+  cell: function cell3(info) {
+    return info.getValue();
+  }
+}), columnHelper.accessor("role", {
+  header: "Role",
+  cell: function cell4(info) {
+    return info.getValue();
+  }
+}), columnHelper.accessor("status", {
+  header: "Status",
+  cell: function cell5(info) {
+    return info.getValue();
+  }
+})];
+function TestComponent(param) {
+  var {
+    onPinChange,
+    maxPinnedColumns = 3,
+    allowPinning = true
+  } = param;
+  var [pinnedColumns, setPinnedColumns] = import_react2.default.useState({
+    left: [],
+    right: []
+  });
+  var [forceRender, setForceRender] = import_react2.default.useState(0);
+  var table = (0, import_react_table.useReactTable)({
+    data: mockData,
+    columns,
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
+    state: {
+      columnPinning: pinnedColumns
+    },
+    onColumnPinningChange: function onColumnPinningChange(updater) {
+      var newState = typeof updater === "function" ? updater(pinnedColumns) : updater;
+      setPinnedColumns({
+        left: newState.left || [],
+        right: newState.right || []
+      });
+      setForceRender(function (prev) {
+        return prev + 1;
+      });
+    }
+  });
+  var pinning = (0, import_index.DataTableColumnPinning)({
+    table,
+    onPinChange,
+    maxPinnedColumns,
+    allowPinning
+  });
+  import_react2.default.useEffect(function () {},
+  // This effect will run whenever forceRender changes, ensuring the component re-renders
+  [forceRender]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    children: [table.getAllColumns().map(function (column) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+        "data-testid": `column-${column.id}`,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+          children: column.id
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(pinning.PinButton, {
+          columnId: column.id,
+          position: "left"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+          "data-testid": `pinned-${column.id}`,
+          children: pinning.isPinned(column.id) ? "pinned" : "not-pinned"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+          "data-testid": `position-${column.id}`,
+          children: pinning.getPinPosition(column.id) || "none"
+        })]
+      }, column.id);
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      "data-testid": "pinned-left",
+      children: pinning.pinnedLeftColumns.length
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      "data-testid": "pinned-right",
+      children: pinning.pinnedRightColumns.length
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      "data-testid": "scrollable",
+      children: pinning.scrollableColumns.length
+    })]
+  });
+}
+(0, import_vitest.describe)("DataTableColumnPinning", function () {
+  (0, import_vitest.it)("should render without errors", function () {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {}));
+    (0, import_vitest.expect)(import_react.screen.getByTestId("column-id")).toBeDefined();
+    (0, import_vitest.expect)(import_react.screen.getByTestId("column-name")).toBeDefined();
+  });
+  (0, import_vitest.it)("should pin column to left", async function () {
+    var onPinChange = import_vitest.vi.fn();
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {
+      onPinChange
+    }));
+    var nameColumn = import_react.screen.getByTestId("column-name");
+    var pinButton = nameColumn.querySelector('[role="button"], button');
+    (0, import_vitest.expect)(import_react.screen.getByTestId("pinned-name")).toHaveTextContent("not-pinned");
+    (0, import_vitest.expect)(import_react.screen.getByTestId("position-name")).toHaveTextContent("none");
+    import_react.fireEvent.click(pinButton);
+    await (0, import_react.waitFor)(function () {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("pinned-name")).toHaveTextContent("pinned");
+      (0, import_vitest.expect)(import_react.screen.getByTestId("position-name")).toHaveTextContent("left");
+      (0, import_vitest.expect)(onPinChange).toHaveBeenCalledWith("name", "left");
+    });
+  });
+  (0, import_vitest.it)("should track pin state changes", async function () {
+    var onPinChange = import_vitest.vi.fn();
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {
+      onPinChange
+    }));
+    var nameColumn = import_react.screen.getByTestId("column-name");
+    var pinButton = nameColumn.querySelector('[role="button"], button');
+    (0, import_vitest.expect)(pinButton).toBeDefined();
+    (0, import_vitest.expect)(import_react.screen.getByTestId("pinned-name")).toHaveTextContent("not-pinned");
+  });
+  (0, import_vitest.it)("should render with maxPinnedColumns prop", async function () {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {
+      maxPinnedColumns: 2
+    }));
+    var idButton = import_react.screen.getByTestId("column-id").querySelector('[role="button"], button');
+    var nameButton = import_react.screen.getByTestId("column-name").querySelector('[role="button"], button');
+    (0, import_vitest.expect)(idButton).toBeDefined();
+    (0, import_vitest.expect)(nameButton).toBeDefined();
+    (0, import_vitest.expect)(import_react.screen.getByTestId("pinned-left")).toHaveTextContent("0");
+  });
+  (0, import_vitest.it)("should not show pin buttons when allowPinning is false", function () {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {
+      allowPinning: false
+    }));
+    var buttons = import_react.screen.queryAllByRole("button");
+    (0, import_vitest.expect)(buttons).toHaveLength(0);
+  });
+  (0, import_vitest.it)("should correctly categorize columns", async function () {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {}));
+    (0, import_vitest.expect)(import_react.screen.getByTestId("pinned-left")).toHaveTextContent("0");
+    (0, import_vitest.expect)(import_react.screen.getByTestId("pinned-right")).toHaveTextContent("0");
+    (0, import_vitest.expect)(import_react.screen.getByTestId("scrollable")).toHaveTextContent("5");
+    var nameButton = import_react.screen.getByTestId("column-name").querySelector('[role="button"], button');
+    import_react.fireEvent.click(nameButton);
+    await (0, import_react.waitFor)(function () {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("pinned-left")).toHaveTextContent("1");
+      (0, import_vitest.expect)(import_react.screen.getByTestId("scrollable")).toHaveTextContent("4");
+    });
+  });
+});
+(0, import_vitest.describe)("useColumnPinning", function () {
+  function HookTestComponent() {
+    var table = (0, import_react_table.useReactTable)({
+      data: mockData,
+      columns,
+      getCoreRowModel: (0, import_react_table.getCoreRowModel)()
+    });
+    var {
+      pinnedState,
+      pinColumn,
+      unpinColumn,
+      resetPinning
+    } = (0, import_index.useColumnPinning)(table, {
+      maxPinnedColumns: 2,
+      initialPinnedColumns: {
+        left: ["id"],
+        right: []
+      }
+    });
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        "data-testid": "left-pins",
+        children: pinnedState.left.join(",")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        "data-testid": "right-pins",
+        children: pinnedState.right.join(",")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+        type: "button",
+        onClick: function onClick() {
+          return pinColumn("name", "left");
+        },
+        children: "Pin Name Left"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+        type: "button",
+        onClick: function onClick() {
+          return pinColumn("email", "right");
+        },
+        children: "Pin Email Right"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+        type: "button",
+        onClick: function onClick() {
+          return unpinColumn("id");
+        },
+        children: "Unpin ID"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+        type: "button",
+        onClick: function onClick() {
+          return resetPinning();
+        },
+        children: "Reset"
+      })]
+    });
+  }
+  (0, import_vitest.it)("should initialize with provided pinned columns", function () {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(HookTestComponent, {}));
+    (0, import_vitest.expect)(import_react.screen.getByTestId("left-pins")).toHaveTextContent("id");
+    (0, import_vitest.expect)(import_react.screen.getByTestId("right-pins")).toHaveTextContent("");
+  });
+  (0, import_vitest.it)("should pin column to specified position", async function () {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(HookTestComponent, {}));
+    var pinNameButton = import_react.screen.getByText("Pin Name Left");
+    import_react.fireEvent.click(pinNameButton);
+    await (0, import_react.waitFor)(function () {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("left-pins")).toHaveTextContent("id,name");
+    });
+    var pinEmailButton = import_react.screen.getByText("Pin Email Right");
+    import_react.fireEvent.click(pinEmailButton);
+    await (0, import_react.waitFor)(function () {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("right-pins")).toHaveTextContent("email");
+    });
+  });
+  (0, import_vitest.it)("should unpin column", async function () {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(HookTestComponent, {}));
+    var unpinButton = import_react.screen.getByText("Unpin ID");
+    import_react.fireEvent.click(unpinButton);
+    await (0, import_react.waitFor)(function () {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("left-pins")).toHaveTextContent("");
+    });
+  });
+  (0, import_vitest.it)("should reset all pinning", async function () {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(HookTestComponent, {}));
+    import_react.fireEvent.click(import_react.screen.getByText("Pin Name Left"));
+    import_react.fireEvent.click(import_react.screen.getByText("Pin Email Right"));
+    await (0, import_react.waitFor)(function () {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("left-pins")).not.toHaveTextContent("");
+      (0, import_vitest.expect)(import_react.screen.getByTestId("right-pins")).not.toHaveTextContent("");
+    });
+    import_react.fireEvent.click(import_react.screen.getByText("Reset"));
+    await (0, import_react.waitFor)(function () {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("left-pins")).toHaveTextContent("");
+      (0, import_vitest.expect)(import_react.screen.getByTestId("right-pins")).toHaveTextContent("");
+    });
+  });
+  (0, import_vitest.it)("should move column between positions", async function () {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(HookTestComponent, {}));
+    import_react.fireEvent.click(import_react.screen.getByText("Pin Name Left"));
+    await (0, import_react.waitFor)(function () {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("left-pins")).toHaveTextContent("id,name");
+    });
+    import_react.fireEvent.click(import_react.screen.getByText("Pin Email Right"));
+    await (0, import_react.waitFor)(function () {
+      (0, import_vitest.expect)(import_react.screen.getByTestId("right-pins")).toHaveTextContent("email");
+      (0, import_vitest.expect)(import_react.screen.getByTestId("left-pins")).toHaveTextContent("id,name");
+    });
+  });
+});
+//# sourceMappingURL=DataTableColumnPinning.spec.native.js.map

package/dist/cjs/components/DataTableColumnPinning/DataTableColumnPinning.spec.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["import_jsx_runtime","require","import_react_table","import_react","import_test_utils","import_react2","__toESM","import_vitest","import_index","mockData","id","name","email","role","status","columnHelper","createColumnHelper","columns","accessor","header","cell","info","getValue","cell2","cell3","cell4","cell5","TestComponent","param","onPinChange","maxPinnedColumns","allowPinning","pinnedColumns","setPinnedColumns","default","useState","left","right","forceRender","setForceRender","table","useReactTable","data","getCoreRowModel","state","columnPinning","onColumnPinningChange","updater","newState","prev","pinning","DataTableColumnPinning","useEffect","jsxs","children","getAllColumns","map","column","jsx","PinButton","columnId","position","isPinned","getPinPosition","pinnedLeftColumns","length","pinnedRightColumns","scrollableColumns","describe","it","renderWithProviders","expect","screen","getByTestId","toBeDefined","vi","fn","nameColumn","pinButton","querySelector","toHaveTextContent","fireEvent","click","waitFor","toHaveBeenCalledWith","idButton","nameButton","buttons","queryAllByRole","toHaveLength","HookTestComponent","pinnedState","pinColumn","unpinColumn","resetPinning","useColumnPinning","initialPinnedColumns","join"],"sources":["../../../../src/components/DataTableColumnPinning/DataTableColumnPinning.spec.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}