Depth Table Integrations About Block for React

Edit INTEGRATIONS at the top of the file: each has a name, syncs (what moves), a direction (Pull, Push or Two-way), a sync frequency, an auth method and a state. The tally in the header is counted from the states by countIn. Systems are named by what they are, so the table never shows a vendor's logo or name unless you type it in.

Pull reads data from the system into the service, Push writes data from the service to it, and Two-way does both and keeps the two in step. The arrows are drawn and hidden from assistive technology, because the word beside each arrow says the same thing.

Each state is a word with a dot beside it: solid for Connected, hollow for Paused, and a warning dot for Needs sign-in. The dot is decoration; the word carries the meaning, so the table reads the same to anyone who cannot tell the dots apart.

It is a native table with a caption, column headers marked as columns and each integration's name as a row header, so every cell is read with its system and its column. The scrolling region is focusable and named, so a keyboard user can scroll it with the arrow keys.

The table keeps all five columns and scrolls sideways inside its frame, with the integration's name pinned to the start so you always know which row you are in. The header's tally moves under the heading. Nothing else scrolls sideways at 320 pixels, and in a right-to-left layout the pinned column moves to the right edge.

The header and the table fade up once on load, and a row takes a faint tint on hover. With reduced motion the entrance is off.