editable column

src/components/DataTable/DataTable.svelte

@@ -20,7 +20,7 @@
   export let loading = false;
   export let hideProgress = false;
   export let wrapperClasses = "rounded elevation-3 relative";
-  export let editable = false;
+  export let editable = true;
   export let paginatorProps = {
     color: "gray",
     text: true,
@@ -95,6 +95,10 @@
       &:hover {
         @apply bg-gray-50;
       }
+
+      &.selected {
+        @apply bg-primary-50;
+      }
     }
   }
 </style>
@@ -135,18 +139,34 @@
     <tbody>
       {#each sorted as item, j}
         <slot name="item">
-          <tr on:click={(e) => {
-            editing = { [j]: (e.path.find(a => a.localName === 'td') || {}).cellIndex }
-          }}> 
+          <tr
+            on:click={(e) => {
+            if (!editable) return;
+              editing = { [j]: (e.path.find(a => a.localName === 'td') || {}).cellIndex }
+            }}
+            class:selected={editing[j]}
+          > 
             {#each columns as column, i}
-              <td class="relative {column.class}">
-                {#if editing[j] === i}
+              <td
+                class="relative {column.class}"
+                class:cursor-pointer={editable && column.editable !== false}
+              >
+                {#if editable && column.editable !== false && editing[j] === i}
                   <slot name="edit-dialog">
-                    <div class="absolute left-0 top-0">
+                    <div class="absolute left-0 top-0 z-10 bg-white p-2 elevation-3 rounded" style="width: 300px">
                       <TextField
                         value={item[column.field]}
+                        textarea={column.textarea}
                         on:change
-                        on:blur={() => editing = false}
+                        remove="bg-gray-100 bg-gray-300"
+                        on:blur={({ target }) => {
+                          editing = false;
+                          dispatch('update', {
+                            item,
+                            column,
+                            value: target.value
+                          });
+                        }}
                       />
                     </div>
                   </slot>

src/components/TextField/TextField.svelte

@@ -139,6 +139,7 @@
         class={inputClasses}
         on:focus={toggleFocused}
         on:blur={toggleFocused}
+        on:blur
         bind:value
         on:change
         on:input
@@ -154,6 +155,7 @@
         on:input
         on:click
         on:focus
+        on:blur
         bind:value
         on:focus={toggleFocused}
         on:blur={toggleFocused}
@@ -165,6 +167,7 @@
         on:change
         on:input
         on:click
+        on:blur
         on:focus>
         {value}
       </div>

src/routes/_layout.svelte

@@ -62,8 +62,7 @@
 
 {#if $bp}
   <main
-    class="container relative p-8 lg:max-w-3xl lg:ml-64 mx-auto mb-10 mt-24
-    md:ml-56 md:max-w-md md:px-3"
+    class="container relative p-8 lg:max-w-3xl lg:ml-64 mx-auto mb-10 mt-24 md:ml-56 md:max-w-md md:px-3"
     transition:fade={{ duration: 300 }}>
     <NavigationDrawer
       bind:showDesktop={$showNav}

src/routes/components/data-tables.svelte

@@ -22,16 +22,25 @@
 <DataTable
   {data}
   {loading}
+  on:update={({ detail }) => {
+    const { column, item, value } = detail;
+
+    const index = data.findIndex(i => i.id === item.id);
+
+    data[index][column.field] = value;
+  }}
   columns={[
     { label: "ID", field: "id", class: "w-10", },
     {
       label: "Season/Episode",
       value: (v) => `S${v.season}E${v.number}`,
-      class: "w-10"
+      class: "w-10",
+      editable: false,
     },
     { field: "name", class: "w-10" },
     {
       field: "summary",
+      textarea: true,
       value: v => v && v.summary ? v.summary : "",
       class: "text-sm text-gray-700 caption w-full" },
     {
@@ -41,6 +50,7 @@
         : "",
       class: "w-48",
       sortable: false,
+      editable: false,
     }
   ]}
 />