@zywave/zui-table 4.0.2-pre.1 → 4.0.2-pre.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zywave/zui-table",
-  "version": "4.0.2-pre.1",
+  "version": "4.0.2-pre.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "UNLICENSED",
@@ -9,7 +9,8 @@
     "build:clean": "node ../../../scripts/node/remove-build-files.mjs && yarn run build",
     "build:scss": "node ../../../scripts/node/sass.mjs",
     "build:ts": "tsc -p tsconfig.build.json",
-    "launch-server:demo": "es-dev-server --root-dir ../../../ --app-index packages/components/zui-table/demo/index.html --open --node-resolve --watch",
+    "launch-server:cem": "es-dev-server --root-dir ../../../ --app-index packages/components/zui-table/docs/customelement-manifest-element.html --open --node-resolve --watch",
+    "launch-server:demo": "es-dev-server --root-dir ../../../ --app-index packages/components/zui-table/docs/demo.html --open --node-resolve --watch",
     "launch-server:lab": "es-dev-server --root-dir ../../../ --app-index packages/components/zui-table/lab.html --open --node-resolve --watch",
     "demo": "npm-run-all build --parallel watcher:start launch-server:demo",
     "watch": "npm-run-all build --parallel watcher:start launch-server:lab",
@@ -21,7 +22,11 @@
   },
   "customElements": "dist/custom-elements.json",
   "dependencies": {
-    "@zywave/zui-base": "^4.1.20-pre.1"
+    "@zywave/zui-base": "^4.1.20-pre.2",
+    "@zywave/zui-icons": "^4.0.26-pre.2"
   },
-  "gitHead": "dd490b9f8950f89af878ff1435f6b1582491ab31"
+  "devDependencies": {
+    "@zywave/zui-button": "^4.0.26-pre.2"
+  },
+  "gitHead": "957ede57ae7125aa5f34137d1dd502260968055b"
 }

package/src/base.ts

