chore(DataTable): update icon, sorting handling and test cases

Author: amandacxz

docs/INSTALLATION.md

@@ -57,7 +57,7 @@ This method registers all SGDS elements up front in the Custom Elements Registry
 <link href='https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.24.0/css/sgds.css' rel='stylesheet' type='text/css' />
 
 // it is recommended to load a particular version when using cdn e.g. https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@1.0.2
-<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.24.0" async crossorigin="anonymous" integrity="sha384-+jElDijCtwY8fqtpigO4xW9MKHg6c9eL1PaH1F12llVCcmKup3bKYjfPCFq01VxD"></script>
+<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.24.0" async crossorigin="anonymous" integrity="sha384-zhdJP6tQnIxGkXmydDp615RiWzR+OaE6QI0xm++AXMr7e2h3xdfnamHxjMkbhPbe"></script>
 
 //or load a single component e.g. Masthead
 <script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.24.0/components/Masthead/index.umd.min.js" async crossorigin="anonymous" integrity="sha384-vvllpLfJY3jG+vowUWZOJHnvtDTTdaSUOYGbiozHEq4+HESmYu0i/b2r616QoDly"></script>

playground/DataTable.html

@@ -3,6 +3,17 @@
 <link href="../src/themes/night.css" rel="stylesheet" type="text/css" />
 <link href="../src/css/sgds.css" rel="stylesheet" type="text/css" />
 <style>
+  body {
+    background: var(--sgds-bg-default);
+    color: var(--sgds-color-default);
+  }
+
+  .theme-toggle {
+    max-width: 1200px;
+    margin: 18px auto 0 auto;
+    padding: 0 18px;
+  }
+
   .container {
     max-width: 1200px;
     margin: 0 auto 36px auto;
@@ -19,15 +30,19 @@
   }
 </style>
 
+<div class="theme-toggle">
+  <sgds-switch id="night-mode-toggle">Night mode</sgds-switch>
+</div>
+
 <!-- Basic table -->
 <div class="container">
   <h3>Basic</h3>
   <sgds-data-table currentPage="10" dataLength="23" itemsPerPage="5">
     <sgds-data-table-row>
       <sgds-data-table-head>#</sgds-data-table-head>
       <sgds-data-table-head>First name</sgds-data-table-head>
-      <sgds-data-table-head>Last name</sgds-data-table-head>
-      <sgds-data-table-head>Username</sgds-data-table-head>
+      <sgds-data-table-head sorting>Last name</sgds-data-table-head>
+      <sgds-data-table-head sorting>Username</sgds-data-table-head>
     </sgds-data-table-row>
     <sgds-data-table-row>
       <sgds-data-table-cell>1</sgds-data-table-cell>
@@ -373,7 +388,7 @@ <h3>Server Mode (mode="server")</h3>
     <sgds-data-table-row>
       <sgds-data-table-head sorting sortKey="id">ID</sgds-data-table-head>
       <sgds-data-table-head sorting sortKey="name">Name</sgds-data-table-head>
-      <sgds-data-table-head sorting sortKey="region">Region</sgds-data-table-head>
+      <sgds-data-table-head>Region</sgds-data-table-head>
     </sgds-data-table-row>
   </sgds-data-table>
 </div>
@@ -385,7 +400,7 @@ <h3>Header and Cell Props (sorting, sortKey, width)</h3>
     <sgds-data-table-row>
       <sgds-data-table-head width="88">ID</sgds-data-table-head>
       <sgds-data-table-head sorting sortKey="name">Name</sgds-data-table-head>
-      <sgds-data-table-head sorting sortKey="role">Role</sgds-data-table-head>
+      <sgds-data-table-head>Role</sgds-data-table-head>
       <sgds-data-table-head sorting sortKey="score" width="120" textAlign="right">Score</sgds-data-table-head>
     </sgds-data-table-row>
 
