diff --git a/packages/features/users/components/UserTable/UserListTable.tsx b/packages/features/users/components/UserTable/UserListTable.tsx index 52dff98145..d418c6f848 100644 --- a/packages/features/users/components/UserTable/UserListTable.tsx +++ b/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 = ColumnMeta & { - 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, + sticky: { + position: "left", + }, + }, header: ({ table }) => ( , + 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; diff --git a/packages/types/tanstack-table.d.ts b/packages/types/tanstack-table.d.ts index bcc1837d06..7462657122 100644 --- a/packages/types/tanstack-table.d.ts +++ b/packages/types/tanstack-table.d.ts @@ -2,6 +2,9 @@ import "@tanstack/react-table"; declare module "@tanstack/table-core" { interface ColumnMeta { - 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; + }; } } diff --git a/packages/ui/components/data-table/DataTable.tsx b/packages/ui/components/data-table/DataTable.tsx index 9360fedf38..24665fc18b 100644 --- a/packages/ui/components/data-table/DataTable.tsx +++ b/packages/ui/components/data-table/DataTable.tsx @@ -65,16 +65,17 @@ export function DataTable({ {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { - const meta = header.column.columnDef.meta as { sticky?: boolean; stickyLeft?: number }; + const meta = header.column.columnDef.meta; return (
{header.isPlaceholder @@ -119,16 +120,17 @@ export function DataTable({ )}> {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 ( {flexRender(cell.column.columnDef.cell, cell.getContext())} diff --git a/packages/ui/components/data-table/tanstack.d.ts b/packages/ui/components/data-table/tanstack.d.ts deleted file mode 100644 index 894448b6fe..0000000000 --- a/packages/ui/components/data-table/tanstack.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import "@tanstack/react-table"; - -declare module "@tanstack/react-table" { - interface ColumnMeta { - sticky?: boolean; - stickyLeft?: number; - } -}