dev/content/Lists: demos clickable prop

xy-planning-network · Apr 19, 2024 · ff2e6ef · ff2e6ef
1 parent 81ec9d1
commit ff2e6ef
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/dev/content/Lists.vue b/dev/content/Lists.vue
@@ -10,6 +10,7 @@ import {
 import type {
   TableColumns,
   TableActions,
+  TableRowData,
   DynamicTableOptions,
 } from "@/composables/table"
 import NeedleTag from "./examples/NeedleTags.vue"
@@ -113,12 +114,17 @@ const dynamicTableActions: TableActions<Conifer> = {
 }
 
 const dynamicTableOptions: DynamicTableOptions = {
+  clickable: true,
   dateSearch: true,
   refreshTrigger: 0,
   search: true,
   url: "https://my-json-server.typicode.com/xy-planning-network/trees/conifers",
 }
 
+const handleDynamicTableOnClick = (e: TableRowData) => {
+  window.alert("You clicked: " + e.name)
+}
+
 const tableCopy = `<DynamicTable :table-columns="tableColumns" :table-options="tableOptions" />`
 const tableProps = [
   { name: "clickable", required: false, type: "boolean" },
@@ -260,6 +266,7 @@ const tableProps = [
               :table-columns="tableColumns"
               :table-options="dynamicTableOptions"
               :table-actions="dynamicTableActions"
+              @click:row="handleDynamicTableOnClick"
             />
             <PropsTable :props="tableProps" />
           </div>