@@ -0,0 +1,79 @@
+import { ZuiBaseElement } from '@zywave/zui-base';
+import type { ZuiTableElement } from './zui-table';
+import type { ZuiTableCellElement } from './zui-table-cell';
+
+class TableState {
+  elements: Set<ZuiTableBaseElement> = new Set();
+  root: ZuiTableElement;
+  sortedCell?: ZuiTableCellElement;
+  channel = new EventTarget();
+
+  constructor(root: ZuiTableElement) {
+    this.root = root;
+  }
+}
+
+export abstract class ZuiTableBaseElement extends ZuiBaseElement {
+  /**
+   * This represents a common eventing ecosystem for all ZuiTableBaseElements, regardless of association
+   */
+  protected static _globalChannel = new EventTarget();
+
+  /**
+   * Accessor for the associated table state
+   */
+  protected get _state() {
+    if (this.tagName === 'ZUI-TABLE') {
+      return ZuiTableBaseElement.#states.get(this as unknown as ZuiTableElement);
+    }
+    const table = ZuiTableBaseElement.#tableAssociations.get(this);
+    if (table) {
+      return ZuiTableBaseElement.#states.get(table);
+    }
+    return undefined;
+  }
+
+  static #states = new WeakMap<ZuiTableElement, TableState>();
+  static #tableAssociations = new WeakMap<ZuiTableBaseElement, ZuiTableElement>();
+
+  constructor() {
+    super();
+
+    if (this.tagName === 'ZUI-TABLE') {
+      ZuiTableBaseElement.#states.set(
+        this as unknown as ZuiTableElement,
+        new TableState(this as unknown as ZuiTableElement)
+      );
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    if (this.tagName !== 'ZUI-TABLE') {
+      ZuiTableBaseElement._globalChannel.dispatchEvent(new CustomEvent('connected', { detail: { element: this } }));
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    if (this.tagName === 'ZUI-TABLE') {
+      ZuiTableBaseElement.#states.delete(this as unknown as ZuiTableElement);
+    } else {
+      ZuiTableBaseElement.#tableAssociations.delete(this);
+      this._state?.elements.delete(this);
+    }
+  }
+
+  protected _associateElement(element: ZuiTableBaseElement) {
+    if (this.tagName !== 'ZUI-TABLE' || element.tagName === 'ZUI-TABLE') {
+      return;
+    }
+
+    ZuiTableBaseElement.#tableAssociations.set(element, this as unknown as ZuiTableElement);
+    this._state.elements.add(element);
+  }
+}
+
+export type TableElementConnectedEvent = CustomEvent<{ element: ZuiTableBaseElement }>;

package/src/css/zui-table.fouc.scss

@@ -5,20 +5,11 @@ zui-table {
   @include undefined-element {
     display: block;
     width: 100%;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
     border-collapse: collapse;
     border-spacing: 0;
 
-    [slot='topbar'] {
-      display: flex;
-      min-height: rem(60);
-      align-items: center;
-      padding: rem(10) rem(20);
-      background-color: var(--zui-gray-25);
-    }
-
-    [slot='footer'] {
-      margin-top: rem(10);
+    @media (min-width: $bp-xs) {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
     }
 
     [slot='no-results-message'] {
@@ -44,6 +35,12 @@ zui-table[no-results] {
     [slot='no-results-message'] {
       display: block;
       padding: rem(12) rem(20);
+      background-color: #fff;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
+
+      @media (min-width: $bp-xs) {
+        box-shadow: none;
+      }
     }
   }
 }
@@ -53,24 +50,98 @@ zui-table-topbar {
     display: flex;
     width: 100%;
     min-height: rem(60);
+    flex-wrap: wrap;
     align-items: center;
-    padding: rem(10) rem(20);
-    background-color: var(--zui-gray-25);
+    // padding-bottom: rem(10);
+
+    @media (min-width: $bp-xs) {
+      flex-wrap: nowrap;
+      padding: rem(10) rem(20);
+      background-color: var(--zui-gray-25);
+    }
+
+    *:not([slot='action']):not([slot='counter']) {
+      margin-bottom: rem(20);
+
+      @media (min-width: $bp-xs) {
+        margin-bottom: 0;
+      }
+    }
+
+    zui-search {
+      --zui-search-border-color: var(--zui-gray-50);
+      flex: 1;
+      flex-basis: 100%;
+      order: 1;
+
+      @media (min-width: $bp-xxs) {
+        flex-basis: auto;
+        order: 0;
+      }
+
+      @media (min-width: $bp-xs) {
+        flex: 0;
+        margin-right: auto;
+      }
+    }
 
     [slot='counter'] {
+      display: flex;
+      width: 100%;
       flex-shrink: 0;
-      margin-left: auto;
+      justify-content: flex-end;
+      order: 2;
+      margin-bottom: rem(10);
       padding-left: rem(10);
       font-size: rem(12);
       color: var(--zui-gray-400);
+
+      @media (min-width: $bp-xs) {
+        width: auto;
+        margin-bottom: 0;
+      }
     }
 
     [slot='action'] {
-      margin-left: rem(10);
+      width: 100%;
+      margin-bottom: rem(20);
 
-      zui-button:not(:first-of-type) {
+      @media (min-width: $bp-xxs) {
+        width: auto;
         margin-left: rem(10);
       }
+
+      @media (min-width: $bp-xs) {
+        margin-bottom: 0;
+      }
+
+      &:first-of-type {
+        margin-bottom: 0;
+
+        @media (min-width: $bp-xxs) {
+          margin-bottom: rem(20);
+          margin-left: rem(20);
+        }
+
+        @media (min-width: $bp-xs) {
+          margin-bottom: 0;
+          margin-left: rem(10);
+        }
+      }
+
+      &:last-of-type {
+        margin-bottom: rem(20);
+
+        @media (min-width: $bp-xs) {
+          margin-bottom: 0;
+        }
+      }
+
+      + [slot='action'] {
+        @media (max-width: $bp-xxs) {
+          margin-top: rem(10);
+        }
+      }
     }
   }
 }
@@ -81,10 +152,12 @@ zui-table-row {
     grid-template-columns: auto;
     padding: rem(10) 0;
     background-color: #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
 
     @media (min-width: $bp-xs) {
       display: flex;
       padding: 0;
+      box-shadow: none;
     }
   }
 }
@@ -108,7 +181,7 @@ zui-table-row[header] {
 
 zui-table-row:not([header]) {
   @include undefined-element {
-    border-bottom: 3px solid var(--zui-gray-100);
+    border-bottom: 2px solid var(--zui-gray-100);
 
     @media (min-width: $bp-xs) {
       border-bottom-width: 1px;

package/src/zui-table-cell-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 
-export const style = css`:host{contain:none}:host([action]) div{display:flex}@media(min-width: 45em){:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;align-items:center}}:host([action]) ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){div{padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}div.header{float:left;width:33.333%;font-weight:600}div.header+div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem 0.3125rem 0)}`;
+export const style = css`:host{--zui-table-cell-sort-active-color: var(--zui-blue);--zui-table-cell-sort-color: var(--zui-gray-300);contain:none;overflow-wrap:break-word}:host([action]) div{display:flex}@media(min-width: 45em){:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;align-items:center}}:host([action]) ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}:host([sort=ascending]) zui-icon{--zui-icon-sort-ascending-color: var(--zui-table-cell-sort-active-color)}:host([sort=descending]) zui-icon{--zui-icon-sort-descending-color: var(--zui-table-cell-sort-active-color)}div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){div{padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}div.header{float:left;width:33.333%;font-weight:600}div.header+div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem 0.3125rem 0)}zui-icon{--zui-icon-size: 1.125rem;vertical-align:middle;margin-left:.625rem;fill:var(--zui-table-cell-sort-color)}.is-selectable{cursor:pointer}`;

package/src/zui-table-cell.scss

@@ -2,7 +2,10 @@
 @use '@zywave/zui-base-styles/src/variables' as *;
 
 :host {
+  --zui-table-cell-sort-active-color: var(--zui-blue);
+  --zui-table-cell-sort-color: var(--zui-gray-300);
   contain: none;
+  overflow-wrap: break-word;
 }
 
 :host([action]) {
@@ -19,6 +22,18 @@
   }
 }
 
+:host([sort='ascending']) {
+  zui-icon {
+    --zui-icon-sort-ascending-color: var(--zui-table-cell-sort-active-color);
+  }
+}
+
+:host([sort='descending']) {
+  zui-icon {
+    --zui-icon-sort-descending-color: var(--zui-table-cell-sort-active-color);
+  }
+}
+
 div {
   padding: var(--zui-table-cell-padding, #{rem(5)} #{rem(15)});
 
@@ -36,3 +51,14 @@ div.header {
     padding: var(--zui-table-cell-padding, #{rem(5)} #{rem(15)} #{rem(5)} 0);
   }
 }
+
+zui-icon {
+  --zui-icon-size: #{rem(18)};
+  vertical-align: middle;
+  margin-left: rem(10);
+  fill: var(--zui-table-cell-sort-color);
+}
+
+.is-selectable {
+  cursor: pointer;
+}

package/src/zui-table-cell.ts

@@ -1,33 +1,111 @@
-import { ZuiBaseElement } from '@zywave/zui-base';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { ZuiTableBaseElement } from './base.js';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { style } from './zui-table-cell-css.js';
 
 /**
+ * An individual table cell to be passed into a `<zui-table-row>`.
+ *
  * @element zui-table-cell
  *
- * @slot - Default slot; table cell content goes here
+ * @slot - Unnamed slot, table cell content goes here
  *
  * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding
+ * @cssprop [--zui-table-cell-sort-color=var(--zui-gray-300)] - ([sortable]): Default color of chevron when `direction` is `null`
+ * @cssprop [--zui-table-cell-sort-active-color=var(--zui-blue)] - Highlight color used to indicate the active sort direction
+ *
+ * @event sort - Event fires when a `sortable` cell is clicked
  */
-export class ZuiTableCellElement extends ZuiBaseElement {
+export class ZuiTableCellElement extends ZuiTableBaseElement {
   /**
    * Set to decrease table cell padding to accommodate action button(s)
    */
   @property({ type: Boolean, reflect: true })
   action = false;
 
+  /**
+   * Current sort direction of the sortable cell
+   * @type {null | "ascending" | "descending"}
+   */
+  @property({ type: String, reflect: true })
+  get sort(): ZuiTableSortDirection {
+    return this.#sort;
+  }
+
+  set sort(val: ZuiTableSortDirection) {
+    const acceptableVals = ['ascending', 'descending', null];
+    if (acceptableVals.includes(val)) {
+      const oldVal = this.#sort;
+      this.#sort = val;
+      this.requestUpdate('sort', oldVal);
+      this._state?.channel.dispatchEvent(new CustomEvent('sort', { detail: { sort: val, cell: this } }));
+    }
+  }
+
+  /**
+   * (`zui-table-row[header]`): Whether or not cell header is sortable; another requirement is the parent element, `<zui-table-cell header>` must have `header` attribute or property set
+   */
+  @property({ type: Boolean, reflect: true })
+  get sortable() {
+    return this._isAllowedSort && this.#sortable;
+  }
+
+  set sortable(val: boolean) {
+    const oldVal = this.#sortable;
+    this.#sortable = val;
+    this.requestUpdate('sortable', oldVal);
+  }
+
+  /**
+   * This private field is needed to persist state between the cell and the header row. DO NOT USE EXTERNALLY
+   */
+  @state()
+  private _isAllowedSort = false;
+
+  #sort: ZuiTableSortDirection = null;
+  #sortable = false;
+
   static get styles() {
     return [super.styles, style];
   }
 
   render() {
-    return html`<div><slot></slot></div>`;
+    const styles = { 'is-selectable': this.sortable };
+    return html`<div @click="${this.#onSortableClick}" class="${classMap(styles)}">
+      <slot></slot>
+      ${this.sortable ? html`<zui-icon icon="zui-sort"></zui-icon>` : nothing}
+    </div>`;
+  }
+
+  click() {
+    super.click();
+
+    this.#onSortableClick();
+  }
+
+  #onSortableClick() {
+    if (this.sortable) {
+      switch (this.sort) {
+        case 'ascending':
+          this.sort = 'descending';
+          break;
+        case 'descending':
+          this.sort = null;
+          break;
+        case null:
+        default:
+          this.sort = 'ascending';
+          break;
+      }
+    }
   }
 }
 
 window.customElements.define('zui-table-cell', ZuiTableCellElement);
 
+export type ZuiTableSortDirection = null | 'ascending' | 'descending';
+
 declare global {
   interface HTMLElementTagNameMap {
     'zui-table-cell': ZuiTableCellElement;

package/src/zui-table-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 
-export const style = css`:host{contain:none;display:block}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:transparent;box-shadow:none}}::slotted(zui-table-row:not([header])){border-bottom:3px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{display:flex;width:100%;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.29);border-collapse:collapse;border-spacing:0}@media(min-width: 45em){.table{background-color:#fff}}`;
+export const style = css`:host{contain:none;display:block}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:transparent;box-shadow:none}}::slotted(zui-table-row:not([header])){border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{display:flex;width:100%;flex-direction:column;border-collapse:collapse;border-spacing:0}@media(min-width: 45em){.table{background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}}`;

package/src/zui-table-footer.ts

@@ -1,15 +1,17 @@
-import { ZuiBaseElement } from '@zywave/zui-base';
+import { ZuiTableBaseElement } from './base.js';
 import { html } from 'lit';
 import { style } from './zui-table-footer-css.js';
 
 /**
+ * Footer table element, should come as the last item passed into a `<zui-table>`.
+ *
  * @element zui-table-footer
  *
- * @slot - Default slot; table footer content goes here
+ * @slot - Unnamed slot, table footer content goes here
  *
- * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table
+ * @cssprop [--zui-table-footer-margin=0.625rem (10px)] - Override the margin between the table and footer of the table
  */
-export class ZuiTableFooterElement extends ZuiBaseElement {
+export class ZuiTableFooterElement extends ZuiTableBaseElement {
   static get styles() {
     return [super.styles, style];
   }

package/src/zui-table-row-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 
-export const style = css`:host{contain:none}:host(:last-of-type:not([summary])) div,:host([summary]) div{margin-bottom:0}:host([header]){display:none;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}@media(min-width: 45em){:host([header]){display:block}}div{display:grid;grid-template-columns:auto;margin-bottom:0;padding:.625rem 0;background-color:#fff}@media(min-width: 45em){div{grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));padding:0;background-color:transparent}}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) div{margin-bottom:0;background-color:transparent}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;
+export const style = css`:host{contain:none}:host(:last-of-type:not([summary])) div,:host([summary]) div{margin-bottom:0}:host([header]){display:none;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}@media(min-width: 45em){:host([header]){display:block}}:host([header]) div{box-shadow:none}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600;user-select:none}div{display:grid;grid-template-columns:auto;margin-bottom:0;padding:.625rem 0;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){div{grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));padding:0;background-color:transparent;box-shadow:none}}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) div{margin-bottom:0;background-color:transparent}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;

package/src/zui-table-row.scss

@@ -17,13 +17,18 @@
   background-color: #fff;
   border-bottom: 1px solid var(--zui-gray-200);
 
+  @media (min-width: $bp-xs) {
+    display: block;
+  }
+
+  div {
+    box-shadow: none;
+  }
+
   ::slotted(zui-table-cell) {
     --zui-table-cell-padding: #{rem(8.5)} #{rem(20)};
     font-weight: 600;
-  }
-
-  @media (min-width: $bp-xs) {
-    display: block;
+    user-select: none;
   }
 }
 
@@ -33,11 +38,13 @@ div {
   margin-bottom: 0;
   padding: rem(10) 0;
   background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
 
   @media (min-width: $bp-xs) {
     grid-template-columns: var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));
     padding: 0;
     background-color: transparent;
+    box-shadow: none;
   }
 }
 

package/src/zui-table-row.ts

@@ -1,19 +1,21 @@
-import { ZuiBaseElement } from '@zywave/zui-base';
+import { ZuiTableBaseElement } from './base.js';
 import { html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { style } from './zui-table-row-css.js';
 import type { ZuiTableCellElement } from './zui-table-cell.js';
 
 /**
+ * Pass into `<zui-table>`, `<zui-table-row>` holds a row of `<zui-table-cell>`'s.
+ *
  * @element zui-table-row
  *
- * @slot - Default slot; `<zui-table-cell>`s are declared here
+ * @slot - Unnamed slot, `<zui-table-cell>`s are declared here
  *
- * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns} for more information on valid values.
+ * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.
  * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color
  * @cssprop [--zui-table-summary-text-color=#fff] - Override the table summary text color
  */
-export class ZuiTableRowElement extends ZuiBaseElement {
+export class ZuiTableRowElement extends ZuiTableBaseElement {
   /**
    * Declare a table header; typically the first row in `<zui-table>`
    */
@@ -29,6 +31,8 @@ export class ZuiTableRowElement extends ZuiBaseElement {
   @queryAssignedElements({ selector: 'zui-table-cell' })
   private _slottedCells: Array<ZuiTableCellElement>;
 
+  #sortLock?: boolean;
+
   static get styles() {
     return [super.styles, style];
   }
@@ -39,27 +43,63 @@ export class ZuiTableRowElement extends ZuiBaseElement {
   }
 
   firstUpdated() {
-    this.#setCellsRole();
+    if (this.header) {
+      const firstCellWithDirection = this._slottedCells?.find((cell) => cell?.hasAttribute('sort'));
+      this._slottedCells.forEach((cell) => {
+        if (cell.sort && cell !== firstCellWithDirection) {
+          cell.sort = null;
+        }
+      });
+    }
+  }
+
+  updated(changedProperties: Map<string | number | symbol, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('header')) {
+      this.#ensureCellState();
+      if (this.header) {
+        this._state?.channel.addEventListener('sort', (e: CustomEvent<{ cell: HTMLElement }>) => this.#onTableSort(e));
+      }
+    }
   }
 
   render() {
     return html`<div>
-      <slot @slotchange="${this.#setCellsRole()}"></slot>
+      <slot @slotchange="${this.#ensureCellState()}"></slot>
     </div>`;
   }
 
-  #setCellsRole() {
+  #onTableSort(event: CustomEvent<{ cell: HTMLElement }>) {
+    if (this.#sortLock) {
+      return;
+    }
+    this.#sortLock = true;
+    this._slottedCells?.forEach((cell) => {
+      if (cell !== event.detail.cell) {
+        cell.sort = null;
+      }
+    });
+    setTimeout(() => {
+      this.#sortLock = false;
+    }, 0);
+  }
+
+  #ensureCellState() {
     if (!this._slottedCells) {
       return;
     }
 
     if (this.header) {
-      this._slottedCells.map((cell) => cell.setAttribute('role', 'columnheader'));
+      this._slottedCells.forEach((cell) => {
+        cell.setAttribute('role', 'columnheader');
+        (cell as any)._isAllowedSort = true;
+      });
     } else {
-      this._slottedCells.map((cell) => cell.setAttribute('role', 'cell'));
+      this._slottedCells.forEach((cell) => {
+        cell.setAttribute('role', 'cell');
+        (cell as any)._isAllowedSort = false;
+      });
     }
-
-    this.requestUpdate();
   }
 }
 

package/src/zui-table-topbar-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 
-export const style = css`:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){.topbar{box-shadow:none}}.content{display:flex;flex:1;align-items:center}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50)}.counter{flex-shrink:0;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}.action{margin-left:.625rem}.action ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}slot[name=action]{display:flex}`;
+export const style = css`:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;justify-content:space-between;align-items:center}@media(min-width: 45em){.topbar{flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:none}}.content{display:flex;flex:1;align-items:center;order:1;margin-bottom:1.25rem}@media(min-width: 30em){.content{flex:auto;order:0}}@media(min-width: 45em){.content{margin-bottom:0}}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50);width:100%}@media(min-width: 45em){.content ::slotted(zui-search){width:auto}}.counter{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){.counter{width:auto;margin-bottom:0}}.action{display:flex;width:100%;justify-content:flex-end;margin-bottom:1.25rem}@media(min-width: 30em){.action{width:auto}}@media(min-width: 45em){.action{margin-bottom:0}}.action slot[name=action]{display:flex;width:100%;flex-direction:column}@media(min-width: 30em){.action slot[name=action]{flex-direction:row}}.action ::slotted(zui-button){width:100%}@media(min-width: 30em){.action ::slotted(zui-button){width:auto}}@media(min-width: 30em){.action ::slotted(zui-button:first-of-type){margin-left:1.25rem}}@media(min-width: 45em){.action ::slotted(zui-button:first-of-type){margin-left:.625rem}}.action ::slotted(zui-button:not(:first-of-type)){margin-top:.625rem}@media(min-width: 30em){.action ::slotted(zui-button:not(:first-of-type)){margin-top:0;margin-left:.625rem}}`;