feat: add row click event for data table

hperrin · Nov 15, 2021 · cf3ebb2 · cf3ebb2
1 parent 018556a
commit cf3ebb2
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/packages/data-table/DataTable.svelte b/packages/data-table/DataTable.svelte
@@ -16,6 +16,7 @@
   on:SMUIDataTableHeaderCheckbox:change={() =>
     instance && instance.handleHeaderRowCheckboxChange()}
   on:SMUIDataTableHeader:click={handleHeaderRowClick}
+  on:SMUIDataTableRow:click={handleRowClick}
   on:SMUIDataTableBodyCheckbox:change={(event) =>
     instance && instance.handleRowCheckboxChange(event)}
   {...exclude($$restProps, ['container$', 'table$'])}
@@ -242,6 +243,9 @@
         setHeaderRowCheckboxIndeterminate(false);
         dispatch(getElement(), 'MDCDataTable:unselectedAll');
       },
+      notifyRowClick: (detail) => {
+        dispatch(getElement(), 'MDCDataTable:rowClick', detail);
+      },
       registerHeaderRowCheckbox: () => {
         // Handled automatically.
       },
@@ -323,6 +327,23 @@
     }
   }
 
+  function handleRowClick(
+    event: CustomEvent<{ rowId: string; target: HTMLElement }>
+  ) {
+    if (!instance || !event.detail.target) {
+      return;
+    }
+
+    const row = closest(
+      event.detail.target as Element,
+      '.mdc-data-table__row'
+    ) as HTMLTableRowElement;
+
+    if (row && instance) {
+      instance.handleRowClick({ rowId: event.detail.rowId, row });
+    }
+  }
+
   function handleSortAction(headerCell: HTMLTableCellElement) {
     const orderedCells = header?.orderedCells ?? [];
 

diff --git a/packages/data-table/Row.svelte b/packages/data-table/Row.svelte
@@ -9,7 +9,8 @@
     'mdc-data-table__row--selected': !header && checkbox && checkbox.checked,
     ...internalClasses,
   })}
-  on:click={(event) => header && notifyHeaderClick(event)}
+  on:click={(event) =>
+    header ? notifyHeaderClick(event) : notifyRowClick(event)}
   on:SMUICheckbox:mount={(event) => (checkbox = event.detail)}
   on:SMUICheckbox:unmount={() => (checkbox = undefined)}
   aria-selected={checkbox ? (checkbox.checked ? 'true' : 'false') : undefined}
@@ -125,6 +126,13 @@
     dispatch(getElement(), 'SMUIDataTableHeader:click', event);
   }
 
+  function notifyRowClick(event: MouseEvent) {
+    dispatch(getElement(), 'SMUIDataTableRow:click', {
+      rowId,
+      target: event.target,
+    });
+  }
+
   export function getElement() {
     return element;
   }

diff --git a/packages/data-table/ambient.d.ts b/packages/data-table/ambient.d.ts
@@ -34,6 +34,9 @@ declare namespace svelte.JSX {
     ['onSMUIDataTableHeader:click']?: (
       event: CustomEvent<any> & { target: T }
     ) => any;
+    ['onSMUIDataTableRow:click']?: (
+      event: CustomEvent<any> & { target: T }
+    ) => any;
     ['onSMUIDataTableHeaderCheckbox:change']?: (
       event: CustomEvent<any> & { target: T }
     ) => any;