signoz/frontend/src/components/TanStackTableView/TanStackTableView.module.scss

.tanstackTableViewWrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
	position: relative;
	min-height: 0;
}

.tanstackFixedCol {
	width: 32px;
	min-width: 32px;
	max-width: 32px;
}

.tanstackFillerCol {
	width: 100%;
	min-width: 0;
}

.tanstackActionsCol {
	width: 0;
	min-width: 0;
	max-width: 0;
}

.tanstackLoadMoreContainer {
	width: 100%;
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 0 12px;
	flex-shrink: 0;
}

.tanstackTableVirtuoso {
	width: 100%;
	overflow-x: auto;
}

.tanstackTableFootLoaderCell {
	text-align: center;
	padding: 8px 0;
}

.tanstackTableVirtuosoScroll {
	flex: 1;
	width: 100%;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--tanstack-table-scrollbar-color, var(--bg-slate-300))
		transparent;

	&::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}

	&::-webkit-scrollbar-corner {
		background: transparent;
	}

	&::-webkit-scrollbar-track {
		background: transparent;
	}

	&::-webkit-scrollbar-thumb {
		background: var(--tanstack-table-scrollbar-color, var(--bg-slate-300));
		border-radius: 9999px;
	}

	&::-webkit-scrollbar-thumb:hover {
		background: var(--tanstack-table-scrollbar-hover-color, var(--bg-slate-200));
	}

	&.cellTypographySmall {
		--tanstack-plain-cell-font-size: 11px;
		--tanstack-plain-cell-line-height: 16px;

		:global(table tr td),
		:global(table thead th) {
			font-size: 11px;
			line-height: 16px;
			letter-spacing: -0.07px;
		}
	}

	&.cellTypographyMedium {
		--tanstack-plain-cell-font-size: 13px;
		--tanstack-plain-cell-line-height: 20px;

		:global(table tr td),
		:global(table thead th) {
			font-size: 13px;
			line-height: 20px;
			letter-spacing: -0.07px;
		}
	}

	&.cellTypographyLarge {
		--tanstack-plain-cell-font-size: 14px;
		--tanstack-plain-cell-line-height: 24px;

		:global(table tr td),
		:global(table thead th) {
			font-size: 14px;
			line-height: 24px;
			letter-spacing: -0.07px;
		}
	}
}

.paginationContainer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 12px;

	ul {
		padding: 0;
	}
}

.paginationPageSize {
	width: 80px;
	--combobox-trigger-height: 2rem;
}

.paginationTotalCount {
	font-size: var(--periscope-font-size-base);
	color: var(--l1-foreground);
}

.tanstackLoadingOverlay {
	position: absolute;
	left: 50%;
	bottom: 2rem;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 3;
	border-radius: 8px;
	padding: 8px 16px;
	background: var(--tanstack-table-loading-overlay-bg, var(--l1-background));
	box-shadow: var(
		--tanstack-table-loading-overlay-shadow,
		0 2px 8px rgba(0, 0, 0, 0.15)
	);
}

:global(.lightMode) .tanstackTableVirtuosoScroll {
	scrollbar-color: var(--tanstack-table-scrollbar-color, var(--bg-vanilla-300))
		transparent;

	&::-webkit-scrollbar-thumb {
		background: var(--tanstack-table-scrollbar-color, var(--bg-vanilla-300));
	}

	&::-webkit-scrollbar-thumb:hover {
		background: var(
			--tanstack-table-scrollbar-hover-color,
			var(--bg-vanilla-100)
		);
	}
}