fix: provide explicit column width for member list (#17718)

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

@@ -210,6 +210,7 @@ export function UserListTable() {
         id: "select",
         enableHiding: false,
         enableSorting: false,
+        size: 30,
         meta: {
           sticky: {
             position: "left",
@@ -236,6 +237,7 @@ export function UserListTable() {
         id: "member",
         accessorFn: (data) => data.email,
         enableHiding: false,
+        size: 170,
         header: () => {
           return `Members`;
         },
@@ -343,6 +345,7 @@ export function UserListTable() {
       {
         id: "actions",
         enableHiding: false,
+        size: 50,
         meta: {
           sticky: { position: "right" },
         },

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

@@ -3,6 +3,7 @@
 import type { Row } from "@tanstack/react-table";
 import { flexRender } from "@tanstack/react-table";
 import type { Table as ReactTableType } from "@tanstack/react-table";
+import { useMemo } from "react";
 import { useVirtual } from "react-virtual";
 
 import classNames from "@calcom/lib/classNames";
@@ -43,6 +44,18 @@ export function DataTable<TData, TValue>({
   const paddingBottom =
     virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;
 
+  const columnSizeVars = useMemo(() => {
+    const headers = table.getFlatHeaders();
+    const colSizes: { [key: string]: number } = {};
+    for (let i = 0; i < headers.length; i++) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const header = headers[i]!;
+      colSizes[`--header-${header.id}-size`] = header.getSize();
+      colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+    }
+    return colSizes;
+  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
+
   return (
     <div
       className={classNames(
@@ -53,6 +66,7 @@ export function DataTable<TData, TValue>({
         gridTemplateRows: "auto 1fr auto",
         gridTemplateAreas: "'header' 'body' 'footer'",
         ...rest.style,
+        ...columnSizeVars,
       }}
       data-testid={rest["data-testid"] ?? "data-table"}>
       <div
@@ -72,6 +86,7 @@ export function DataTable<TData, TValue>({
                       style={{
                         ...(meta?.sticky?.position === "left" && { left: `${meta.sticky.gap || 0}px` }),
                         ...(meta?.sticky?.position === "right" && { right: `${meta.sticky.gap || 0}px` }),
+                        width: `calc(var(--header-${header?.id}-size) * 1px)`,
                       }}
                       className={classNames(
                         header.column.getCanSort() ? "cursor-pointer select-none" : "",
@@ -127,6 +142,7 @@ export function DataTable<TData, TValue>({
                           style={{
                             ...(meta?.sticky?.position === "left" && { left: `${meta.sticky.gap || 0}px` }),
                             ...(meta?.sticky?.position === "right" && { right: `${meta.sticky.gap || 0}px` }),
+                            width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
                           }}
                           className={classNames(
                             variant === "compact" && "p-1.5",