Table cell && E-2412 && E-2417

app/data/deep-dive/_features/contributors-table/_components/filter-columns/filter-columns.hooks.tsx

@@ -14,6 +14,7 @@ import { AvatarLabelGroup } from "@/design-system/molecules/avatar-label-group";
 import { SortDirection } from "@/design-system/molecules/table-sort";
 
 import { TABLE_CELL_SIZE } from "@/shared/constants/table";
+import { CellCategories } from "@/shared/features/table/cell/cell-categories/cell-categories";
 import { CellEcosystems } from "@/shared/features/table/cell/cell-ecosystems/cell-ecosystems";
 import { CellEmpty } from "@/shared/features/table/cell/cell-empty/cell-empty";
 import { CellLanguages } from "@/shared/features/table/cell/cell-languages/cell-languages";
@@ -97,13 +98,9 @@ export function useFilterColumns() {
       enableSorting: false,
       header: () => <Translate token={"data:deepDive.contributorsTable.columns.categories"} />,
       cell: info => {
-        const categories = info.getValue();
+        const categories = info.getValue() ?? [];
 
-        if (!categories?.length) {
-          return <CellEmpty />;
-        }
-
-        return <TableCellKpi>{categories.map(category => category.name).join(", ")}</TableCellKpi>;
+        return <CellCategories categories={categories} />;
       },
     }),
     languages: columnHelper.accessor("languages", {
@@ -127,6 +124,7 @@ export function useFilterColumns() {
     country: columnHelper.accessor("country", {
       enableSorting: false,
       size: TABLE_CELL_SIZE.SM,
+      minSize: TABLE_CELL_SIZE.SM,
       header: () => <Translate token={"data:deepDive.contributorsTable.columns.country"} />,
       cell: info => {
         const country = info.getValue();
@@ -162,7 +160,8 @@ export function useFilterColumns() {
       },
     }),
     contributionCount: columnHelper.accessor("contributionCount", {
-      size: TABLE_CELL_SIZE.SM,
+      size: TABLE_CELL_SIZE.MD,
+      minSize: TABLE_CELL_SIZE.MD,
       header: () => <Translate token={"data:deepDive.contributorsTable.columns.contributionCount"} />,
       cell: info => {
         const { value, trend } = info.getValue() ?? {};
@@ -174,6 +173,7 @@ export function useFilterColumns() {
     }),
     prCount: columnHelper.accessor("prCount", {
       size: TABLE_CELL_SIZE.SM,
+      minSize: TABLE_CELL_SIZE.SM,
       header: () => <Translate token={"data:deepDive.contributorsTable.columns.prCount"} />,
       cell: info => {
         const { value, trend } = info.getValue() ?? {};
@@ -186,6 +186,7 @@ export function useFilterColumns() {
     rewardCount: columnHelper.accessor("rewardCount", {
       enableSorting: false,
       size: TABLE_CELL_SIZE.SM,
+      minSize: TABLE_CELL_SIZE.SM,
       header: () => <Translate token={"data:deepDive.contributorsTable.columns.rewardCount"} />,
       cell: info => {
         const { value, trend } = info.getValue() ?? {};
@@ -198,6 +199,7 @@ export function useFilterColumns() {
     engagementStatus: columnHelper.accessor("engagementStatus", {
       enableSorting: false,
       size: TABLE_CELL_SIZE.MD,
+      minSize: TABLE_CELL_SIZE.MD,
       header: () => <Translate token={"data:deepDive.contributorsTable.columns.engagementStatuses"} />,
       cell: info => {
         const engagementStatuses = info.getValue();

app/data/deep-dive/_features/projects-table/_components/filter-columns/filter-columns.hooks.tsx

@@ -12,8 +12,8 @@ import { AvatarLabelGroup } from "@/design-system/molecules/avatar-label-group";
 import { SortDirection } from "@/design-system/molecules/table-sort";
 
 import { TABLE_CELL_SIZE } from "@/shared/constants/table";
-import { CellBadge } from "@/shared/features/table/cell/cell-badge/cell-badge";
 import { CellBudget } from "@/shared/features/table/cell/cell-budget/cell-budget";
+import { CellCategories } from "@/shared/features/table/cell/cell-categories/cell-categories";
 import { CellEcosystems } from "@/shared/features/table/cell/cell-ecosystems/cell-ecosystems";
 import { CellEmpty } from "@/shared/features/table/cell/cell-empty/cell-empty";
 import { CellLanguages } from "@/shared/features/table/cell/cell-languages/cell-languages";
@@ -108,8 +108,9 @@ export function useFilterColumns() {
       enableSorting: false,
       header: () => <Translate token={"data:deepDive.projectsTable.columns.categories"} />,
       cell: info => {
-        const categories = info.getValue();
-        return <CellBadge items={categories?.map(category => category.name)} />;
+        const categories = info.getValue() ?? [];
+
+        return <CellCategories categories={categories} />;
       },
     }),
     languages: columnHelper.accessor("languages", {
@@ -149,6 +150,7 @@ export function useFilterColumns() {
     }),
     percentUsedBudget: columnHelper.accessor("percentUsedBudget", {
       size: TABLE_CELL_SIZE.MD,
+      minSize: TABLE_CELL_SIZE.MD,
       header: () => <Translate token={"data:deepDive.projectsTable.columns.percentUsedBudget"} />,
       cell: info => {
         const value = info.getValue();
@@ -195,7 +197,8 @@ export function useFilterColumns() {
       },
     }),
     onboardedContributorCount: columnHelper.accessor("onboardedContributorCount", {
-      size: TABLE_CELL_SIZE.SM,
+      size: TABLE_CELL_SIZE.MD,
+      minSize: TABLE_CELL_SIZE.MD,
       header: () => <Translate token={"data:deepDive.projectsTable.columns.onboardedContributorCount"} />,
       cell: info => {
         const { value, trend } = info.getValue() ?? {};
@@ -206,7 +209,8 @@ export function useFilterColumns() {
       },
     }),
     activeContributorCount: columnHelper.accessor("activeContributorCount", {
-      size: TABLE_CELL_SIZE.SM,
+      size: TABLE_CELL_SIZE.MD,
+      minSize: TABLE_CELL_SIZE.MD,
       header: () => <Translate token={"data:deepDive.projectsTable.columns.activeContributorCount"} />,
       cell: info => {
         const { value, trend } = info.getValue() ?? {};
@@ -218,6 +222,7 @@ export function useFilterColumns() {
     }),
     prCount: columnHelper.accessor("prCount", {
       size: TABLE_CELL_SIZE.SM,
+      minSize: TABLE_CELL_SIZE.SM,
       header: () => <Translate token={"data:deepDive.projectsTable.columns.prCount"} />,
       cell: info => {
         const { value, trend } = info.getValue() ?? {};
@@ -228,7 +233,8 @@ export function useFilterColumns() {
       },
     }),
     rewardCount: columnHelper.accessor("rewardCount", {
-      size: TABLE_CELL_SIZE.SM,
+      size: TABLE_CELL_SIZE.MD,
+      minSize: TABLE_CELL_SIZE.MD,
       header: () => <Translate token={"data:deepDive.projectsTable.columns.rewardCount"} />,
       cell: info => {
         const { value, trend } = info.getValue() ?? {};
@@ -239,7 +245,8 @@ export function useFilterColumns() {
       },
     }),
     contributionCount: columnHelper.accessor("contributionCount", {
-      size: TABLE_CELL_SIZE.SM,
+      size: TABLE_CELL_SIZE.MD,
+      minSize: TABLE_CELL_SIZE.MD,
       header: () => <Translate token={"data:deepDive.projectsTable.columns.contributionCount"} />,
       cell: info => {
         const { value, trend } = info.getValue() ?? {};
@@ -252,6 +259,7 @@ export function useFilterColumns() {
     engagementStatus: columnHelper.accessor("engagementStatus", {
       enableSorting: false,
       size: TABLE_CELL_SIZE.MD,
+      minSize: TABLE_CELL_SIZE.MD,
       header: () => <Translate token={"data:deepDive.projectsTable.columns.engagementStatuses"} />,
       cell: info => {
         const engagementStatuses = info.getValue();

app/financials/[sponsorId]/_features/programs-table/programs-table.tsx

@@ -90,6 +90,7 @@ export function ProgramsTable({ onAllocateClick }: ProgramsTableProps) {
     columnHelper.accessor("projectCount", {
       enableSorting: false,
       size: TABLE_CELL_SIZE.SM,
+      minSize: TABLE_CELL_SIZE.SM,
       header: () => <Translate token={"financials:details.programs.table.columns.projects"} />,
       cell: info => {
         return <TableCellKpi>{info.getValue()}</TableCellKpi>;

app/manage-projects/[projectSlug]/features/contributors-table/_components/filter-columns/filter-columns.hooks.tsx

@@ -107,6 +107,7 @@ export function useFilterColumns() {
       id: "select",
       enableResizing: false,
       size: TABLE_CELL_SIZE.XS,
+      minSize: TABLE_CELL_SIZE.XS,
       header: ({ table }) => (
         <Checkbox
           onNativeEventChange={table.getToggleAllRowsSelectedHandler()}
@@ -182,6 +183,7 @@ export function useFilterColumns() {
     country: columnHelper.accessor("country", {
       enableSorting: false,
       size: TABLE_CELL_SIZE.SM,
+      minSize: TABLE_CELL_SIZE.SM,
       header: () => <Translate token={"manageProjects:detail.contributorsTable.columns.country"} />,
       cell: info => {
         const country = info.getValue();

app/manage-projects/[projectSlug]/features/rewards-table/_components/filter-columns/filter-columns.hooks.tsx

@@ -68,6 +68,7 @@ export function useFilterColumns({ projectId }: { projectId: string }) {
   const columnMap: Partial<Record<TableColumns, object>> = {
     requestedAt: columnHelper.accessor("requestedAt", {
       size: TABLE_CELL_SIZE.SM,
+      minSize: TABLE_CELL_SIZE.SM,
       header: () => <Translate token={"manageProjects:detail.rewardsTable.columns.date"} />,
       cell: info => {
         const requestedAt = info.getValue();
@@ -82,6 +83,7 @@ export function useFilterColumns({ projectId }: { projectId: string }) {
     id: columnHelper.accessor("id", {
       enableSorting: false,
       size: TABLE_CELL_SIZE.SM,
+      minSize: TABLE_CELL_SIZE.SM,
       header: () => <Translate token={"manageProjects:detail.rewardsTable.columns.id"} />,
       cell: info => {
         const id = info.getValue();

app/manage-projects/features/projects-table/components/filter-columns/filter-columns.hooks.tsx

@@ -77,6 +77,7 @@ export function useFilterColumns() {
     contributorCount: columnHelper.accessor("contributorCount", {
       enableSorting: false,
       size: TABLE_CELL_SIZE.SM,
+      minSize: TABLE_CELL_SIZE.SM,
       header: () => <Translate token={"manageProjects:list.projectsTable.columns.members"} />,
       cell: info => {
         const contributorCount = info.getValue();

app/my-dashboard/_features/rewards-table/_components/filter-columns/filter-columns.hooks.tsx

@@ -56,6 +56,7 @@ export function useFilterColumns() {
   const columnMap: Partial<Record<TableColumns, object>> = {
     requestedAt: columnHelper.accessor("requestedAt", {
       size: TABLE_CELL_SIZE.SM,
+      minSize: TABLE_CELL_SIZE.SM,
       header: () => <Translate token={"myDashboard:detail.rewardsTable.columns.date"} />,
       cell: info => {
         const requestedAt = info.getValue();
@@ -73,6 +74,7 @@ export function useFilterColumns() {
     id: columnHelper.accessor("id", {
       enableSorting: false,
       size: TABLE_CELL_SIZE.SM,
+      minSize: TABLE_CELL_SIZE.SM,
       header: () => <Translate token={"myDashboard:detail.rewardsTable.columns.id"} />,
       cell: info => {
         const id = info.getValue();

app/programs/[programId]/_features/projects-table/projects-table.tsx

@@ -158,6 +158,7 @@ export function ProjectsTable({ programId }: { programId: string }) {
     columnHelper.accessor("percentUsedBudget", {
       enableSorting: false,
       size: TABLE_CELL_SIZE.MD,
+      minSize: TABLE_CELL_SIZE.MD,
       header: () => <Translate token={"programs:details.projects.table.columns.budgetUsed"} />,
       cell: info => {
         const value = info.getValue() ?? 0;
@@ -168,7 +169,8 @@ export function ProjectsTable({ programId }: { programId: string }) {
 
     columnHelper.accessor("mergedPrCount", {
       enableSorting: false,
-      size: TABLE_CELL_SIZE.SM,
+      size: TABLE_CELL_SIZE.MD,
+      minSize: TABLE_CELL_SIZE.MD,
       header: () => <Translate token={"programs:details.projects.table.columns.prsMerged"} />,
       cell: info => {
         const { value, trend } = info.getValue() ?? {};
@@ -179,7 +181,8 @@ export function ProjectsTable({ programId }: { programId: string }) {
 
     columnHelper.accessor("newContributorsCount", {
       enableSorting: false,
-      size: TABLE_CELL_SIZE.SM,
+      size: TABLE_CELL_SIZE.MD,
+      minSize: TABLE_CELL_SIZE.MD,
       header: () => <Translate token={"programs:details.projects.table.columns.onboardedDevs"} />,
       cell: info => {
         const { value, trend } = info.getValue() ?? {};
@@ -189,7 +192,8 @@ export function ProjectsTable({ programId }: { programId: string }) {
     }),
     columnHelper.accessor("activeContributorsCount", {
       enableSorting: false,
-      size: TABLE_CELL_SIZE.SM,
+      size: TABLE_CELL_SIZE.MD,
+      minSize: TABLE_CELL_SIZE.MD,
       header: () => <Translate token={"programs:details.projects.table.columns.activeDevs"} />,
       cell: info => {
         const { value, trend } = info.getValue() ?? {};

app/programs/_features/programs-table/programs-table.tsx

@@ -59,6 +59,7 @@ export function ProgramsTable() {
     columnHelper.accessor("projectCount", {
       enableSorting: false,
       size: TABLE_CELL_SIZE.SM,
+      minSize: TABLE_CELL_SIZE.SM,
       header: () => <Translate token={"programs:list.content.table.columns.projects"} />,
       cell: info => {
         return <TableCellKpi>{info.getValue()}</TableCellKpi>;

design-system/atoms/table-row/adapters/react-table/react-table.variants.tsx → design-system/atoms/table-row/adapters/react-table/react-table.variants.ts

@@ -3,7 +3,7 @@ import { tv } from "tailwind-variants";
 export const TableRowReactTableVariants = tv({
   slots: {
     base: "",
-    cell: "border-b-1 border-l-0 border-r-0 border-t-0 border-border-primary p-lg",
+    cell: "overflow-hidden whitespace-nowrap border-b-1 border-l-0 border-r-0 border-t-0 border-border-primary p-lg",
   },
   variants: {},
   defaultVariants: {},

design-system/molecules/table/adapters/default/default.variants.ts

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 export const TableDefaultVariants = tv({
   slots: {
-    base: "min-w-full",
+    base: "min-w-full table-fixed",
   },
   variants: {},
   defaultVariants: {},

shared/constants/table.ts

@@ -1,7 +1,7 @@
 export const TABLE_DEFAULT_COLUMN = {
   size: 200,
-  minSize: 50,
-  maxSize: 500,
+  minSize: 150,
+  maxSize: 700,
 } as const;
 
 export const TABLE_CELL_SIZE = {

shared/features/program/program-group/program-group.tsx

@@ -35,6 +35,7 @@ export function ProgramGroup({ programs, maxPrograms = 4, avatarProps }: Program
                 src: logoUrl,
                 name,
               }))}
+              size={avatarProps?.size}
               quantity={maxPrograms}
               totalAvatarsCount={programsCount}
             />

shared/features/table/cell/cell-badge/cell-badge.tsx

@@ -1,76 +1,29 @@
 import { Badge } from "@/design-system/atoms/badge";
-import { Popover } from "@/design-system/atoms/popover";
-import { Typo } from "@/design-system/atoms/typo";
-import { AvatarLabelGroup } from "@/design-system/molecules/avatar-label-group";
 
-import { ScrollView } from "@/shared/components/scroll-view/scroll-view";
 import { CellEmpty } from "@/shared/features/table/cell/cell-empty/cell-empty";
 
 import { CellBadgeProps } from "./cell-badge.types";
 
-export function CellBadge({ items, badgeProps = {}, popOverAvatars }: CellBadgeProps) {
+export function CellBadge({ items }: CellBadgeProps) {
   if (!items?.length) {
     return <CellEmpty />;
   }
 
-  const badgeContent = items[0];
-  const additionalBadges = items?.length > 1 ? items.length - 1 : undefined;
-
   return (
-    <Popover>
-      <Popover.Trigger>
-        {() => (
-          <div className={"flex flex-row gap-1"}>
-            <Badge
-              {...badgeProps}
-              classNames={{
-                base: "w-fit",
-              }}
-              endContent={
-                additionalBadges ? (
-                  <Badge
-                    variant={"solid"}
-                    size={"xxs"}
-                    color={"grey"}
-                    classNames={{
-                      base: "bg-components-badge-grey-backgroundoutline-border",
-                    }}
-                  >
-                    + {additionalBadges}
-                  </Badge>
-                ) : null
-              }
-            >
-              {badgeContent}
-            </Badge>
-          </div>
-        )}
-      </Popover.Trigger>
-
-      <Popover.Content>
-        {() => (
-          <div className="h-fit w-fit overflow-hidden">
-            <ScrollView className={"max-h-[300px]"}>
-              <div className="flex w-fit flex-col gap-2">
-                {popOverAvatars
-                  ? popOverAvatars?.map((avatar, index) => (
-                      <AvatarLabelGroup
-                        shape={"rounded"}
-                        avatars={[avatar]}
-                        key={index}
-                        title={{ children: avatar?.name }}
-                      />
-                    ))
-                  : items.map((item, index) => (
-                      <Typo key={index} size={"xs"} color={"secondary"}>
-                        {item}
-                      </Typo>
-                    ))}
-              </div>
-            </ScrollView>
-          </div>
-        )}
-      </Popover.Content>
-    </Popover>
+    <div className="flex items-center gap-xs">
+      {items.map(({ content, badgeProps }, index) => (
+        <Badge
+          key={`cell-badge-${index}`}
+          size="md"
+          classNames={{
+            base: "overflow-visible",
+            label: "overflow-visible whitespace-nowrap text-clip",
+          }}
+          {...badgeProps}
+        >
+          {content}
+        </Badge>
+      ))}
+    </div>
   );
 }