130 lines
4.1 KiB
HTML
130 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DataTable Actions Test</title>
|
|
</head>
|
|
<body>
|
|
<h1>DataTable Actions Implementation Test</h1>
|
|
|
|
<h2>Summary of Changes</h2>
|
|
<ul>
|
|
<li>✅ Added <code>tableActions</code> prop to DataTable component</li>
|
|
<li>✅ Added global actions section above the DataTable</li>
|
|
<li>✅ Added bulk actions section when rows are selected</li>
|
|
<li>✅ Added actions column for row-specific actions</li>
|
|
<li>✅ Implemented action handlers with row data passing</li>
|
|
<li>✅ Added multi-selection support for bulk operations</li>
|
|
<li>✅ Updated Clients component to use table actions</li>
|
|
<li>✅ Updated documentation with action configuration examples</li>
|
|
</ul>
|
|
|
|
<h2>Key Features Implemented</h2>
|
|
|
|
<h3>Global Actions</h3>
|
|
<p>Actions with <code>requiresSelection: false</code> appear above the table:</p>
|
|
<pre><code>{
|
|
label: "Add Client",
|
|
action: () => modalStore.openModal("createClient"),
|
|
icon: "pi pi-plus",
|
|
style: "primary",
|
|
requiresSelection: false
|
|
}</code></pre>
|
|
|
|
<h3>Bulk Actions</h3>
|
|
<p>Actions with <code>requiresMultipleSelection: true</code> appear when rows are selected:</p>
|
|
<pre><code>{
|
|
label: "Export Selected",
|
|
action: (selectedRows) => exportData(selectedRows),
|
|
icon: "pi pi-download",
|
|
style: "success",
|
|
requiresMultipleSelection: true
|
|
}</code></pre>
|
|
|
|
<h3>Row Actions</h3>
|
|
<p>Actions with <code>requiresSelection: true</code> (or omitted) appear in actions column:</p>
|
|
<pre><code>{
|
|
label: "View",
|
|
action: (rowData) => router.push(`/clients/${rowData.id}`),
|
|
icon: "pi pi-eye",
|
|
style: "secondary"
|
|
}</code></pre>
|
|
|
|
<h3>Action Handlers</h3>
|
|
<p>The DataTable automatically passes appropriate data to different action types:</p>
|
|
<pre><code>// 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
|
|
};</code></pre>
|
|
|
|
<h2>Action Types Supported</h2>
|
|
<table border="1" style="border-collapse: collapse; width: 100%;">
|
|
<tr>
|
|
<th>Action Type</th>
|
|
<th>Property</th>
|
|
<th>Data Received</th>
|
|
<th>Display Location</th>
|
|
<th>Enabled When</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Global</td>
|
|
<td>Default (no special props)</td>
|
|
<td>None</td>
|
|
<td>Above table</td>
|
|
<td>Always</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Single Selection</td>
|
|
<td><code>requiresSelection: true</code></td>
|
|
<td>Selected row object</td>
|
|
<td>Above table</td>
|
|
<td>Exactly one row selected</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Row</td>
|
|
<td><code>rowAction: true</code></td>
|
|
<td>Individual row object</td>
|
|
<td>Actions column</td>
|
|
<td>Always (per row)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Bulk</td>
|
|
<td><code>requiresMultipleSelection: true</code></td>
|
|
<td>Array of selected rows</td>
|
|
<td>Above table (when rows selected)</td>
|
|
<td>One or more rows selected</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h2>Usage in Components</h2>
|
|
<p>Components can now pass table actions to DataTable:</p>
|
|
<pre><code><DataTable
|
|
:data="tableData"
|
|
:columns="columns"
|
|
:tableActions="tableActions"
|
|
tableName="clients"
|
|
:lazy="true"
|
|
:totalRecords="totalRecords"
|
|
:loading="isLoading"
|
|
@lazy-load="handleLazyLoad"
|
|
/></code></pre>
|
|
|
|
<h2>Browser Compatibility</h2>
|
|
<p>✅ Vue 3 Composition API compatible<br>
|
|
✅ PrimeVue components integration<br>
|
|
✅ Reactive row data passing<br>
|
|
✅ Error handling for action execution</p>
|
|
</body>
|
|
</html>
|
|
</style> |