diff --git a/packages/features/data-table/components/DataTable.tsx b/packages/features/data-table/components/DataTable.tsx index d498b669d2..b868afac58 100644 --- a/packages/features/data-table/components/DataTable.tsx +++ b/packages/features/data-table/components/DataTable.tsx @@ -62,12 +62,13 @@ export function DataTable({ const columnSizeVars = useMemo(() => { const headers = table.getFlatHeaders(); - const colSizes: { [key: string]: number } = {}; + const colSizes: { [key: string]: string } = {}; 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(); + const isAutoWidth = header.column.columnDef.meta?.autoWidth; + colSizes[`--header-${header.id}-size`] = isAutoWidth ? "auto" : `${header.getSize()}px`; + colSizes[`--col-${header.column.id}-size`] = isAutoWidth ? "auto" : `${header.column.getSize()}px`; } return colSizes; }, [table.getFlatHeaders(), table.getState().columnSizingInfo, table.getState().columnSizing]); @@ -102,7 +103,7 @@ export function DataTable({ 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)`, + width: `var(--header-${header?.id}-size)`, }} className={classNames( "flex shrink-0 items-center", @@ -162,7 +163,7 @@ export function DataTable({ 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)`, + width: `var(--col-${cell.column.id}-size)`, }} className={classNames( "flex shrink-0 items-center overflow-hidden", diff --git a/packages/features/ee/dsync/components/GroupTeamMappingTable.tsx b/packages/features/ee/dsync/components/GroupTeamMappingTable.tsx index 038c93a1b7..0bd4d93dca 100644 --- a/packages/features/ee/dsync/components/GroupTeamMappingTable.tsx +++ b/packages/features/ee/dsync/components/GroupTeamMappingTable.tsx @@ -28,6 +28,7 @@ const GroupTeamMappingTable = () => { { id: "name", header: t("team"), + size: 200, cell: ({ row }) => { const { name } = row.original; @@ -37,6 +38,7 @@ const GroupTeamMappingTable = () => { { id: "group", header: t("group_name"), + size: 200, cell: ({ row }) => { const { id, groupNames, directoryId } = row.original; diff --git a/packages/features/ee/teams/components/MemberList.tsx b/packages/features/ee/teams/components/MemberList.tsx index b00dde4845..957d0dac07 100644 --- a/packages/features/ee/teams/components/MemberList.tsx +++ b/packages/features/ee/teams/components/MemberList.tsx @@ -45,6 +45,7 @@ import { DialogFooter, Dropdown, DropdownItem, + DropdownMenuPortal, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, @@ -283,6 +284,7 @@ export default function MemberList(props: Props) { id: "select", enableHiding: false, enableSorting: false, + size: 30, header: ({ table }) => ( data.email, enableHiding: false, header: `Member (${totalDBRowCount})`, + size: 250, cell: ({ row }) => { const { username, email, avatarUrl, accepted, name } = row.original; const memberName = @@ -344,6 +347,7 @@ export default function MemberList(props: Props) { id: "role", accessorFn: (data) => data.role, header: "Role", + size: 100, cell: ({ row, table }) => { const { role, accepted } = row.original; return ( @@ -387,6 +391,10 @@ export default function MemberList(props: Props) { }, { id: "actions", + size: 80, + meta: { + sticky: { position: "right" }, + }, cell: ({ row }) => { const user = row.original; const isSelf = user.id === session?.user.id; @@ -454,99 +462,8 @@ export default function MemberList(props: Props) { StartIcon="ellipsis" /> - - - - dispatch({ - type: "EDIT_USER_SHEET", - payload: { - user, - showModal: true, - }, - }) - } - StartIcon="pencil"> - {t("edit")} - - - {impersonationMode && ( - <> - - - dispatch({ - type: "SET_IMPERSONATE_ID", - payload: { - user, - showModal: true, - }, - }) - } - StartIcon="lock"> - {t("impersonate")} - - - - - )} - {resendInvitation && ( - - { - resendInvitationMutation.mutate({ - teamId: props.team?.id, - email: user.email, - language: i18n.language, - }); - }} - StartIcon="send"> - {t("resend_invitation")} - - - )} - - - dispatch({ - type: "SET_DELETE_ID", - payload: { - user, - showModal: true, - }, - }) - } - color="destructive" - StartIcon="user-x"> - {t("remove")} - - - - - )} - -
- - -
diff --git a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx index 4cfc68918a..2050589d9a 100644 --- a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx +++ b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx @@ -95,6 +95,7 @@ export function AvailabilitySliderTable(props: { userTimeFormat: number | null; id: "member", accessorFn: (data) => data.username, header: "Member", + size: 200, cell: ({ row }) => { const { username, email, timeZone, name, avatarUrl, profile } = row.original; return ( @@ -125,6 +126,7 @@ export function AvailabilitySliderTable(props: { userTimeFormat: number | null; id: "timezone", accessorFn: (data) => data.timeZone, header: "Timezone", + size: 160, cell: ({ row }) => { const { timeZone } = row.original; const timeRaw = dayjs().tz(timeZone); @@ -146,6 +148,9 @@ export function AvailabilitySliderTable(props: { userTimeFormat: number | null; }, { id: "slider", + meta: { + autoWidth: true, + }, header: () => { return (
diff --git a/packages/types/tanstack-table.d.ts b/packages/types/tanstack-table.d.ts index f912407451..59fbebc289 100644 --- a/packages/types/tanstack-table.d.ts +++ b/packages/types/tanstack-table.d.ts @@ -7,5 +7,10 @@ declare module "@tanstack/table-core" { gap?: number; }; filterType?: "select" | "text"; + + // `autoWidth` can make the column size dynamic, + // allowing each row to have a different width based on its content. + // As a result, scrolling may be flaky, unless the content size is consistent. + autoWidth?: boolean; } }