feat: new Data Table Column Sort feature

hperrin · Apr 17, 2021 · c831855 · c831855
1 parent 236f6d2
commit c831855
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -281,7 +281,7 @@ New components from the upstream library to build for SMUI v3:
 - [x] Touch Target Wrappers
 - [x] Data Table Pagination
 - [x] Data Table Progress Indicator
-- [ ] Data Table Column Sort Buttons
+- [x] Data Table Column Sort Buttons
 
 <sub>† This is Sass based, and therefore doesn't require Svelte components. I've included a demo showing how you can use it.</sub>
 

diff --git a/packages/common/CommonLabel.svelte b/packages/common/CommonLabel.svelte
@@ -13,6 +13,8 @@
     'mdc-segmented-button__label': context === 'segmented-button',
     'mdc-data-table__pagination-rows-per-page-label':
       context === 'data-table:pagination',
+    'mdc-data-table__header-cell-label':
+      context === 'data-table:sortable-header-cell',
   })}
   {...context === 'snackbar' ? { 'aria-atomic': 'false' } : {}}
   {tabindex}

diff --git a/packages/data-table/Cell.svelte b/packages/data-table/Cell.svelte
@@ -8,13 +8,33 @@
       'mdc-data-table__header-cell': true,
       'mdc-data-table__header-cell--numeric': numeric,
       'mdc-data-table__header-cell--checkbox': checkbox,
+      'mdc-data-table__header-cell--with-sort': sortable,
+      'mdc-data-table__header-cell--sorted': sortable && $sort === columnId,
       ...internalClasses,
     })}
     on:change={(event) => checkbox && notifyHeaderChange(event)}
     role="columnheader"
     scope="col"
+    data-column-id={columnId}
+    aria-sort={sortable ? ($sort === columnId ? $sortDirection : 'none') : null}
     {...internalAttrs}
