Intercom Contacts List Integration Block for React

Each sortable head is a real button inside a th, with aria-sort set to ascending or descending on the active column only. A first click starts at the order that matters most (most recent first for last seen, highest first for conversations and plan, failed first for sync, A to Z for names), and a second click turns it round. Ties fall back to the name. The polite line under the table says how the rows are ordered after each change.

Each contact stores a fixed ISO day and the table spells it as a weekday ("Tuesday") with a fixed formatter, so the server and every browser agree and nothing reads the clock. The note under the table says last seen is within the past week, which holds because the data is example data; with live data, show a date for anything older.

It changes local state only. The row turns to Syncing for 900 ms, then to Synced, the header count goes up by one and focus moves to the contact's row, since the button is gone. The polite line says "Retry queued for Dmitri Vale in this demo. Nothing was sent to Intercom." Replace retry with a call to your own sync endpoint.

Below md the last-seen day, plan and conversation count move into a second line under each name, so the table needs no sideways scroll; the table's region is still focusable in case it does scroll. In a right-to-left layout the columns flip while emails and numbers keep their direction. The header fades up once on load, and not at all with reduced motion.

A table with a caption, column heads that are buttons with their sort state, the contact's name as the row header, and a Retry button named "Retry the sync for Dmitri Vale". The sync state is a word ("Failed", "Syncing", "Synced") with a mark, never colour alone; the failed mark uses the status colour, the one exception in the block.