fix: make actions column sticky in members list (#17554)

* fix: make actions column sticky in members list

* clean up import

* change type definition

* remove old export

* include tanstack.d.ts

* fix declaration file

* move type def to packages/types/tanstack-table.d.ts

---------

Co-authored-by: Keith Williams <[email protected]>

Author: eunjae-lee

packages/features/users/components/UserTable/UserListTable.tsx

@@ -9,19 +9,13 @@ import {
   useReactTable,
   type ColumnDef,
 } from "@tanstack/react-table";
-import type { ColumnMeta } from "@tanstack/react-table";
 import { useSession } from "next-auth/react";
 import { useQueryState, parseAsBoolean } from "nuqs";
 import { useMemo, useReducer, useRef, useState } from "react";
 
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import { WEBAPP_URL } from "@calcom/lib/constants";
-import {
-  downloadAsCsv,
-  generateCsvRaw,
-  generateHeaderFromReactTable,
-  sanitizeValue,
-} from "@calcom/lib/csvUtils";
+import { downloadAsCsv, generateCsvRaw, generateHeaderFromReactTable } from "@calcom/lib/csvUtils";
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
@@ -36,8 +30,8 @@ import {
   DataTableSelectionBar,
   DataTablePagination,
   showToast,
+  useFetchMoreOnBottomReached,
 } from "@calcom/ui";
-import { useFetchMoreOnBottomReached } from "@calcom/ui/data-table";
 import { useGetUserAttributes } from "@calcom/web/components/settings/platform/hooks/useGetUserAttributes";
 
 import { DeleteBulkUsers } from "./BulkActions/DeleteBulkUsers";
@@ -53,11 +47,6 @@ import { InviteMemberModal } from "./InviteMemberModal";
 import { TableActions } from "./UserTableActions";
 import type { UserTableState, UserTableAction, UserTableUser } from "./types";
 
-type CustomColumnMeta<TData, TValue> = ColumnMeta<TData, TValue> & {
-  sticky?: boolean;
-  stickLeft?: number;
-};
-
 const initialState: UserTableState = {
   changeMemberRole: {
     showModal: false,
@@ -217,9 +206,10 @@ export function UserListTable() {
         enableHiding: false,
         enableSorting: false,
         meta: {
-          sticky: true,
-          stickLeft: 0,
-        } as CustomColumnMeta<UserTableUser, unknown>,
+          sticky: {
+            position: "left",
+          },
+        },
         header: ({ table }) => (
           <Checkbox
             checked={table.getIsAllPageRowsSelected()}
@@ -245,9 +235,8 @@ export function UserListTable() {
           return `Members`;
         },
         meta: {
-          sticky: true,
-          stickyLeft: 24,
-        } as CustomColumnMeta<UserTableUser, unknown>,
+          sticky: { position: "left", gap: 24 },
+        },
         cell: ({ row }) => {
           const { username, email, avatarUrl } = row.original;
           return (
@@ -349,6 +338,9 @@ export function UserListTable() {
       {
         id: "actions",
         enableHiding: false,
+        meta: {
+          sticky: { position: "right" },
+        },
         cell: ({ row }) => {
           const user = row.original;
           const permissionsRaw = permissions;

packages/types/tanstack-table.d.ts

@@ -2,6 +2,9 @@ import "@tanstack/react-table";
 
 declare module "@tanstack/table-core" {
   interface ColumnMeta<TData extends RowData, TValue> {
-    hasPermissions?: (data?: TData) => boolean; // We can conditionally render a column based on this callback -> User doesnt have admin for example.
+    sticky?: {
+      position: "left" | "right";
+      gap?: number;
+    };
   }
 }

packages/ui/components/data-table/DataTable.tsx

@@ -65,16 +65,17 @@ export function DataTable<TData, TValue>({
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
-                  const meta = header.column.columnDef.meta as { sticky?: boolean; stickyLeft?: number };
+                  const meta = header.column.columnDef.meta;
                   return (
                     <TableHead
                       key={header.id}
                       style={{
-                        left: meta?.stickyLeft ? `${meta.stickyLeft}px` : undefined,
+                        ...(meta?.sticky?.position === "left" && { left: `${meta.sticky.gap || 0}px` }),
+                        ...(meta?.sticky?.position === "right" && { right: `${meta.sticky.gap || 0}px` }),
                       }}
                       className={classNames(
                         header.column.getCanSort() ? "cursor-pointer select-none" : "",
-                        meta?.sticky && "bg-subtle sticky left-0 top-0 z-20"
+                        meta?.sticky && "bg-subtle sticky top-0 z-20"
                       )}>
                       <div className="flex items-center" onClick={header.column.getToggleSortingHandler()}>
                         {header.isPlaceholder
@@ -119,16 +120,17 @@ export function DataTable<TData, TValue>({
                     )}>
                     {row.getVisibleCells().map((cell) => {
                       const column = table.getColumn(cell.column.id);
-                      const meta = column?.columnDef.meta as { sticky?: boolean; stickyLeft?: number };
+                      const meta = column?.columnDef.meta;
                       return (
                         <TableCell
                           key={cell.id}
                           style={{
-                            left: meta?.stickyLeft ? `${meta.stickyLeft}px` : undefined,
+                            ...(meta?.sticky?.position === "left" && { left: `${meta.sticky.gap || 0}px` }),
+                            ...(meta?.sticky?.position === "right" && { right: `${meta.sticky.gap || 0}px` }),
                           }}
                           className={classNames(
                             variant === "compact" && "p-1.5",
-                            meta?.sticky && "group-hover:bg-muted bg-default sticky left-0"
+                            meta?.sticky && "group-hover:bg-muted bg-default sticky"
                           )}>
                           {flexRender(cell.column.columnDef.cell, cell.getContext())}
                         </TableCell>