fix: use columnPinning API (calcom#18830)

Co-authored-by: sean-brydon <[email protected]>
ymohit1603 · Jan 23, 2025 · b304467 · b304467
1 parent e748d3e
commit b304467
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 52 deletions.
diff --git a/packages/features/data-table/components/DataTable.tsx b/packages/features/data-table/components/DataTable.tsx
@@ -119,21 +119,21 @@ export function DataTable<TData, TValue>({
               {table.getHeaderGroups().map((headerGroup) => (
                 <TableRow key={headerGroup.id} className="hover:bg-subtle flex w-full">
                   {headerGroup.headers.map((header) => {
-                    const meta = header.column.columnDef.meta;
+                    const { column } = header;
+                    const meta = column.columnDef.meta;
                     return (
                       <TableHead
                         key={header.id}
                         style={{
-                          ...(meta?.sticky?.position === "left" && { left: `${meta.sticky.gap || 0}px` }),
-                          ...(meta?.sticky?.position === "right" && { right: `${meta.sticky.gap || 0}px` }),
+                          ...(column.getIsPinned() === "left" && { left: `${column.getStart("left")}px` }),
+                          ...(column.getIsPinned() === "right" && { right: `${column.getAfter("right")}px` }),
                           width: `var(--header-${kebabCase(header?.id)}-size)`,
                         }}
                         className={classNames(
                           "relative flex shrink-0 items-center",
-                          header.column.getCanSort()
-                            ? "bg-subtle hover:bg-muted cursor-pointer select-none"
-                            : "",
-                          meta?.sticky && "top-0 z-20 sm:sticky"
+                          "bg-subtle",
+                          header.column.getCanSort() ? "hover:bg-muted cursor-pointer select-none" : "",
+                          column.getIsPinned() && "top-0 z-20 sm:sticky"
                         )}>
                         <div
                           className="flex h-full w-full items-center overflow-hidden"
@@ -254,20 +254,20 @@ function DataTableBody<TData>({
               }}
               className={classNames(onRowMouseclick && "hover:cursor-pointer", "group")}>
               {row.getVisibleCells().map((cell) => {
-                const column = table.getColumn(cell.column.id);
+                const column = cell.column;
                 const meta = column?.columnDef.meta;
                 return (
                   <TableCell
                     key={cell.id}
                     style={{
-                      ...(meta?.sticky?.position === "left" && { left: `${meta.sticky.gap || 0}px` }),
-                      ...(meta?.sticky?.position === "right" && { right: `${meta.sticky.gap || 0}px` }),
+                      ...(column.getIsPinned() === "left" && { left: `${column.getStart("left")}px` }),
+                      ...(column.getIsPinned() === "right" && { right: `${column.getAfter("right")}px` }),
                       width: `var(--col-${kebabCase(cell.column.id)}-size)`,
                     }}
                     className={classNames(
                       "flex shrink-0 items-center overflow-hidden",
                       variant === "compact" && "p-0",
-                      meta?.sticky &&
+                      column.getIsPinned() &&
                         "bg-default group-hover:!bg-muted group-data-[state=selected]:bg-subtle sm:sticky"
                     )}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}

diff --git a/packages/features/ee/teams/components/MemberList.tsx b/packages/features/ee/teams/components/MemberList.tsx
@@ -407,9 +407,6 @@ function MemberListContent(props: Props) {
         id: "actions",
         size: 90,
         enableResizing: false,
-        meta: {
-          sticky: { position: "right" },
-        },
         cell: ({ row }) => {
           const user = row.original;
           const isSelf = user.id === session?.user.id;
@@ -634,6 +631,9 @@ function MemberListContent(props: Props) {
     manualPagination: true,
     initialState: {
       columnVisibility: initalColumnVisibility,
+      columnPinning: {
+        right: ["actions"],
+      },
     },
     state: {
       columnFilters,

diff --git a/packages/features/package.json b/packages/features/package.json
@@ -12,7 +12,7 @@
     "@calcom/trpc": "*",
     "@calcom/ui": "*",
     "@lexical/react": "^0.9.0",
-    "@tanstack/react-table": "^8.9.3",
+    "@tanstack/react-table": "^8.20.6",
     "@tanstack/react-virtual": "^3.10.9",
     "@vercel/functions": "^1.4.0",
     "framer-motion": "^10.12.8",

diff --git a/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx b/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx
@@ -104,11 +104,6 @@ function UserListTableContent({ oAuthClientId }: PlatformManagedUsersTableProps)
         enableSorting: false,
         enableResizing: false,
         size: 30,
-        meta: {
-          sticky: {
-            position: "left",
-          },
-        },
         header: ({ table }) => (
           <Checkbox
             checked={table.getIsAllPageRowsSelected()}
@@ -134,9 +129,6 @@ function UserListTableContent({ oAuthClientId }: PlatformManagedUsersTableProps)
         header: () => {
           return `Managed Users`;
         },
-        meta: {
-          sticky: { position: "left", gap: 24 },
-        },
         cell: ({ row }) => {
           if (isPending) {
             return <SkeletonText className="h-6 w-1/4" />;
@@ -259,6 +251,9 @@ function UserListTableContent({ oAuthClientId }: PlatformManagedUsersTableProps)
     manualPagination: true,
     initialState: {
       columnVisibility: initalColumnVisibility,
+      columnPinning: {
+        left: ["select", "member"],
+      },
     },
     defaultColumn: {
       size: 150,

diff --git a/packages/features/users/components/UserTable/UserListTable.tsx b/packages/features/users/components/UserTable/UserListTable.tsx
@@ -265,11 +265,6 @@ function UserListTableContent() {
         enableSorting: false,
         enableResizing: false,
         size: 30,
-        meta: {
-          sticky: {
-            position: "left",
-          },
-        },
         header: ({ table }) => (
           <Checkbox
             checked={table.getIsAllPageRowsSelected()}
@@ -296,9 +291,6 @@ function UserListTableContent() {
         header: () => {
           return `Members`;
         },
-        meta: {
-          sticky: { position: "left", gap: 24 },
-        },
         cell: ({ row }) => {
           const { username, email, avatarUrl } = row.original;
           return (
@@ -411,9 +403,6 @@ function UserListTableContent() {
         enableSorting: false,
         enableResizing: false,
         size: 80,
-        meta: {
-          sticky: { position: "right" },
-        },
         cell: ({ row }) => {
           const user = row.original;
           const permissionsRaw = permissions;
@@ -452,6 +441,10 @@ function UserListTableContent() {
     manualPagination: true,
     initialState: {
       columnVisibility: initalColumnVisibility,
+      columnPinning: {
+        left: ["select", "member"],
+        right: ["actions"],
+      },
     },
     defaultColumn: {
       size: 150,

diff --git a/packages/types/tanstack-table.d.ts b/packages/types/tanstack-table.d.ts
@@ -4,10 +4,6 @@ import type { ColumnFilterMeta } from "@calcom/features/data-table";
 
 declare module "@tanstack/table-core" {
   interface ColumnMeta<TData extends RowData, TValue> {
-    sticky?: {
-      position: "left" | "right";
-      gap?: number;
-    };
     filter?: ColumnFilterMeta;
 
     // `autoWidth` can make the column size dynamic,

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -78,7 +78,7 @@
     "@storybook/blocks": "^7.6.3",
     "@storybook/react": "^7.6.3",
     "@tanstack/react-query": "^5.17.15",
-    "@tanstack/react-table": "^8.9.3",
+    "@tanstack/react-table": "^8.20.6",
     "@wojtekmaj/react-daterange-picker": "^3.3.1",
     "class-variance-authority": "^0.4.0",
     "cmdk": "^0.2.0",

diff --git a/yarn.lock b/yarn.lock
@@ -4151,7 +4151,7 @@ __metadata:
     "@calcom/trpc": "*"
     "@calcom/ui": "*"
     "@lexical/react": ^0.9.0
-    "@tanstack/react-table": ^8.9.3
+    "@tanstack/react-table": ^8.20.6
     "@tanstack/react-virtual": ^3.10.9
     "@testing-library/react-hooks": ^8.0.1
     "@types/web-push": ^3.6.3
@@ -4956,7 +4956,7 @@ __metadata:
     "@storybook/blocks": ^7.6.3
     "@storybook/react": ^7.6.3
     "@tanstack/react-query": ^5.17.15
-    "@tanstack/react-table": ^8.9.3
+    "@tanstack/react-table": ^8.20.6
     "@types/react": 18.0.26
     "@types/react-dom": ^18.0.9
     "@wojtekmaj/react-daterange-picker": ^3.3.1
@@ -15306,15 +15306,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/react-table@npm:^8.9.3":
-  version: 8.9.3
-  resolution: "@tanstack/react-table@npm:8.9.3"
+"@tanstack/react-table@npm:^8.20.6":
+  version: 8.20.6
+  resolution: "@tanstack/react-table@npm:8.20.6"
   dependencies:
-    "@tanstack/table-core": 8.9.3
+    "@tanstack/table-core": 8.20.5
   peerDependencies:
-    react: ">=16"
-    react-dom: ">=16"
-  checksum: a71fbbc608bb11b79ecd2b1a838fad2fc4140f9eb1a25bd44b6b1b4c6acd52741b5745e3e022390c642c284d0d528249360e322c0dbc3d34fea031611c207a7d
+    react: ">=16.8"
+    react-dom: ">=16.8"
+  checksum: 709f7216cf31af65abe10121e92233c0d9f04b9167769a0997052200cdbc35af525cbf1879d456f27c6df70399a14d006d117b06c5db665d9c486038efc2f4b1
   languageName: node
   linkType: hard
 
@@ -15330,10 +15330,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/table-core@npm:8.9.3":
-  version: 8.9.3
-  resolution: "@tanstack/table-core@npm:8.9.3"
-  checksum: 52c7e57daaa3160450fb0bde702ec0b8aab159e2b19efd1012e03b3e167acc52839f5b39578cc8bf96e91346719f400d0435a5191384c168d9477da82f276c38
+"@tanstack/table-core@npm:8.20.5":
+  version: 8.20.5
+  resolution: "@tanstack/table-core@npm:8.20.5"
+  checksum: f8b175f11eb9ee1e029bb5e91c1038527714382de4bd14750377f43c25e69b687b21bfb181ee07131637d3432618964a4b7a898608fc8411ca50da1e7e8ed4c5
   languageName: node
   linkType: hard