Loading...
Installation
Usage
import TableDialog from "@/components/ui/table-dialog";
const userData = [
{
id: "1",
name: "John Doe",
email: "john@company.com",
role: "Manager",
status: "Active" as const,
balance: "$1,250.00",
},
// ... more users
];
export default function MyEditableTable() {
return (
<TableDialog data={userData} footerTotal="$5,000.00" maxHeight="500px" />
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | User[] | defaultUsers | Array of user objects to display |
footerTotal | string | "$3,400.00" | Total amount shown in table footer |
maxHeight | string | "400px" | Maximum height for scrollable table area |
User Type
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier for the user |
name | string | User's full name |
email | string | User's email address |
role | string | User's role/position |
status | "Active" | "Inactive" | User's current status |
balance | string | Formatted balance amount |
Features
- Inline Editing: Click edit button to open dialog for row editing
- Dialog Form: Modal dialog with form inputs for all user fields
- Row Selection: Multi-select rows with checkboxes
- Select All: Header checkbox to select/deselect all rows
- Status Badges: Visual status indicators with color coding
- Scrollable Content: Fixed header with scrollable body
- Action Menu: Dropdown menu for row-level actions
- Footer Summary: Total balance displayed in table footer
- Form Validation: Proper form handling with select dropdowns
- Responsive Design: Mobile-friendly layout and interactions