Chat
A production-grade conversational chat component with thread history sidebar, rich message rendering, status indicators, file attachments, and auto-expanding composer.
AI Assistant
Claude 3.7 Sonnet
Alex· 10:41 AM
Can you show me how to compose an accessible data table in EasyUI?
EasyAI Assistant· 10:42 AM
Certainly! EasyUI provides a fully compound
<DataTable> component with sorting, searching, selection, and responsive pagination:
tsx
<DataTable data={users} columns={columns}>
<DataTableToolbar title="Team Directory" />
<DataTableFilters />
<DataTableContent />
<DataTablePagination />
</DataTable>
It adheres to strict monochromatic styling and supports full keyboard navigation out of the box.
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/chat
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| messages | ChatMessageItem[] | [] | Array of chat message records including role, content, author, and attachments |
| onSendMessage | (content: string, attachments?: ChatAttachment[]) => void | undefined | Callback fired when the user submits a message via composer |
| isGenerating | boolean | false | Disables composer and shows loading status while the assistant is synthesizing an answer |
| threads | ChatConversationThread[] | undefined | Optional list of historical conversations displayed in the sidebar |
| activeThreadId | string | undefined | ID of the currently selected conversation thread |
| onSelectThread | (threadId: string) => void | undefined | Callback fired when a user selects a thread from the history sidebar |
| onNewChat | () => void | undefined | Callback fired when the user clicks the New Conversation button |
| onClearChat | () => void | undefined | Callback fired when the user clicks the clear chat history button |
| className | string | undefined | Custom Tailwind class names for styling overrides |