@multiplatform.one/table 6.0.0

package/dist/cjs/components/DataTableColumnPinning/DataTableColumnPinning.stories.cjs

@@ -0,0 +1,486 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var DataTableColumnPinning_stories_exports = {};
+__export(DataTableColumnPinning_stories_exports, {
+  Advanced: () => Advanced,
+  Basic: () => Basic,
+  DisabledPinning: () => DisabledPinning,
+  MaxPinnedColumns: () => MaxPinnedColumns,
+  default: () => DataTableColumnPinning_stories_default
+});
+module.exports = __toCommonJS(DataTableColumnPinning_stories_exports);
+var import_storybook = require("@multiplatform.one/storybook");
+var import_react = require("@phosphor-icons/react");
+var import_react_table = require("@tanstack/react-table");
+var import_react2 = require("react");
+var import_forms = require("@multiplatform.one/forms");
+var import_tamagui = require("tamagui");
+var import_index = require("./index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const generateData = count => {
+  const departments = ["Engineering", "Sales", "Marketing", "HR", "Finance"];
+  const roles = ["Manager", "Senior", "Junior", "Lead", "Intern"];
+  const statuses = ["active", "inactive", "pending"];
+  return Array.from({
+    length: count
+  }, (_, i) => ({
+    id: i + 1,
+    firstName: `First${i + 1}`,
+    lastName: `Last${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    department: departments[i % departments.length],
+    role: roles[i % roles.length],
+    salary: 5e4 + Math.floor(Math.random() * 1e5),
+    startDate: new Date(2020 + i % 4, i % 12, i % 28 + 1).toISOString().split("T")[0],
+    status: statuses[i % statuses.length],
+    performance: Math.floor(Math.random() * 100)
+  }));
+};
+const defaultData = generateData(50);
+const columnHelper = (0, import_react_table.createColumnHelper)();
+const defaultColumns = [columnHelper.accessor("id", {
+  header: "ID",
+  cell: info => info.getValue(),
+  size: 60
+}), columnHelper.accessor("firstName", {
+  header: "First Name",
+  cell: info => info.getValue()
+}), columnHelper.accessor("lastName", {
+  header: "Last Name",
+  cell: info => info.getValue()
+}), columnHelper.accessor("email", {
+  header: "Email",
+  cell: info => info.getValue(),
+  size: 200
+}), columnHelper.accessor("department", {
+  header: "Department",
+  cell: info => info.getValue()
+}), columnHelper.accessor("role", {
+  header: "Role",
+  cell: info => info.getValue()
+}), columnHelper.accessor("salary", {
+  header: "Salary",
+  cell: info => `$${info.getValue().toLocaleString()}`
+}), columnHelper.accessor("startDate", {
+  header: "Start Date",
+  cell: info => info.getValue()
+}), columnHelper.accessor("status", {
+  header: "Status",
+  cell: info => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+    color: info.getValue() === "active" ? "$green10" : info.getValue() === "inactive" ? "$red10" : "$yellow10",
+    children: info.getValue()
+  })
+}), columnHelper.accessor("performance", {
+  header: "Performance",
+  cell: info => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "center",
+    gap: "$2",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      backgroundColor: "$gray5",
+      height: 8,
+      flex: 1,
+      borderRadius: "$2",
+      overflow: "hidden",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        backgroundColor: info.getValue() > 70 ? "$green10" : info.getValue() > 40 ? "$yellow10" : "$red10",
+        height: "100%",
+        width: `${info.getValue()}%`
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+      fontSize: "$1",
+      children: [info.getValue(), "%"]
+    })]
+  })
+})];
+const meta = {
+  title: "Table/DataTableColumnPinning",
+  component: import_index.DataTableColumnPinning,
+  parameters: {
+    layout: "fullscreen"
+  }
+};
+var DataTableColumnPinning_stories_default = meta;
+function BasicPinningExample() {
+  const [data] = (0, import_react2.useState)(defaultData);
+  const table = (0, import_react_table.useReactTable)({
+    data,
+    columns: defaultColumns,
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
+    columnResizeMode: "onChange"
+  });
+  const pinning = (0, import_index.DataTableColumnPinning)({
+    table,
+    onPinChange: (0, import_storybook.action)("onPinChange")
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    padding: "$4",
+    gap: "$4",
+    height: "100vh",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card.Header, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
+          children: "Column Pinning Example"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+          children: "Click the pin icons to pin/unpin columns to left or right"
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        padding: "$4",
+        gap: "$2",
+        flexWrap: "wrap",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+          children: ["Pinned Left: ", pinning.pinnedLeftColumns.length]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          children: "|"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+          children: ["Pinned Right: ", pinning.pinnedRightColumns.length]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          children: "|"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+          children: ["Scrollable: ", pinning.scrollableColumns.length]
+        })]
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          borderBottomWidth: 1,
+          borderColor: "$borderColor",
+          children: table.getHeaderGroups().map(headerGroup => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            children: headerGroup.headers.map(header => {
+              const isPinned = pinning.isPinned(header.column.id);
+              const position = pinning.getPinPosition(header.column.id);
+              return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+                width: header.getSize(),
+                padding: "$2",
+                borderRightWidth: 1,
+                borderColor: "$borderColor",
+                backgroundColor: isPinned ? "$gray3" : "$background",
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                    fontWeight: "bold",
+                    children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+                  }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                    gap: "$1",
+                    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                      size: "$1",
+                      icon: isPinned && position === "left" ? import_react.PushPinSlashIcon : import_react.PushPinIcon,
+                      onPress: () => pinning.togglePin(header.column.id, "left"),
+                      disabled: !isPinned && position !== "left" && !pinning.canPin("left"),
+                      circular: true,
+                      variant: position === "left" ? "outlined" : void 0
+                    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                      size: "$1",
+                      icon: isPinned && position === "right" ? import_react.PushPinSlashIcon : import_react.PushPinIcon,
+                      onPress: () => pinning.togglePin(header.column.id, "right"),
+                      disabled: !isPinned && position !== "right" && !pinning.canPin("right"),
+                      circular: true,
+                      variant: position === "right" ? "outlined" : void 0
+                    })]
+                  })]
+                }), isPinned && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+                  fontSize: "$1",
+                  color: "$gray10",
+                  children: ["Pinned: ", position]
+                })]
+              }, header.id);
+            })
+          }, headerGroup.id))
+        }), table.getRowModel().rows.slice(0, 10).map(row => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          borderBottomWidth: 1,
+          borderColor: "$borderColor",
+          children: row.getVisibleCells().map(cell => {
+            const isPinned = pinning.isPinned(cell.column.id);
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+              width: cell.column.getSize(),
+              padding: "$2",
+              borderRightWidth: 1,
+              borderColor: "$borderColor",
+              backgroundColor: isPinned ? "$gray2" : "$background",
+              children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+            }, cell.id);
+          })
+        }, row.id))]
+      })
+    })]
+  });
+}
+const Basic = {
+  name: "Main",
+  render: () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(BasicPinningExample, {})
+};
+function AdvancedPinningExample() {
+  const [data] = (0, import_react2.useState)(defaultData);
+  const table = (0, import_react_table.useReactTable)({
+    data,
+    columns: defaultColumns,
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)()
+  });
+  const {
+    pinnedState,
+    pinColumn,
+    unpinColumn,
+    resetPinning
+  } = (0, import_index.useColumnPinning)(table, {
+    maxPinnedColumns: 3,
+    initialPinnedColumns: {
+      left: ["id", "firstName"],
+      right: ["status"]
+    }
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    padding: "$4",
+    gap: "$4",
+    height: "100vh",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card.Header, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
+          children: "Advanced Column Pinning"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+          children: "Using the useColumnPinning hook with initial pinned columns"
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        padding: "$4",
+        gap: "$2",
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          icon: import_react.ArrowCounterClockwiseIcon,
+          onPress: resetPinning,
+          size: "$3",
+          children: "Reset Pinning"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
+          vertical: true
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+            fontSize: "$2",
+            children: ["Left: ", pinnedState.left.join(", ") || "None"]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+            fontSize: "$2",
+            children: ["Right: ", pinnedState.right.join(", ") || "None"]
+          })]
+        })]
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
+      flex: 1,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          minWidth: "100%",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            backgroundColor: "$gray3",
+            borderBottomWidth: 2,
+            borderColor: "$borderColor",
+            children: table.getHeaderGroups().map(headerGroup => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+              children: headerGroup.headers.map(header => {
+                const isPinnedLeft = pinnedState.left.includes(header.column.id);
+                const isPinnedRight = pinnedState.right.includes(header.column.id);
+                const isPinned = isPinnedLeft || isPinnedRight;
+                return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                  width: header.getSize(),
+                  padding: "$3",
+                  borderRightWidth: 1,
+                  borderColor: "$borderColor",
+                  backgroundColor: isPinnedLeft ? "$blue3" : isPinnedRight ? "$purple3" : "$gray3",
+                  children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+                    gap: "$1",
+                    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                      fontWeight: "bold",
+                      fontSize: "$3",
+                      children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+                    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                      gap: "$1",
+                      children: [!isPinnedLeft && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                        size: "$1",
+                        onPress: () => pinColumn(header.column.id, "left"),
+                        disabled: pinnedState.left.length >= 3,
+                        ...{
+                          fontSize: "$1"
+                        },
+                        children: "Pin Left"
+                      }), !isPinnedRight && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                        size: "$1",
+                        onPress: () => pinColumn(header.column.id, "right"),
+                        disabled: pinnedState.right.length >= 3,
+                        ...{
+                          fontSize: "$1"
+                        },
+                        children: "Pin Right"
+                      }), isPinned && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                        size: "$1",
+                        onPress: () => unpinColumn(header.column.id),
+                        ...{
+                          fontSize: "$1",
+                          color: "$red10"
+                        },
+                        children: "Unpin"
+                      })]
+                    })]
+                  })
+                }, header.id);
+              })
+            }, headerGroup.id))
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+            maxHeight: 400,
+            children: table.getRowModel().rows.map(row => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+              borderBottomWidth: 1,
+              borderColor: "$borderColor",
+              hoverStyle: {
+                backgroundColor: "$gray2"
+              },
+              children: row.getVisibleCells().map(cell => {
+                const isPinnedLeft = pinnedState.left.includes(cell.column.id);
+                const isPinnedRight = pinnedState.right.includes(cell.column.id);
+                return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                  width: cell.column.getSize(),
+                  padding: "$2",
+                  borderRightWidth: 1,
+                  borderColor: "$borderColor",
+                  backgroundColor: isPinnedLeft ? "$blue1" : isPinnedRight ? "$purple1" : "$background",
+                  children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                }, cell.id);
+              })
+            }, row.id))
+          })]
+        })
+      })
+    })]
+  });
+}
+const Advanced = {
+  render: () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(AdvancedPinningExample, {})
+};
+const MaxPinnedColumns = {
+  render: () => {
+    const [data] = (0, import_react2.useState)(defaultData.slice(0, 10));
+    const table = (0, import_react_table.useReactTable)({
+      data,
+      columns: defaultColumns.slice(0, 6),
+      getCoreRowModel: (0, import_react_table.getCoreRowModel)()
+    });
+    const pinning = (0, import_index.DataTableColumnPinning)({
+      table,
+      maxPinnedColumns: 2,
+      onPinChange: (0, import_storybook.action)("onPinChange")
+    });
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      padding: "$4",
+      gap: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card.Header, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
+            children: "Max Pinned Columns (Limited to 2)"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+            children: "Only 2 columns can be pinned at a time"
+          })]
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          padding: "$4",
+          gap: "$2",
+          children: table.getAllColumns().map(column => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "$2",
+            borderRadius: "$2",
+            backgroundColor: pinning.isPinned(column.id) ? "$blue3" : "$gray2",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              children: column.id
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+              gap: "$2",
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                size: "$2",
+                onPress: () => pinning.togglePin(column.id, "left"),
+                disabled: !pinning.isPinned(column.id) && !pinning.canPin("left"),
+                variant: pinning.getPinPosition(column.id) === "left" ? "outlined" : void 0,
+                children: pinning.getPinPosition(column.id) === "left" ? "Unpin" : "Pin Left"
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                size: "$2",
+                onPress: () => pinning.togglePin(column.id, "right"),
+                disabled: !pinning.isPinned(column.id) && !pinning.canPin("right"),
+                variant: pinning.getPinPosition(column.id) === "right" ? "outlined" : void 0,
+                children: pinning.getPinPosition(column.id) === "right" ? "Unpin" : "Pin Right"
+              })]
+            })]
+          }, column.id))
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          padding: "$4",
+          gap: "$4",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+            children: ["Left: ", pinning.pinnedLeftColumns.length, "/2"]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+            children: ["Right: ", pinning.pinnedRightColumns.length, "/2"]
+          })]
+        })]
+      })]
+    });
+  }
+};
+const DisabledPinning = {
+  render: () => {
+    const [data] = (0, import_react2.useState)(defaultData.slice(0, 5));
+    const table = (0, import_react_table.useReactTable)({
+      data,
+      columns: defaultColumns.slice(0, 4),
+      getCoreRowModel: (0, import_react_table.getCoreRowModel)()
+    });
+    const pinning = (0, import_index.DataTableColumnPinning)({
+      table,
+      allowPinning: false
+    });
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      padding: "$4",
+      gap: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card.Header, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
+            children: "Disabled Column Pinning"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+            children: "Column pinning is disabled in this example"
+          })]
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          padding: "$4",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            color: "$gray10",
+            children: "Pin buttons are not rendered when allowPinning is false"
+          }), table.getAllColumns().map(column => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "$3",
+            borderBottomWidth: 1,
+            borderColor: "$borderColor",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              children: column.id
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(pinning.PinButton, {
+              columnId: column.id
+            })]
+          }, column.id))]
+        })
+      })]
+    });
+  }
+};