@dmsi/wedgekit-react 0.0.4

package/dist/components/DataTable.cjs

@@ -0,0 +1,791 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/DataTable.tsx
+var DataTable_exports = {};
+__export(DataTable_exports, {
+  DataTable: () => DataTable,
+  EditingProvider: () => EditingProvider,
+  default: () => Toggle
+});
+module.exports = __toCommonJS(DataTable_exports);
+var import_react2 = __toESM(require("react"), 1);
+var import_react_table = require("@tanstack/react-table");
+var import_clsx = __toESM(require("clsx"), 1);
+var import_core = require("@dnd-kit/core");
+var import_modifiers = require("@dnd-kit/modifiers");
+var import_sortable = require("@dnd-kit/sortable");
+var import_sortable2 = require("@dnd-kit/sortable");
+
+// ../../node_modules/@dnd-kit/utilities/dist/utilities.esm.js
+var import_react = require("react");
+var canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+var CSS = /* @__PURE__ */ Object.freeze({
+  Translate: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      const {
+        x,
+        y
+      } = transform;
+      return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
+    }
+  },
+  Scale: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      const {
+        scaleX,
+        scaleY
+      } = transform;
+      return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
+    }
+  },
+  Transform: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
+    }
+  },
+  Transition: {
+    toString(_ref) {
+      let {
+        property,
+        duration,
+        easing
+      } = _ref;
+      return property + " " + duration + "ms " + easing;
+    }
+  }
+});
+
+// src/components/DataTable.tsx
+var import_react3 = require("@headlessui/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var columns = [
+  {
+    header: "Order ID",
+    accessorKey: "orderId",
+    id: "orderId",
+    meta: {
+      sticky: true
+    }
+  },
+  {
+    header: "Actions",
+    id: "actions",
+    cell: () => {
+      const items = [
+        {
+          label: "Release",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" })
+        },
+        { label: "XML", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" }) },
+        { label: "Copy", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" }) },
+        { label: "Quote", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" }) },
+        { label: "Retail", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" }) }
+      ];
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-row gap-3", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: "flex flex-col items-center justify-center gap-1",
+          children: [
+            item.icon,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[0.6rem] block text-neutral-500 font-semibold", children: item.label })
+          ]
+        },
+        index
+      )) });
+    }
+  },
+  {
+    header: "PO ID",
+    accessorKey: "poId",
+    id: "poId"
+  },
+  {
+    header: "Job ID",
+    accessorKey: "jobId",
+    id: "jobId"
+  },
+  {
+    header: "Reference",
+    accessorKey: "reference",
+    id: "reference",
+    meta: {
+      className: "hidden md:table-cell"
+    }
+  },
+  {
+    header: "Status",
+    accessorKey: "shipToStatus",
+    id: "shipToStatus",
+    meta: {
+      filterVariant: "select"
+    }
+  },
+  {
+    header: "Ordered date",
+    accessorKey: "orderedDate",
+    id: "orderedDate"
+  },
+  {
+    header: "Reference 1",
+    accessorKey: "reference1",
+    id: "reference1",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 12",
+    accessorKey: "reference12",
+    id: "reference12",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 13",
+    accessorKey: "reference13",
+    id: "reference13",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 14",
+    accessorKey: "reference14",
+    id: "reference14",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 15",
+    accessorKey: "reference15",
+    id: "reference15",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 16",
+    accessorKey: "reference16",
+    id: "reference16",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 17",
+    accessorKey: "reference17",
+    id: "reference17",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 18",
+    accessorKey: "reference18",
+    id: "reference18",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 19",
+    accessorKey: "reference19",
+    id: "reference19",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 10",
+    accessorKey: "reference10",
+    id: "reference10",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 11",
+    accessorKey: "reference11",
+    id: "reference11",
+    meta: { className: "hidden md:table-cell" }
+  }
+];
+var EditingContext = (0, import_react2.createContext)({
+  data: [],
+  setValue: (row, key, value) => {
+    console.log(row, key, value);
+  }
+});
+var EditingProvider = ({ data, children }) => {
+  const [actual, setData] = (0, import_react2.useState)(data);
+  (0, import_react2.useEffect)(() => console.log("data changed"), [actual]);
+  const context = {
+    data: actual,
+    setValue: (row, key, value) => {
+      setData((prev) => {
+        const newData = [...prev];
+        newData[row] = __spreadProps(__spreadValues({}, newData[row]), {
+          [key]: value
+        });
+        return newData;
+      });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditingContext, { value: context, children });
+};
+var DataTable = ({ data }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditingProvider, { data, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableInternals, {}) });
+};
+var DraggableTableHeader = ({
+  header
+}) => {
+  var _a, _b, _c, _d;
+  const { attributes, isDragging, listeners, setNodeRef, transform } = (0, import_sortable2.useSortable)({
+    id: header.column.id
+  });
+  const style = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    whiteSpace: "nowrap",
+    width: header.column.getSize(),
+    zIndex: isDragging ? 1 : 0
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "th",
+    {
+      colSpan: header.colSpan,
+      ref: setNodeRef,
+      style,
+      className: (0, import_clsx.default)(
+        (_a = header.column.columnDef.meta) == null ? void 0 : _a.className,
+        "px-3 py-3.5 text-left text-sm font-semibold text-dmsi-white bg-dmsi-red ",
+        {
+          "sticky left-0": (_c = (_b = header.column.columnDef.meta) == null ? void 0 : _b.sticky) != null ? _c : false
+        }
+      ),
+      children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex space-x-1 justify-start items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          __spreadProps(__spreadValues(__spreadValues({
+            className: "cursor-grab shrink-0"
+          }, attributes), listeners), {
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" })
+          })
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx.default)(
+              "grow",
+              header.column.getCanSort() ? "cursor-pointer select-none" : "",
+              "flex flex-col gap-1 justify-between items-start"
+            ),
+            title: header.column.getCanSort() ? header.column.getNextSortingOrder() === "asc" ? "Sort ascending" : header.column.getNextSortingOrder() === "desc" ? "Sort descending" : "Clear sort" : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: header.column.getCanFilter() ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Filter, { column: header.column }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "invisible", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Filter, { column: header.column }) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "shrink-0 cursor-pointer",
+            onClick: header.column.getToggleSortingHandler(),
+            children: (_d = {
+              asc: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" }),
+              desc: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" })
+            }[header.column.getIsSorted()]) != null ? _d : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" })
+          }
+        )
+      ] })
+    }
+  );
+};
+var DragAlongCell = ({
+  cell,
+  setValue
+}) => {
+  var _a, _b, _c, _d;
+  const { isDragging, setNodeRef, transform } = (0, import_sortable2.useSortable)({
+    id: cell.column.id
+  });
+  const style = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    width: cell.column.getSize(),
+    zIndex: isDragging ? 1 : 0
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    EditCell,
+    {
+      ref: setNodeRef,
+      style,
+      cell,
+      className: (0, import_clsx.default)(
+        (_b = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.className) != null ? _b : "",
+        "text-sm whitespace-nowrap text-gray-900  bg-neutral-100",
+        {
+          "sticky left-0": (_d = (_c = cell.column.columnDef.meta) == null ? void 0 : _c.sticky) != null ? _d : false
+        }
+      ),
+      setValue
+    }
+  );
+};
+var DataTableInternals = () => {
+  const { data, setValue } = (0, import_react2.useContext)(EditingContext);
+  const [columnOrder, setColumnOrder] = import_react2.default.useState(
+    () => columns.map((c) => c.id)
+  );
+  const [pagination, setPagination] = (0, import_react2.useState)({
+    pageIndex: 0,
+    pageSize: 10
+  });
+  const [columnVisibility, setColumnVisibility] = (0, import_react2.useState)(
+    columns.reduce(
+      (acc, column) => {
+        if ("accessorKey" in column) {
+          acc[column.accessorKey] = true;
+        }
+        return acc;
+      },
+      {}
+    )
+  );
+  const [sorting, setSorting] = (0, import_react2.useState)([]);
+  const [columnFilters, setColumnFilters] = (0, import_react2.useState)([]);
+  const table = (0, import_react_table.useReactTable)({
+    columns,
+    data,
+    debugAll: true,
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
+    getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
+    getSortedRowModel: (0, import_react_table.getSortedRowModel)(),
+    getPaginationRowModel: (0, import_react_table.getPaginationRowModel)(),
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onPaginationChange: setPagination,
+    onColumnVisibilityChange: setColumnVisibility,
+    onColumnOrderChange: setColumnOrder,
+    state: {
+      sorting,
+      columnFilters,
+      pagination,
+      columnVisibility,
+      columnOrder
+    }
+  });
+  function handleDragEnd(event) {
+    const { active, over } = event;
+    if (active && over && active.id !== over.id) {
+      setColumnOrder((columnOrder2) => {
+        const oldIndex = columnOrder2.indexOf(active.id);
+        const newIndex = columnOrder2.indexOf(over.id);
+        return (0, import_sortable.arrayMove)(columnOrder2, oldIndex, newIndex);
+      });
+    }
+  }
+  const sensors = (0, import_core.useSensors)(
+    (0, import_core.useSensor)(import_core.MouseSensor, {}),
+    (0, import_core.useSensor)(import_core.TouchSensor, {}),
+    (0, import_core.useSensor)(import_core.KeyboardSensor, {})
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.DndContext,
+    {
+      collisionDetection: import_core.closestCenter,
+      modifiers: [import_modifiers.restrictToHorizontalAxis],
+      onDragEnd: handleDragEnd,
+      sensors,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "border border-gray-300 rounded p-3 m-4 max-w-xl min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mb-3 font-semibold", children: "Show/Hide Columns" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-2", children: table.getAllColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "label",
+            {
+              className: "cursor-pointer flex flex-row items-center space-x-1",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  Toggle,
+                  {
+                    enabled: column.getIsVisible(),
+                    onToggle: (checked) => column.getToggleVisibilityHandler()({
+                      target: { checked }
+                    })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block", children: column.columnDef.header })
+              ]
+            },
+            column.id
+          )) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-x-scroll scrollbar-thin", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "min-w-full divide-x divide-neutral-500", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_sortable.SortableContext,
+            {
+              items: columnOrder,
+              strategy: import_sortable.horizontalListSortingStrategy,
+              children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DraggableTableHeader, { header }, header.id))
+            }
+          ) }, headerGroup.id)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "tr",
+            {
+              className: "bg-neutral-100 divide-y divide-neutral-200",
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_sortable.SortableContext,
+                {
+                  items: columnOrder,
+                  strategy: import_sortable.horizontalListSortingStrategy,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    DragAlongCell,
+                    {
+                      cell,
+                      setValue
+                    },
+                    cell.id
+                  )
+                },
+                cell.id
+              ))
+            },
+            row.id
+          )) })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-6 md:flex-row items-center md:gap-2 w-full justify-between p-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-row items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                className: (0, import_clsx.default)(
+                  "group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700 rounded p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer border-r-0 rounded-r-none",
+                  {
+                    "pointer-events-none": !table.getCanPreviousPage()
+                  }
+                ),
+                onClick: () => table.setPageIndex(0),
+                disabled: !table.getCanPreviousPage(),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-4 h-4 group-disabled:stroke-gray-400" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                className: (0, import_clsx.default)(
+                  "-mr-px group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700  p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer",
+                  {
+                    "pointer-events-none": !table.getCanPreviousPage()
+                  }
+                ),
+                onClick: () => table.previousPage(),
+                disabled: !table.getCanPreviousPage(),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-4 h-4 group-disabled:stroke-gray-400" })
+              }
+            ),
+            Array.from({ length: Math.min(5, table.getPageCount()) }).map(
+              (_, i) => {
+                const current = table.getState().pagination.pageIndex;
+                const index = current - 2 + i;
+                const active = index === current;
+                if (index < 0) return;
+                if (index > table.getPageCount() - 1) return;
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    className: (0, import_clsx.default)(
+                      "group h-8 w-8 border-y border-gray-500/50 text-gray-700 p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer  flex items-center justify-center",
+                      {
+                        "bg-neutral-200 border-x": active,
+                        "border-r-0": !active
+                      }
+                    ),
+                    onClick: () => table.setPageIndex(index),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_clsx.default)({}), children: index + 1 })
+                  },
+                  i
+                );
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                className: (0, import_clsx.default)(
+                  "-ml-px group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700  p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer border-r-0 group",
+                  {
+                    "pointer-events-none": !table.getCanNextPage()
+                  }
+                ),
+                onClick: () => table.nextPage(),
+                disabled: !table.getCanNextPage(),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-4 h-4 group-disabled:stroke-gray-400 " })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                className: (0, import_clsx.default)(
+                  "group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700 rounded rounded-l-none p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer",
+                  {
+                    "pointer-events-none": !table.getCanNextPage()
+                  }
+                ),
+                onClick: () => table.setPageIndex(table.getPageCount() - 1),
+                disabled: !table.getCanNextPage(),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-4 h-4  group-disabled:stroke-gray-400" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-row items-center gap-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Page" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+                table.getState().pagination.pageIndex + 1,
+                " of",
+                " ",
+                table.getPageCount()
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-2", children: [
+              "Page:",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  type: "number",
+                  min: "1",
+                  max: table.getPageCount(),
+                  defaultValue: table.getState().pagination.pageIndex + 1,
+                  onChange: (e) => {
+                    const page = e.target.value ? Number(e.target.value) - 1 : 0;
+                    table.setPageIndex(page);
+                  },
+                  className: "border border-gray-500 px-2 py-1 rounded w-16"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "select",
+            {
+              className: "border border-gray-500 px-2 py-1 rounded",
+              value: table.getState().pagination.pageSize,
+              onChange: (e) => {
+                table.setPageSize(Number(e.target.value));
+              },
+              children: [10, 20, 30, 40, 50].map((pageSize) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("option", { value: pageSize, children: [
+                "Show ",
+                pageSize
+              ] }, pageSize))
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+function EditCell({
+  className,
+  cell,
+  setValue,
+  style,
+  ref
+}) {
+  var _a, _b;
+  const [editing, setEditing] = (0, import_react2.useState)(false);
+  const value = cell.getValue();
+  const isString = typeof value === "string";
+  const [editedValue, setEditedValue] = (0, import_react2.useState)(isString ? value : "");
+  const onStartEdit = () => {
+    if (isString) {
+      setEditing(true);
+    }
+  };
+  const onEditValue = (e) => {
+    setEditedValue(e.target.value);
+  };
+  const onStopEdit = () => {
+    setValue(cell.row.index, cell.column.id, editedValue);
+    setEditing(false);
+  };
+  const onKeyUp = (e) => {
+    if (e.key === "Enter") {
+      onStopEdit();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "td",
+    {
+      className: (0, import_clsx.default)(
+        className,
+        (_b = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.className) != null ? _b : "",
+        "px-2 py-3 text-sm whitespace-nowrap text-gray-500"
+      ),
+      style,
+      ref,
+      children: [
+        isString && editing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-row gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              type: "text",
+              value: editedValue,
+              onChange: onEditValue,
+              onKeyUp,
+              onBlur: onStopEdit,
+              className: "border px-2 py-0.5 rounded inline min-w-0 shrink border-neutral-400 focus:outline-neutral-300 bg-white"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              onClick: onStopEdit,
+              className: "border cursor-pointer px-2 py-0.5 rounded flex items-center justify-center w-12 border-dmsi-blue text-dmsi-blue bg-white",
+              children: "Save"
+            }
+          )
+        ] }),
+        !editing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            onClick: onStartEdit,
+            className: "px-2 py-1 flex flex-row items-center",
+            children: [
+              (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-16" })
+            ]
+          }
+        )
+      ]
+    },
+    cell.id
+  );
+}
+function Filter({ column }) {
+  var _a, _b, _c, _d, _e;
+  const columnFilterValue = column.getFilterValue();
+  const { filterVariant } = (_a = column.columnDef.meta) != null ? _a : {};
+  return filterVariant === "range" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex space-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          className: "block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6",
+          type: "number",
+          value: (_b = columnFilterValue == null ? void 0 : columnFilterValue[0]) != null ? _b : "",
+          onChange: (e) => column.setFilterValue((old) => [
+            e.target.value,
+            old == null ? void 0 : old[1]
+          ]),
+          autoComplete: "off",
+          placeholder: `Min`
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          className: "block  w-full rounded-md bg-white px-3 py-0.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6",
+          type: "number",
+          value: (_c = columnFilterValue == null ? void 0 : columnFilterValue[1]) != null ? _c : "",
+          onChange: (e) => column.setFilterValue((old) => [
+            old == null ? void 0 : old[0],
+            e.target.value
+          ]),
+          autoComplete: "off",
+          placeholder: `Max`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-1" })
+  ] }) : filterVariant === "select" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "select",
+    {
+      className: "block min-w-36 w-full rounded-md bg-white px-2 py-2 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6",
+      onChange: (e) => column.setFilterValue(e.target.value),
+      value: columnFilterValue == null ? void 0 : columnFilterValue.toString(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "Status: All" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "cancelled", children: "Status: Cancelled" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "pending", children: "Status: Pending" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "shipped", children: "Status: Shipped" })
+      ]
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "input",
+    {
+      className: "block min-w-36 w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6",
+      onChange: (e) => column.setFilterValue(e.target.value),
+      placeholder: (_e = (_d = column.columnDef.header) == null ? void 0 : _d.toString()) != null ? _e : "...",
+      type: "text",
+      autoComplete: "off",
+      value: columnFilterValue != null ? columnFilterValue : ""
+    }
+  );
+}
+import_react3.Switch.displayName = "Switch";
+function Toggle({
+  enabled,
+  onToggle
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react3.Switch,
+    {
+      checked: enabled,
+      onChange: onToggle,
+      className: "group relative flex h-4 w-7 cursor-pointer rounded-full   p-0.5 transition-colors duration-200 ease-in-out focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white bg-neutral-900/10 data-[checked]:bg-dmsi-blue",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "pointer-events-none inline-block size-3 translate-x-0 rounded-full bg-white ring-0 shadow-lg transition duration-200 ease-in-out group-data-[checked]:translate-x-3  group-data-[checked]:shadow-lg"
+        }
+      )
+    }
+  );
+}
+Toggle.displayName = "Toggle";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DataTable,
+  EditingProvider
+});