@@ -410,6 +425,39 @@ <h3>Header and Cell Props (sorting, sortKey, width)</h3>
   </sgds-data-table>
 </div>
 
+<!-- Default sort -->
+<div class="container">
+  <h3>Default Sort</h3>
+  <sgds-data-table currentPage="1" dataLength="4" itemsPerPage="4">
+    <sgds-data-table-row>
+      <sgds-data-table-head sorting sortKey="id">ID</sgds-data-table-head>
+      <sgds-data-table-head sorting sortKey="name" ariasort="ascending">Name</sgds-data-table-head>
+      <sgds-data-table-head>Role</sgds-data-table-head>
+    </sgds-data-table-row>
+
+    <sgds-data-table-row id="default-sort-row-1">
+      <sgds-data-table-cell>2</sgds-data-table-cell>
+      <sgds-data-table-cell>Alice</sgds-data-table-cell>
+      <sgds-data-table-cell>Engineer</sgds-data-table-cell>
+    </sgds-data-table-row>
+    <sgds-data-table-row id="default-sort-row-2">
+      <sgds-data-table-cell>4</sgds-data-table-cell>
+      <sgds-data-table-cell>Ben</sgds-data-table-cell>
+      <sgds-data-table-cell>Analyst</sgds-data-table-cell>
+    </sgds-data-table-row>
+    <sgds-data-table-row id="default-sort-row-3">
+      <sgds-data-table-cell>1</sgds-data-table-cell>
+      <sgds-data-table-cell>Chloe</sgds-data-table-cell>
+      <sgds-data-table-cell>Manager</sgds-data-table-cell>
+    </sgds-data-table-row>
+    <sgds-data-table-row id="default-sort-row-4">
+      <sgds-data-table-cell>3</sgds-data-table-cell>
+      <sgds-data-table-cell>Darren</sgds-data-table-cell>
+      <sgds-data-table-cell>Designer</sgds-data-table-cell>
+    </sgds-data-table-row>
+  </sgds-data-table>
+</div>
+
 <!-- Row colspan example (5 data rows, 5 columns) -->
 <div class="container">
   <h3>Row Colspan Example (5 data rows, 5 columns)</h3>
@@ -463,6 +511,13 @@ <h3>Row Colspan Example (5 data rows, 5 columns)</h3>
 </div>
 
 <script type="module">
+  const nightModeToggle = document.getElementById("night-mode-toggle");
+
+  nightModeToggle?.addEventListener("sgds-change", event => {
+    const isNight = event.target?.checked === true;
+    document.documentElement.classList.toggle("sgds-night-theme", isNight);
+  });
+
   // Set rowData on multi-select rows
   document.getElementById("ms-row-1").rowData = { id: 1, name: "John Doe" };
   document.getElementById("ms-row-2").rowData = { id: 2, name: "Jane Doe" };
@@ -478,6 +533,12 @@ <h3>Row Colspan Example (5 data rows, 5 columns)</h3>
   document.getElementById("sort-row-2").rowData = { id: 2, name: "Adam", role: "Engineer", score: 82 };
   document.getElementById("sort-row-3").rowData = { id: 3, name: "Nora", role: "Manager", score: 75 };
 
+  // Set rowData for default sort sample
+  document.getElementById("default-sort-row-1").rowData = { id: 2, name: "Alice", role: "Engineer" };
+  document.getElementById("default-sort-row-2").rowData = { id: 4, name: "Ben", role: "Analyst" };
+  document.getElementById("default-sort-row-3").rowData = { id: 1, name: "Chloe", role: "Manager" };
+  document.getElementById("default-sort-row-4").rowData = { id: 3, name: "Darren", role: "Designer" };
+
   // Mock API-driven pagination demo for server mode table
   const serverTable = document.getElementById("server-table");
   const totalRows = 50;

rollup.test.config.js

