App screenPro
Data table
Wire it up
All optional. With none, it plays exactly as it does here and hands over to whoever touches it.
<ConversationTable
conversations={conversations}
product={product}
pageSize={pageSize}
onOpen={(id) => {}}
onAction={(action, ids) => {}}
onNavigate={(page) => {}}
/>Your data
conversationsThe rows: who, subject, topic, status, amount, minutes since the last message, rating and a summary.
Conversation[]productThe product’s name, in the ask bar and the summaries.
string'Detent'pageSizeRows on a page. The body is always this many rows tall.
number8sidebarDraw a sidebar for the rest of your app. Turn it on together with onNavigate, so every item goes somewhere.
booleanfalseWhat it tells you
onOpenCalled with a conversation a person opens.
(id: string) => voidonActionCalled when a person runs an action on rows. The script doesn’t call it.
(action: 'approve' | 'resolve' | 'assign', ids: string[]) => voidonNavigateCalled with a sidebar page a person presses. Without it the sidebar is a picture.
(page: SidebarPage) => voidEvery block also takes accent, the one colour everything in it derives from; autoplay, which plays the demo until someone touches it; and className.