DataTable Actions Implementation Test

Summary of Changes

✅ Added tableActions prop to DataTable component
✅ Added global actions section above the DataTable
✅ Added bulk actions section when rows are selected
✅ Added actions column for row-specific actions
✅ Implemented action handlers with row data passing
✅ Added multi-selection support for bulk operations
✅ Updated Clients component to use table actions
✅ Updated documentation with action configuration examples

Key Features Implemented

Global Actions

Actions with requiresSelection: false appear above the table:

{
  label: "Add Client",
  action: () => modalStore.openModal("createClient"),
  icon: "pi pi-plus", 
  style: "primary",
  requiresSelection: false
}

Bulk Actions

Actions with requiresMultipleSelection: true appear when rows are selected:

{
  label: "Export Selected",
  action: (selectedRows) => exportData(selectedRows),
  icon: "pi pi-download",
  style: "success",
  requiresMultipleSelection: true
}

Row Actions

Actions with requiresSelection: true (or omitted) appear in actions column:

{
  label: "View",
  action: (rowData) => router.push(`/clients/${rowData.id}`),
  icon: "pi pi-eye",
  style: "secondary"
}

Action Handlers

The DataTable automatically passes appropriate data to different action types:

// Global action handler
const handleGlobalAction = (action) => {
  action.action(); // No data passed
};

// Row action handler  
const handleRowAction = (action, rowData) => {
  action.action(rowData); // Single row data passed
};

// Bulk action handler
const handleBulkAction = (action, selectedRows) => {
  action.action(selectedRows); // Array of selected rows passed
};

Action Types Supported

Action Type	Property	Data Received	Display Location	Enabled When
Global	Default (no special props)	None	Above table	Always
Single Selection	`requiresSelection: true`	Selected row object	Above table	Exactly one row selected
Row	`rowAction: true`	Individual row object	Actions column	Always (per row)
Bulk	`requiresMultipleSelection: true`	Array of selected rows	Above table (when rows selected)	One or more rows selected

Usage in Components

Components can now pass table actions to DataTable:

<DataTable
  :data="tableData"
  :columns="columns" 
  :tableActions="tableActions"
  tableName="clients"
  :lazy="true"
  :totalRecords="totalRecords"
  :loading="isLoading"
  @lazy-load="handleLazyLoad"
/>

Browser Compatibility

✅ Vue 3 Composition API compatible
✅ PrimeVue components integration
✅ Reactive row data passing
✅ Error handling for action execution