-    {...$$restProps}><slot /></th
+    {...$$restProps}
+    >{#if sortable}
+      <div class="mdc-data-table__header-cell-wrapper">
+        <slot />
+        <div
+          class="mdc-data-table__sort-status-label"
+          aria-hidden="true"
+          id="{columnId}-status-label"
+        >
+          {$sort === columnId
+            ? $sortDirection === 'ascending'
+              ? sortAscendingAriaLabel
+              : sortDescendingAriaLabel
+            : ''}
+        </div>
+      </div>
+    {:else}<slot />{/if}</th
   >
 {:else}
   <td
@@ -39,7 +59,7 @@
 </script>
 
 <script>
-  import { onMount, getContext } from 'svelte';
+  import { onMount, getContext, setContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
   import {
     forwardEventsBuilder,
@@ -58,10 +78,25 @@
   export let numeric = false;
   export let checkbox = false;
   export let columnId = header ? 'SMUI-data-table-column-' + counter++ : null;
+  export let sortable = getContext('SMUI:data-table:sortable');
 
   let element;
   let internalClasses = {};
   let internalAttrs = {};
+  let sort = getContext('SMUI:data-table:sort');
+  let sortDirection = getContext('SMUI:data-table:sortDirection');
+  let sortAscendingAriaLabel = getContext(
+    'SMUI:data-table:sortAscendingAriaLabel'
+  );
+  let sortDescendingAriaLabel = getContext(
+    'SMUI:data-table:sortDescendingAriaLabel'
+  );
+
+  if (sortable) {
+    setContext('SMUI:label:context', 'data-table:sortable-header-cell');
+    setContext('SMUI:icon-button:context', 'data-table:sortable-header-cell');
+    setContext('SMUI:icon-button:aria-describedby', columnId + '-status-label');
+  }
 
   onMount(() => {
     const accessor = {

diff --git a/packages/data-table/DataTable.svelte b/packages/data-table/DataTable.svelte
@@ -42,16 +42,15 @@
   </div>
 
   {#if $$slots.progress}
-    <div class="mdc-data-table__progress-indicator">
+    <div
+      class="mdc-data-table__progress-indicator"
+      style={Object.entries(progressIndicatorStyles)
+        .map(([name, value]) => `${name}: ${value};`)
+        .join(' ')}
+    >
+      <div class="mdc-data-table__scrim" />
       <slot name="progress" />
     </div>
-    {#if !$progressClosed}
-      <!--
-        MDC docs put this under mdc-data-table__progress-indicator,
-        but then it doesn't cover the table, so I think it goes here.
-      -->
-      <div class="mdc-data-table__scrim" />
-    {/if}
   {/if}
 
   <slot name="paginate" />
@@ -78,6 +77,11 @@
   let className = '';
   export { className as class };
   export let stickyHeader = false;
+  export let sortable = false;
+  export let sort = null;
+  export let sortDirection = 'ascending';
+  export let sortAscendingAriaLabel = 'sorted, ascending';
+  export let sortDescendingAriaLabel = 'sorted, descending';
   export let container$use = [];
   export let container$class = '';
   export let table$use = [];
@@ -89,14 +93,28 @@
   let header;
   let body;
   let internalClasses = {};
+  let progressIndicatorStyles = {};
   let addLayoutListener = getContext('SMUI:addLayoutListener');
   let removeLayoutListener;
   let postMount = false;
   let progressClosed = writable(false);
+  let sortStore = writable(sort);
+  let sortDirectionStore = writable(sortDirection);
 
   setContext('SMUI:checkbox:context', 'data-table');
   setContext('SMUI:linear-progress:context', 'data-table');
   setContext('SMUI:linear-progress:closed', progressClosed);
+  setContext('SMUI:data-table:sortable', sortable);
+  setContext('SMUI:data-table:sort', sortStore);
+  setContext('SMUI:data-table:sortDirection', sortDirectionStore);
+  setContext('SMUI:data-table:sortAscendingAriaLabel', sortAscendingAriaLabel);
+  setContext(
+    'SMUI:data-table:sortDescendingAriaLabel',
+    sortDescendingAriaLabel
+  );
+
+  $: $sortStore = sort;
+  $: $sortDirectionStore = sortDirection;
 
   if (addLayoutListener) {
     removeLayoutListener = addLayoutListener(layout);
@@ -136,6 +154,8 @@
         header.orderedCells[index].removeClass(className);
       },
       notifySortAction: (data) => {
+        sort = data.columnId;
+        sortDirection = data.sortValue;
         dispatch(getElement(), 'MDCDataTable:sorted', data);
       },
       getTableContainerHeight: () => container.getBoundingClientRect().height,
@@ -148,8 +168,8 @@
         }
         return tableHeader.getBoundingClientRect().height;
       },
-      setProgressIndicatorStyles: (_styles) => {
-        /* Not Implemented. */
+      setProgressIndicatorStyles: (styles) => {
+        progressIndicatorStyles = styles;
       },
       addClassAtRowIndex: (rowIndex, className) => {
         body.orderedRows[rowIndex].addClass(className);
@@ -224,7 +244,7 @@
         }
       },
       setSortStatusLabelByHeaderCellIndex: (_columnIndex, _sortValue) => {
-        /* Not Implemented. */
+        // Handled automatically.
       },
     });
 
@@ -270,7 +290,7 @@
     }
 
     const headerCell = closest(
-      event.target,
+      event.detail.target,
       '.mdc-data-table__header-cell--with-sort'
     );
 

diff --git a/packages/icon-button/IconButton.svelte b/packages/icon-button/IconButton.svelte
@@ -27,6 +27,8 @@
     'mdc-top-app-bar__action-item': context === 'top-app-bar:action',
     'mdc-snackbar__dismiss': context === 'snackbar:actions',
     'mdc-data-table__pagination-button': context === 'data-table:pagination',
+    'mdc-data-table__sort-icon-button':
+      context === 'data-table:sortable-header-cell',
     ...internalClasses,
   })}
   style={Object.entries(internalStyles)
@@ -37,6 +39,7 @@
   aria-label={pressed ? ariaLabelOn : ariaLabelOff}
   data-aria-label-on={ariaLabelOn}
   data-aria-label-off={ariaLabelOff}
+  aria-describedby={ariaDescribedby}
   on:click={() => instance && instance.handleClick()}
   on:click={() =>
     context === 'top-app-bar:navigation' &&
@@ -81,6 +84,7 @@
   let internalStyles = {};
   let internalAttrs = {};
   let context = getContext('SMUI:icon-button:context');
+  let ariaDescribedby = getContext('SMUI:icon-button:aria-describedby');
 
   export let component = href == null ? Button : A;
 

diff --git a/site/src/routes/demo/data-table/_Sortable.svelte b/site/src/routes/demo/data-table/_Sortable.svelte
@@ -0,0 +1,82 @@
+<DataTable
+  sortable
+  bind:sort
+  bind:sortDirection
+  on:MDCDataTable:sorted={handleSort}
+  table$aria-label="User list"
+  style="width: 100%;"
+>
+  <Head>
+    <Row>
+      <!--
+        Note that whatever you supply to "columnId" is
+        appended with "-status-label" and used as an ID
+        for the hidden label that describes the sort
+        status to screen readers.
+
+        You can localize those labels with the
+        "sortAscendingAriaLabel" and
+        "sortDescendingAriaLabel" props on the DataTable.
+      -->
+      <Cell numeric columnId="id">
+        <!-- For numeric columns, icon comes first. -->
+        <IconButton class="material-icons">arrow_upward</IconButton>
+        <Label>ID</Label>
+      </Cell>
+      <Cell columnId="name" style="width: 100%;">
+        <Label>Name</Label>
+        <!-- For non-numeric columns, icon comes second. -->
+        <IconButton class="material-icons">arrow_upward</IconButton>
+      </Cell>
+      <Cell columnId="username">
+        <Label>Username</Label>
+        <IconButton class="material-icons">arrow_upward</IconButton>
+      </Cell>
+      <Cell columnId="email" l>
+        <Label>Email</Label>
+        <IconButton class="material-icons">arrow_upward</IconButton>
+      </Cell>
+      <!-- You can turn off sorting for a column. -->
+      <Cell sortable={false}>Website</Cell>
+    </Row>
+  </Head>
+  <Body>
+    {#each items as item (item.id)}
+      <Row>
+        <Cell numeric>{item.id}</Cell>
+        <Cell>{item.name}</Cell>
+        <Cell>{item.username}</Cell>
+        <Cell>{item.email}</Cell>
+        <Cell>{item.website}</Cell>
+      </Row>
+    {/each}
+  </Body>
+</DataTable>
+
+<script>
+  import DataTable, { Head, Body, Row, Cell, Label } from '@smui/data-table';
+  import IconButton from '@smui/icon-button';
+
+  let items = [];
+  let sort = 'id';
+  let sortDirection = 'ascending';
+
+  if (typeof fetch !== 'undefined') {
+    fetch('https://jsonplaceholder.typicode.com/users')
+      .then((response) => response.json())
+      .then((json) => (items = json));
+  }
+
+  function handleSort() {
+    items.sort((a, b) => {
+      const [aVal, bVal] = [a[sort], b[sort]][
+        sortDirection === 'ascending' ? 'slice' : 'reverse'
+      ]();
+      if (typeof aVal === 'string') {
+        return aVal.localeCompare(bVal);
+      }
+      return aVal - bVal;
+    });
+    items = items;
+  }
+</script>
diff --git a/site/src/routes/demo/data-table/iframe.svelte b/site/src/routes/demo/data-table/iframe.svelte
@@ -1,4 +1,4 @@
-<DataTable table$aria-label="User list" stickyHeader style="width: 100%;">
+<DataTable stickyHeader table$aria-label="User list" style="width: 100%;">
   <Head>
     <Row>
       <Cell numeric>ID</Cell>

diff --git a/site/src/routes/demo/data-table/index.svelte b/site/src/routes/demo/data-table/index.svelte
@@ -32,6 +32,8 @@
   <Demo component={Pagination} file="data-table/_Pagination.svelte">
     Pagination
   </Demo>
+
+  <Demo component={Sortable} file="data-table/_Sortable.svelte">Sortable</Demo>
 </section>
 
 <script>
@@ -41,4 +43,5 @@
   import StickyHeader from './_StickyHeader.svelte';
   import RowSelection from './_RowSelection.svelte';
   import Pagination from './_Pagination.svelte';
+  import Sortable from './_Sortable.svelte';
 </script>