# 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