Loading...
Installation
Usage
import ColumnCollaborationTable from "@/components/ui/column-collaboration-table";
const columns = ["Name", "Email", "Location", "Status", "Balance"];
const data = [
{
id: "1",
Name: "John Doe",
Email: "[email protected]",
Location: "New York, US",
Status: "Active",
Balance: "$1,250.00",
},
// ... more data
];
export default function MyCollaborationTable() {
return <ColumnCollaborationTable columns={columns} data={data} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | string[] | defaultColumns | Array of column names |
data | ColumnCollaborationItem[] | defaultData | Array of data objects |
Data Item Type
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier for the row |
[key: string] | string | Dynamic properties matching column names |
Features
- Column Comments: Click the plus icon in any column header to add comments
- Comment Popover: Floating popover showing existing comments and input for new ones
- Scrollable Comments: Comment list scrolls when there are many comments
- Real-time Updates: Comments appear immediately after adding
- Team Collaboration: Perfect for team discussions about specific data columns
- Visual Indicators: Plus icon in headers shows where comments can be added
- Persistent State: Comments maintained during component lifecycle
- Responsive Design: Popovers adjust position based on screen space
- Clean Interface: Comments don't clutter the main table view
Use Cases
- Data Review: Team members can discuss specific columns during data analysis
- Quality Assurance: Add notes about data quality issues in specific columns
- Documentation: Document column meanings or calculation methods
- Feedback Collection: Gather input on data presentation or column relevance
- Change Requests: Discuss modifications needed for specific data fields