+ {/* Table Header with scrollbar padding */}
+
+
+
+
+
+
+
+ Bucket Name
+
+
+ Object Count
+
+
+ Last Modified
+
+
+ Total Size
+
+
+
+
+
+
+ {/* Virtualized Table Body with dynamic height */}
+
+
+ {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+ const container = containers[virtualRow.index]
+ const isSelected = selectedContainers.includes(container.name)
+
+ const handleRowNavigate = () =>
+ navigate({
+ to: "/projects/$projectId/storage/$provider/containers/$containerName/objects",
+ params: {
+ projectId: projectId ?? "",
+ provider: (provider as string) ?? "ceph",
+ containerName: container.name,
+ },
+ })
+
+ return (
+
{
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault()
+ handleRowNavigate()
+ }
+ }}
+ >
+
e.stopPropagation()}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.stopPropagation()
+ }
+ }}
+ >
+ handleSelectContainer(container.name)}
+ data-testid={`select-container-${container.name}`}
+ />
+
+
+
+ {container.name}
+
+
+
{container.count.toLocaleString()}
+
{formatDate(container.last_modified || container.creationDate || "")}
+
{formatBytesBinary(container.bytes)}
+
e.stopPropagation()}>
+
+
+ setEmptyModalBucket(container)}
+ data-testid={`empty-action-${container.name}`}
+ />
+ setDeleteModalBucket(container)}
+ data-testid={`delete-action-${container.name}`}
+ />
+
+
+
+
+ )
+ })}
+
+
+
+ {/* Footer with count */}
+
+ {allContainersCount === 1 ? (
+ {allContainersCount} bucket
+ ) : (
+ {allContainersCount} buckets
+ )}
+
+