diff --git a/internal/lookout/ui/src/components/ActionableValueOnHover.tsx b/internal/lookout/ui/src/components/ActionableValueOnHover.tsx
index 1f7ba72b2e9..778f8caeb4b 100644
--- a/internal/lookout/ui/src/components/ActionableValueOnHover.tsx
+++ b/internal/lookout/ui/src/components/ActionableValueOnHover.tsx
@@ -6,12 +6,17 @@ import { CopyIconButton } from "./CopyIconButton"
 import { AddFilter } from "./icons"
 
 const OuterContainer = styled("div")({
-  display: "flex",
+  display: "inline-flex",
+  width: "100%",
   flexDirection: "row",
   alignItems: "center",
   gap: "0.5ch",
 })
 
+const ContentContainer = styled("div")<{ minWidth: boolean }>(({ minWidth }) => ({
+  flexGrow: minWidth ? undefined : 1,
+}))
+
 const StyledIconButton = styled(IconButton)<IconButtonProps & { hidden: boolean }>(({ hidden }) => ({
   visibility: hidden ? "hidden" : "unset",
 }))
@@ -40,7 +45,7 @@ export const ActionableValueOnHover = ({
   const [hovering, setHovering] = useState(false)
   return (
     <OuterContainer onMouseEnter={() => setHovering(true)} onMouseLeave={() => setHovering(false)}>
-      <div>{children}</div>
+      <ContentContainer minWidth={Boolean(copyAction || filterAction)}>{children}</ContentContainer>
       {copyAction && (
         <div>
           <CopyIconButton
diff --git a/internal/lookout/ui/src/components/CopyIconButton.tsx b/internal/lookout/ui/src/components/CopyIconButton.tsx
index 1fc25ad3ce0..7aa3c0a21f1 100644
--- a/internal/lookout/ui/src/components/CopyIconButton.tsx
+++ b/internal/lookout/ui/src/components/CopyIconButton.tsx
@@ -20,7 +20,13 @@ export const CopyIconButton = ({ content, size, onClick, hidden = false }: CopyI
   const [tooltipOpen, setTooltipOpen] = useState(false)
 
   return (
-    <Tooltip title="Copied!" onClose={() => setTooltipOpen(false)} open={tooltipOpen} leaveDelay={LEAVE_DELAY_MS}>
+    <Tooltip
+      title="Copied!"
+      onClose={() => setTooltipOpen(false)}
+      open={tooltipOpen}
+      leaveDelay={LEAVE_DELAY_MS}
+      arrow={false}
+    >
       <StyledIconButton
         size={size}
         onClick={(e) => {
diff --git a/internal/lookout/ui/src/components/lookoutV2/JobGroupStateCounts.module.css b/internal/lookout/ui/src/components/lookoutV2/JobGroupStateCounts.module.css
deleted file mode 100644
index a00c31629f9..00000000000
--- a/internal/lookout/ui/src/components/lookoutV2/JobGroupStateCounts.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  gap: 5px;
-}
-
-.state {
-  flex: 1 0 1px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
diff --git a/internal/lookout/ui/src/components/lookoutV2/JobGroupStateCounts.tsx b/internal/lookout/ui/src/components/lookoutV2/JobGroupStateCounts.tsx
index b79774ce1e5..94e4131f70e 100644
--- a/internal/lookout/ui/src/components/lookoutV2/JobGroupStateCounts.tsx
+++ b/internal/lookout/ui/src/components/lookoutV2/JobGroupStateCounts.tsx
@@ -1,37 +1,52 @@
-import { Chip, Tooltip, Typography } from "@mui/material"
+import { Chip, styled, Tooltip } from "@mui/material"
 
-import styles from "./JobGroupStateCounts.module.css"
-import { JobState, jobStateColors, jobStateIcons } from "../../models/lookoutV2Models"
+import { JobState, jobStateColors } from "../../models/lookoutV2Models"
 import { formatJobState } from "../../utils/jobsTableFormatters"
 
+const CountsContainer = styled("div")({
+  display: "grid",
+  gridAutoColumns: "minmax(0, 1fr)",
+  gridAutoFlow: "column",
+  textAlign: "center",
+})
+
+const StateCountChip = styled(Chip)({
+  width: "100%",
+  borderRadius: 0,
+
+  "& .MuiChip-label": {
+    overflow: "visible",
+  },
+})
+
 interface JobGroupStateCountsProps {
+  jobStatesToDisplay?: JobState[]
   stateCounts: Partial<Record<JobState, number>>
 }
 
-export const JobGroupStateCounts = ({ stateCounts }: JobGroupStateCountsProps) => (
-  <div className={styles.container}>
-    {Object.values(JobState)
-      .flatMap(
-        (jobState) => (jobState in stateCounts ? [[jobState, stateCounts[jobState]]] : []) as [JobState, number][],
-      )
-      .map(([_jobState, count]) => {
-        const jobState = _jobState as JobState
-        const Icon = jobStateIcons[jobState]
-        return (
-          <Tooltip key={jobState} title={formatJobState(jobState)}>
-            <Chip
-              size="small"
-              variant="outlined"
-              label={
-                <Typography fontSize="inherit" color="text.primary" fontWeight="medium">
-                  {count.toString()}
-                </Typography>
-              }
-              color={jobStateColors[jobState]}
-              icon={<Icon />}
-            />
+export const JobGroupStateCounts = ({
+  stateCounts,
+  jobStatesToDisplay = Object.values(JobState),
+}: JobGroupStateCountsProps) => (
+  <CountsContainer>
+    {Object.values(JobState).map((_jobState) => {
+      const jobState = _jobState as JobState
+      const count = stateCounts[jobState] ?? 0
+      return (
+        jobStatesToDisplay.includes(jobState) && (
+          <Tooltip key={jobState} title={`${formatJobState(jobState)} (${count.toString()})`}>
+            <div>
+              <StateCountChip
+                size="small"
+                variant="shaded"
+                label={count.toString()}
+                color={jobStateColors[jobState]}
+                disabled={count === 0}
+              />
+            </div>
           </Tooltip>
         )
-      })}
-  </div>
+      )
+    })}
+  </CountsContainer>
 )
diff --git a/internal/lookout/ui/src/components/lookoutV2/JobGroupStateCountsColumnHeader.tsx b/internal/lookout/ui/src/components/lookoutV2/JobGroupStateCountsColumnHeader.tsx
new file mode 100644
index 00000000000..83b039cbeb6
--- /dev/null
+++ b/internal/lookout/ui/src/components/lookoutV2/JobGroupStateCountsColumnHeader.tsx
@@ -0,0 +1,35 @@
+import { styled, Tooltip } from "@mui/material"
+
+import { JobState, jobStateColors, jobStateIcons } from "../../models/lookoutV2Models"
+import { formatJobState } from "../../utils/jobsTableFormatters"
+
+const OuterContainer = styled("div")({
+  display: "grid",
+  gridAutoColumns: "minmax(0, 1fr)",
+  gridAutoFlow: "column",
+  textAlign: "center",
+})
+
+export interface JobGroupStateCountsColumnHeaderProps {
+  jobStatesToDisplay?: JobState[]
+}
+
+export const JobGroupStateCountsColumnHeader = ({
+  jobStatesToDisplay = Object.values(JobState),
+}: JobGroupStateCountsColumnHeaderProps) => (
+  <OuterContainer>
+    {Object.values(JobState).map((_jobState) => {
+      const jobState = _jobState as JobState
+      const Icon = jobStateIcons[jobState]
+      return (
+        jobStatesToDisplay.includes(jobState) && (
+          <Tooltip key={jobState} title={formatJobState(jobState)} placement="top">
+            <div>
+              <Icon fontSize="inherit" color={jobStateColors[jobState]} />
+            </div>
+          </Tooltip>
+        )
+      )
+    })}
+  </OuterContainer>
+)
diff --git a/internal/lookout/ui/src/components/lookoutV2/JobStateChip.tsx b/internal/lookout/ui/src/components/lookoutV2/JobStateChip.tsx
index c5a7e814212..abbf953d1f6 100644
--- a/internal/lookout/ui/src/components/lookoutV2/JobStateChip.tsx
+++ b/internal/lookout/ui/src/components/lookoutV2/JobStateChip.tsx
@@ -11,5 +11,7 @@ export const JobStateChip = ({ state }: JobStateChipProps) => {
     return null
   }
   const Icon = jobStateIcons[state]
-  return <Chip label={formatJobState(state)} size="small" color={jobStateColors[state]} icon={<Icon />} />
+  return (
+    <Chip label={formatJobState(state)} size="small" color={jobStateColors[state]} icon={<Icon />} variant="shaded" />
+  )
 }
diff --git a/internal/lookout/ui/src/components/lookoutV2/JobStateCountChip.tsx b/internal/lookout/ui/src/components/lookoutV2/JobStateCountChip.tsx
index 7c2868a0397..696dd1e1509 100644
--- a/internal/lookout/ui/src/components/lookoutV2/JobStateCountChip.tsx
+++ b/internal/lookout/ui/src/components/lookoutV2/JobStateCountChip.tsx
@@ -13,7 +13,7 @@ export const JobStateCountChip = ({ state, count, onClick }: JobStateCountChipPr
   const label = count.toString()
 
   return count > 0 ? (
-    <StyledChip label={label} color={jobStateColors[state]} clickable onClick={onClick} variant="filled" size="small" />
+    <StyledChip label={label} color={jobStateColors[state]} clickable onClick={onClick} variant="shaded" size="small" />
   ) : (
     <>{label}</>
   )
diff --git a/internal/lookout/ui/src/components/lookoutV2/JobsTableCell.tsx b/internal/lookout/ui/src/components/lookoutV2/JobsTableCell.tsx
index 1a9a90451db..0c43601e965 100644
--- a/internal/lookout/ui/src/components/lookoutV2/JobsTableCell.tsx
+++ b/internal/lookout/ui/src/components/lookoutV2/JobsTableCell.tsx
@@ -1,4 +1,4 @@
-import { RefObject } from "react"
+import { ReactNode, RefObject } from "react"
 
 import { KeyboardArrowRight, KeyboardArrowDown } from "@mui/icons-material"
 import { TableCell, IconButton, TableSortLabel, Box, styled } from "@mui/material"
@@ -7,10 +7,11 @@ import { Cell, ColumnResizeMode, flexRender, Header, Row } from "@tanstack/react
 import styles from "./JobsTableCell.module.css"
 import { JobsTableFilter } from "./JobsTableFilter"
 import { JobRow, JobTableRow } from "../../models/jobsTableModels"
-import { Match } from "../../models/lookoutV2Models"
-import { FilterType, getColumnMetadata, toColId } from "../../utils/jobsTableColumns"
+import { JobState, Match } from "../../models/lookoutV2Models"
+import { ColumnId, FilterType, getColumnMetadata, StandardColumnId, toColId } from "../../utils/jobsTableColumns"
 import { matchForColumn } from "../../utils/jobsTableUtils"
 import { ActionableValueOnHover } from "../ActionableValueOnHover"
+import { JobGroupStateCountsColumnHeader } from "./JobGroupStateCountsColumnHeader"
 
 const sharedCellStyle = {
   padding: 0,
@@ -19,14 +20,14 @@ const sharedCellStyle = {
   whiteSpace: "nowrap",
   overflow: "hidden",
   borderRight: "1px solid #cccccc",
-}
+} as const
 
 const sharedCellStyleWithOpacity = {
   ...sharedCellStyle,
   "&:hover": {
     opacity: 0.85,
   },
-}
+} as const
 
 const HeaderTableCell = styled(TableCell)(({ theme }) => ({
   backgroundColor: theme.palette.grey[200],
@@ -35,6 +36,13 @@ const HeaderTableCell = styled(TableCell)(({ theme }) => ({
   }),
 }))
 
+const JobGroupStateCountsColumnHeaderContainer = styled("div")({
+  marginTop: 5,
+  // Body cells have 8px horizontal padding while header cells have 10px. -2px margin on this container adjusts for this
+  marginLeft: -2,
+  marginRight: -2 - 5, // -5px to adjust for the column resizer
+})
+
 export interface HeaderCellProps {
   header: Header<JobRow, unknown>
   columnResizeMode: ColumnResizeMode
@@ -43,6 +51,7 @@ export interface HeaderCellProps {
   parseError: string | undefined
   onColumnMatchChange: (columnId: string, newMatch: Match) => void
   onSetTextFieldRef: (ref: RefObject<HTMLInputElement>) => void
+  groupedColumns: ColumnId[]
 }
 
 export function HeaderCell({
@@ -53,6 +62,7 @@ export function HeaderCell({
   parseError,
   onColumnMatchChange,
   onSetTextFieldRef,
+  groupedColumns,
 }: HeaderCellProps) {
   const id = toColId(header.id)
   const columnDef = header.column.columnDef
@@ -178,6 +188,15 @@ export function HeaderCell({
               onSetTextFieldRef={onSetTextFieldRef}
             />
           )}
+
+          {header.column.id === StandardColumnId.State &&
+            groupedColumns.filter((id) => id !== StandardColumnId.State)?.length > 0 && (
+              <JobGroupStateCountsColumnHeaderContainer>
+                <JobGroupStateCountsColumnHeader
+                  jobStatesToDisplay={header.column.getFilterValue() as JobState[] | undefined}
+                />
+              </JobGroupStateCountsColumnHeaderContainer>
+            )}
         </div>
         <div
           {...{
@@ -197,6 +216,11 @@ export function HeaderCell({
   )
 }
 
+const BodyTableCell = styled(TableCell)({
+  ...sharedCellStyleWithOpacity,
+  padding: "2px 8px 2px 8px",
+})
+
 export interface BodyCellProps {
   cell: Cell<JobRow, unknown>
   rowIsGroup: boolean
@@ -204,21 +228,16 @@ export interface BodyCellProps {
   onExpandedChange: () => void
   onClickRowCheckbox: (row: Row<JobTableRow>) => void
 }
+
 export const BodyCell = ({ cell, rowIsGroup, rowIsExpanded, onExpandedChange, onClickRowCheckbox }: BodyCellProps) => {
   const columnMetadata = getColumnMetadata(cell.column.columnDef)
   const cellHasValue = cell.renderValue()
   const isRightAligned = columnMetadata.isRightAligned ?? false
-  return (
-    <TableCell
-      key={cell.id}
-      align={isRightAligned ? "right" : "left"}
-      sx={{
-        ...sharedCellStyleWithOpacity,
-        padding: "2px 8px 2px 8px",
-      }}
-    >
-      {rowIsGroup && cell.column.getIsGrouped() && cellHasValue ? (
-        // If it's a grouped cell, add an expander and row count
+
+  const cellContent = ((): ReactNode => {
+    // If it's a grouped cell, add an expander and row count
+    if (rowIsGroup && cell.column.getIsGrouped() && cellHasValue) {
+      return (
         <Box
           sx={{
             display: "flex",
@@ -251,39 +270,48 @@ export const BodyCell = ({ cell, rowIsGroup, rowIsExpanded, onExpandedChange, on
             {flexRender(cell.column.columnDef.cell, cell.getContext())}
           </div>
         </Box>
-      ) : cell.getIsAggregated() ? (
-        // If the cell is aggregated, use the Aggregated
-        // renderer for cell
-        flexRender(cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell, {
+      )
+    }
+
+    // If the cell is aggregated, use the Aggregated renderer for cell
+    if (cell.getIsAggregated()) {
+      return flexRender(cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell, {
+        ...cell.getContext(),
+        onClickRowCheckbox,
+      })
+    }
+
+    return (
+      <ActionableValueOnHover
+        stopPropogationOnActionClick
+        copyAction={
+          !rowIsGroup && Boolean(cell.getValue()) && columnMetadata.allowCopy
+            ? { copyContent: String(cell.getValue()) }
+            : undefined
+        }
+        filterAction={
+          rowIsGroup || !cell.getValue() || columnMetadata.filterType === undefined
+            ? undefined
+            : {
+                onFilter: () => {
+                  cell.column.setFilterValue(
+                    columnMetadata.filterType === FilterType.Enum ? [cell.getValue()] : cell.getValue(),
+                  )
+                },
+              }
+        }
+      >
+        {flexRender(cell.column.columnDef.cell, {
           ...cell.getContext(),
           onClickRowCheckbox,
-        })
-      ) : (
-        <ActionableValueOnHover
-          stopPropogationOnActionClick
-          copyAction={
-            !rowIsGroup && Boolean(cell.getValue()) && columnMetadata.allowCopy
-              ? { copyContent: String(cell.getValue()) }
-              : undefined
-          }
-          filterAction={
-            rowIsGroup || !cell.getValue() || columnMetadata.filterType === undefined
-              ? undefined
-              : {
-                  onFilter: () => {
-                    cell.column.setFilterValue(
-                      columnMetadata.filterType === FilterType.Enum ? [cell.getValue()] : cell.getValue(),
-                    )
-                  },
-                }
-          }
-        >
-          {flexRender(cell.column.columnDef.cell, {
-            ...cell.getContext(),
-            onClickRowCheckbox,
-          })}
-        </ActionableValueOnHover>
-      )}
-    </TableCell>
+        })}
+      </ActionableValueOnHover>
+    )
+  })()
+
+  return (
+    <BodyTableCell key={cell.id} align={isRightAligned ? "right" : "left"}>
+      {cellContent}
+    </BodyTableCell>
   )
 }
diff --git a/internal/lookout/ui/src/containers/lookoutV2/JobsTableContainer.tsx b/internal/lookout/ui/src/containers/lookoutV2/JobsTableContainer.tsx
index 569222b1d59..e7b2d7351bb 100644
--- a/internal/lookout/ui/src/containers/lookoutV2/JobsTableContainer.tsx
+++ b/internal/lookout/ui/src/containers/lookoutV2/JobsTableContainer.tsx
@@ -825,6 +825,7 @@ export const JobsTableContainer = ({
                         onSetTextFieldRef={(ref) => {
                           setTextFieldRef(header.id, ref)
                         }}
+                        groupedColumns={grouping}
                       />
                     ))}
                   </TableRow>
diff --git a/internal/lookout/ui/src/theme/components/chip.ts b/internal/lookout/ui/src/theme/components/chip.ts
new file mode 100644
index 00000000000..718a52352f9
--- /dev/null
+++ b/internal/lookout/ui/src/theme/components/chip.ts
@@ -0,0 +1,67 @@
+import { alpha, ChipClasses, ChipProps, Components, Theme } from "@mui/material"
+
+declare module "@mui/material/Chip" {
+  interface ChipPropsVariantOverrides {
+    shaded: true
+  }
+}
+
+type ChipColor = Exclude<ChipProps["color"], undefined>
+
+const getShadedChipTextColor = (color: ChipColor, theme: Theme): string => {
+  switch (theme.palette.mode) {
+    case "light":
+      return color === "default" ? theme.palette.grey[400] : theme.palette[color].dark
+    case "dark":
+      return color === "default" ? theme.palette.grey[700] : theme.palette[color].light
+  }
+}
+
+const getShadedChipBackgroundColor = (color: ChipColor, theme: Theme): string | undefined => {
+  switch (theme.palette.mode) {
+    case "light":
+      return color === "default" ? undefined : alpha(theme.palette[color].light, 0.12)
+    case "dark":
+      return color === "default" ? undefined : alpha(theme.palette[color].dark, 0.12)
+  }
+}
+
+const ChipColorClassesKeyMap: Record<ChipColor, keyof ChipClasses> = {
+  default: "colorDefault",
+  primary: "colorPrimary",
+  secondary: "colorSecondary",
+  error: "colorError",
+  info: "colorInfo",
+  success: "colorSuccess",
+  warning: "colorWarning",
+  statusGrey: "colorStatusGrey",
+  statusBlue: "colorStatusBlue",
+  statusGreen: "colorStatusGreen",
+  statusAmber: "colorStatusAmber",
+  statusRed: "colorStatusRed",
+}
+
+export const MuiChip: Components<Theme>["MuiChip"] = {
+  variants: [
+    {
+      props: { variant: "shaded" },
+      style: ({ theme }) => [
+        {
+          fontWeight: theme.typography.fontWeightMedium,
+
+          ...Object.entries(ChipColorClassesKeyMap).reduce((acc, [_color, chipClassesKey]) => {
+            const color = _color as ChipColor
+            return {
+              ...acc,
+
+              [`&.MuiChip-${chipClassesKey}`]: {
+                backgroundColor: getShadedChipBackgroundColor(color, theme),
+                color: getShadedChipTextColor(color, theme),
+              },
+            }
+          }, {}),
+        },
+      ],
+    },
+  ],
+}
diff --git a/internal/lookout/ui/src/theme/components/tooltip.ts b/internal/lookout/ui/src/theme/components/tooltip.ts
new file mode 100644
index 00000000000..fe2c07bcf5f
--- /dev/null
+++ b/internal/lookout/ui/src/theme/components/tooltip.ts
@@ -0,0 +1,26 @@
+import { Components, tooltipClasses } from "@mui/material"
+
+export const MuiTooltip: Components["MuiTooltip"] = {
+  defaultProps: {
+    arrow: true,
+    placement: "top",
+    slotProps: {
+      popper: {
+        sx: {
+          [`&.${tooltipClasses.popper}[data-popper-placement*="bottom"] .${tooltipClasses.tooltip}`]: {
+            marginTop: "5px",
+          },
+          [`&.${tooltipClasses.popper}[data-popper-placement*="top"] .${tooltipClasses.tooltip}`]: {
+            marginBottom: "5px",
+          },
+          [`&.${tooltipClasses.popper}[data-popper-placement*="right"] .${tooltipClasses.tooltip}`]: {
+            marginLeft: "5px",
+          },
+          [`&.${tooltipClasses.popper}[data-popper-placement*="left"] .${tooltipClasses.tooltip}`]: {
+            marginRight: "5px",
+          },
+        },
+      },
+    },
+  },
+}
diff --git a/internal/lookout/ui/src/theme/palette.ts b/internal/lookout/ui/src/theme/palette.ts
index 6e1d354eeb7..23cbef30556 100644
--- a/internal/lookout/ui/src/theme/palette.ts
+++ b/internal/lookout/ui/src/theme/palette.ts
@@ -82,6 +82,8 @@ declare module "@mui/material/Button" {
 declare module "@mui/material/Chip" {
   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   interface ChipPropsColorOverrides extends CustomPaletteColorTokensTrueMap {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface ChipClasses extends Record<`color${Capitalize<CustomPaletteColorToken>}`, string> {}
 }
 
 declare module "@mui/material/SvgIcon" {
diff --git a/internal/lookout/ui/src/theme/theme.ts b/internal/lookout/ui/src/theme/theme.ts
index 7088b8257cb..4eb8a250ed3 100644
--- a/internal/lookout/ui/src/theme/theme.ts
+++ b/internal/lookout/ui/src/theme/theme.ts
@@ -1,9 +1,12 @@
 import { createTheme } from "@mui/material"
 
+import { MuiChip } from "./components/chip"
+import { MuiTooltip } from "./components/tooltip"
 import { darkModePalette, lightModePalette } from "./palette"
 import { typography } from "./typography"
 
 export const theme = createTheme({
   colorSchemes: { dark: { palette: darkModePalette }, light: { palette: lightModePalette } },
+  components: { MuiChip, MuiTooltip },
   typography,
 })
diff --git a/internal/lookout/ui/src/utils/jobsTableColumns.tsx b/internal/lookout/ui/src/utils/jobsTableColumns.tsx
index 80f388e7129..367e4fb46d8 100644
--- a/internal/lookout/ui/src/utils/jobsTableColumns.tsx
+++ b/internal/lookout/ui/src/utils/jobsTableColumns.tsx
@@ -238,7 +238,12 @@ export const JOB_COLUMNS: JobTableColumn[] = [
           cell.row.original.stateCounts &&
           cell.row.original.groupedField !== "state"
         ) {
-          return <JobGroupStateCounts stateCounts={cell.row.original.stateCounts} />
+          return (
+            <JobGroupStateCounts
+              stateCounts={cell.row.original.stateCounts}
+              jobStatesToDisplay={cell.column.getFilterValue() as JobState[] | undefined}
+            />
+          )
         } else {
           return <JobStateChip state={cell.getValue()} />
         }
@@ -251,7 +256,12 @@ export const JOB_COLUMNS: JobTableColumn[] = [
           cell.row.original.stateCounts &&
           cell.row.original.groupedField !== "state"
         ) {
-          return <JobGroupStateCounts stateCounts={cell.row.original.stateCounts} />
+          return (
+            <JobGroupStateCounts
+              stateCounts={cell.row.original.stateCounts}
+              jobStatesToDisplay={cell.column.getFilterValue() as JobState[] | undefined}
+            />
+          )
         } else {
           return <JobStateChip state={cell.getValue()} />
         }