Cohort Sync Table List Integration Block for React

Failed is the one cohort marked as failed until its retry has run. Stale is any dynamic cohort whose last read, minutes in the data, is more than a day old: PostHog documents that a dynamic cohort updates once every 24 hours, so a read older than that has missed a recalculation. Everything else is Synced, and static cohorts, which don't change on their own, are never Stale. The headline and the foot line count the rows, so they follow every change.

It changes local state only. The button turns to "Retrying" and stays focusable under aria-disabled, so a second press does nothing; after about a second the cohort counts as read just now, its state becomes Synced, the button leaves, and the foot line takes focus so the result is read out. The line says nothing was read from PostHog. Wire it to your own sync and keep the same states.

The visible table and an unseen copy of the whole list share one grid cell, so the cell is always as tall as the full list and the rows below never move. The copy is hidden from assistive technology and can't be focused. The filter counts come from the data, and the foot line says how many cohorts are showing.

Yes: a native table with a visually hidden caption, header cells with scope, and each cohort's name as a row header. It sits in a focusable, named region so a keyboard can scroll it if a narrow screen ever overflows. On a phone the type, people and last read fold under the name, in one line that keeps the numbers together for right-to-left text.

The block names PostHog in text and ships no PostHog logo, colour or wordmark. PostHog's tile is a neutral lettermark, Ph in a muted square, in an icon slot that a code comment marks: drop in the official mark only if you have the rights to use it, under the owner's brand guidelines, and never redraw it.

Below md the table has two columns, the cohort with its folded facts and the state, and every row keeps one height so a retry doesn't move the rows below it. In a right-to-left layout the columns flip while counts keep their digits together. The header and list fade up once on load with CSS transitions; with reduced motion they simply appear.