updated table

src/components/networkPage/networkTable.tsx

@@ -21,6 +21,7 @@ import NetworkOptionsModal from "./networkOptionsModal";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import toast from "react-hot-toast";
 import CopyIcon from "~/icons/copy";
+import { NetworkTableMemberCount } from "./networkTableMemberCount";
 
 const LOCAL_STORAGE_KEY = "networkTableSorting";
 
@@ -61,6 +62,9 @@ export const NetworkTable = ({ tableData = [] }) => {
 		members: network_members[];
 		networkMembers: network_members[];
 		action: string;
+		memberCounts: {
+			display: string;
+		};
 	};
 	const columnHelper = createColumnHelper<ColumnsType>();
 	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
@@ -101,10 +105,12 @@ export const NetworkTable = ({ tableData = [] }) => {
 				},
 			}),
 			columnHelper.accessor("members", {
-				header: () => <span>{t("commonTable.header.members")}</span>,
+				header: () => <span>{t("commonTable.header.memberActTot")}</span>,
 				cell: ({ row: { original } }) => {
-					if (!Array.isArray(original.networkMembers)) return <span>0</span>;
-					return <span>{original.networkMembers.length}</span>;
+					if (!Array.isArray(original.networkMembers)) {
+						return <NetworkTableMemberCount count="0" />;
+					}
+					return <NetworkTableMemberCount count={original.memberCounts.display} />;
 				},
 			}),
 			columnHelper.accessor("action", {

src/components/networkPage/networkTableMemberCount.tsx

@@ -0,0 +1,7 @@
+export const NetworkTableMemberCount = ({ count }) => {
+	return (
+		<div className="tabular-nums inline-flex justify-end min-w-[3.5rem]">
+			<span>{count}</span>
+		</div>
+	);
+};

src/components/organization/networkTable.tsx

@@ -19,6 +19,8 @@ import TableFooter from "~/components/shared/tableFooter";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import toast from "react-hot-toast";
 import CopyIcon from "~/icons/copy";
+import { MemberCounts } from "~/types/local/member";
+import { NetworkTableMemberCount } from "../networkPage/networkTableMemberCount";
 
 // import { makeNetworkData } from "../../utils/fakeData";
 const TruncateText = ({ text }: { text: string }) => {
@@ -41,6 +43,7 @@ const LOCAL_STORAGE_KEY = "centralNetworkTableSorting";
 
 interface OrgMemberEntity extends CentralMemberEntity {
 	networkMembers: string[];
+	memberCounts: MemberCounts;
 }
 
 export const OrganizationNetworkTable = ({ tableData = [] }) => {
@@ -64,14 +67,12 @@ export const OrganizationNetworkTable = ({ tableData = [] }) => {
 				header: () => <span>{t("commonTable.header.name")}</span>,
 			}),
 			columnHelper.accessor("description", {
-				size: 300,
+				size: 280,
 				cell: (info) => <TruncateText text={info.getValue()} />,
 				header: () => <span>{t("commonTable.header.description")}</span>,
 			}),
 			columnHelper.accessor("nwid", {
-				// cell: (info) => info.getValue(),
 				header: () => <span>{t("commonTable.header.networkId")}</span>,
-				// footer: (info) => info.column.id,
 				cell: ({ row: { original } }) => {
 					return (
 						<div onClick={(e) => e.stopPropagation()}>
@@ -93,11 +94,11 @@ export const OrganizationNetworkTable = ({ tableData = [] }) => {
 					);
 				},
 			}),
-			columnHelper.accessor("networkMembers", {
-				header: () => <span>{t("commonTable.header.members")}</span>,
+			columnHelper.accessor("memberCounts", {
+				header: () => <span>{t("commonTable.header.memberActTot")}</span>,
 				cell: (info) => {
 					const data = info.getValue();
-					return data.length;
+					return <NetworkTableMemberCount count={data.display} />;
 				},
 			}),
 		],

src/types/local/member.d.ts

@@ -137,3 +137,9 @@ export interface Notation {
 	orderIndex?: number;
 	visibility?: string;
 }
+
+export interface MemberCounts {
+	authorized: number;
+	total: number;
+	display: string;
+}