@@ -10,10 +10,11 @@ import * as fs from "fs";
 function getFilesInDirectorySync(directoryPath) {
   try {
     const files = fs.readdirSync(directoryPath);
+    const supportedTestExtensions = new Set([".js", ".ts"]);
     const result = files.map(file => {
       const filePath = path.join(directoryPath, file);
       const stats = fs.statSync(filePath);
-      if (stats.isFile()) {
+      if (stats.isFile() && supportedTestExtensions.has(path.extname(filePath))) {
         return filePath;
       }
     });

skills/sgds-components/reference/data-table.md

@@ -24,17 +24,21 @@ It supports client-side pagination, server-driven pagination, sorting headers, r
 - Data from API with backend sorting: set `serverSort` and listen to `sgds-sort`.
 - Need loading indicator while fetching server data: set `isLoading` to `true`.
 - Need numeric columns aligned right: set `textAlign="right"` on the corresponding `sgds-data-table-head`.
+- Need only selected columns to sort: set `sorting` only on those headers.
+- Need default sort indicator on first render: set `ariasort` on a sortable header.
 
 ```html
 <sgds-data-table dataLength="3" itemsPerPage="5" currentPage="1">
   <sgds-data-table-row>
     <sgds-data-table-head sorting sortKey="id">ID</sgds-data-table-head>
-    <sgds-data-table-head sorting sortKey="name">Name</sgds-data-table-head>
+    <sgds-data-table-head sorting sortKey="name" ariasort="ascending">Name</sgds-data-table-head>
+    <sgds-data-table-head>Role</sgds-data-table-head>
     <sgds-data-table-head textAlign="right">Amount</sgds-data-table-head>
   </sgds-data-table-row>
   <sgds-data-table-row>
     <sgds-data-table-cell>1</sgds-data-table-cell>
     <sgds-data-table-cell>Amy</sgds-data-table-cell>
+    <sgds-data-table-cell>Analyst</sgds-data-table-cell>
     <sgds-data-table-cell>125.00</sgds-data-table-cell>
   </sgds-data-table-row>
 </sgds-data-table>
@@ -94,6 +98,12 @@ It supports client-side pagination, server-driven pagination, sorting headers, r
 | `sgds-hide` | Expandable row starts closing |
 | `sgds-after-hide` | Expandable row finishes closing |
 
+## Sorting Behavior Notes
+
+- In client mode, sorting affects only currently visible rows.
+- When a sort cycles back to `none`, row order reverts to the initial slotted order captured at first non-server load.
+- Sort controls are disabled when there are no body rows.
+
 ## Server Mode Example
 
 ```html

src/components/DataTable/data-table.css

@@ -86,35 +86,63 @@ th {
   gap: var(--sgds-gap-2-xs);
 }
 
-.data-table-head.align-right {
-  justify-content: flex-end;
-  text-align: right;
-}
-
-.data-table-cell.align-right {
-  justify-content: flex-end;
-  text-align: right;
+.sort {
+  display: inline-flex;
+  align-items: center;
 }
 
-.sort {
-  width: var(--sgds-dimension-24);
-  height: var(--sgds-dimension-24);
-  display: flex;
-  flex-direction: column;
+.sort-button {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: var(--sgds-dimension-24);
+  height: var(--sgds-dimension-24);
+  padding: 0;
+  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);
+  border-radius: var(--sgds-form-border-radius-md);
+  background-color: var(--sgds-bg-transparent);
+  color: var(--sgds-color-subtle);
+  cursor: pointer;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 }
 
-.sort :first-child {
-  margin-bottom: calc(-1 * var(--sgds-margin-xs));
+.sort-button:hover {
+  background-color: var(--sgds-bg-translucent-subtle);
+  color: var(--sgds-color-default);
+}
+
+.sort-button:focus,
+.sort-button:focus-visible {
+  background-color: var(--sgds-bg-translucent-subtle);
+  border-color: transparent;
+  outline: var(--sgds-outline-focus);
+  outline-offset: var(--sgds-outline-offset-focus);
 }
 
-.sort .sort-icon {
+.sort-button:disabled {
+  background-color: var(--sgds-bg-transparent);
   color: var(--sgds-color-muted);
+  cursor: not-allowed;
 }
 
-.sort .active.sort-icon {
-  color: var(--sgds-color-default);
+.sort-button.active {
+  background-color: var(--sgds-primary-surface-translucent);
+  color: var(--sgds-primary-color-default);
+}
+
+.sort-icon {
+  display: inline-flex;
+}
+
+.data-table-head.align-right {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.data-table-cell.align-right {
+  justify-content: flex-end;
+  text-align: right;
 }
 
 /* control cell variants — applied as classes on the host */

src/components/DataTable/sgds-data-table-head.ts

@@ -25,7 +25,7 @@ export class SgdsDataTableHead extends SgdsElement {
   @property({ type: String, reflect: true }) ariasort: "ascending" | "descending" | "none" | "other" | undefined;
 
   /** When true, clicking this header cycles through ascending → descending → none sort. */
-  @property({ type: Boolean, reflect: true }) sorting = true;
+  @property({ type: Boolean, reflect: true }) sorting = false;
 
   /** Column key emitted in the row's internal sort payload, used to identify which column to sort. */
   @property({ type: String, reflect: true }) sortKey = "";

src/components/DataTable/sgds-data-table-row.ts

@@ -55,6 +55,8 @@ export class SgdsDataTableRow extends SgdsElement {
 
   /** @internal — per-column alignment injected by `sgds-data-table` from header cells. */
   @property({ attribute: false }) columnAlignments: Array<"left" | "right"> = [];
+  /** @internal — set by `sgds-data-table` to indicate whether body rows exist. */
+  @property({ type: Boolean }) hasDataRows = false;
 
   /** @internal */
   @query(".expandable-body") private _expandableBody!: HTMLElement;
@@ -182,18 +184,20 @@ export class SgdsDataTableRow extends SgdsElement {
         <div class="data-table-head ${el.textAlign === "right" ? "align-right" : "align-left"}">
           ${children}
           ${el.sorting
-            ? html`<div class="sort">
-                <sgds-icon
-                  class="sort-icon ${el.ariasort === "ascending" ? "active" : ""}"
-                  name="chevron-up"
-                  size="sm"
-                ></sgds-icon>
-                <sgds-icon
-                  class="sort-icon ${el.ariasort === "descending" ? "active" : ""}"
-                  name="chevron-down"
-                  size="sm"
-                ></sgds-icon>
-              </div>`
+            ? html`
+                <button
+                  type="button"
+                  class="sort-button ${el.ariasort === "none" ? "" : "active"}"
+                  aria-label=${el.ariasort === "descending" ? "Sort descending" : "Sort ascending"}
+                  ?disabled=${!this.hasDataRows}
+                >
+                  <sgds-icon
+                    class="sort-icon"
+                    name=${el.ariasort === "descending" ? "sort-descending" : "sort-ascending"}
+                    size="sm"
+                  ></sgds-icon>
+                </button>
+              `
             : nothing}
         </div>
       </th>`;
@@ -244,9 +248,10 @@ export class SgdsDataTableRow extends SgdsElement {
   render() {
     const cells = this._assignedCells ?? [];
     const totalCols = cells.length + (this.showCheckbox ? 1 : 0) + (this.expand || this.showExpandPlaceholder ? 1 : 0);
+    const rowPart = this._isHeaderRow ? "row row-header" : "row row-body";
 
     return html`
-      <tr ?data-header-row=${this._isHeaderRow} class=${this.open ? "active" : ""}>
+      <tr part=${rowPart} ?data-header-row=${this._isHeaderRow} class=${this.open ? "active" : ""}>
         ${this._renderHiddenSlotCell()}
         ${this.expand
           ? this._renderExpandCell()