feat(DataTable): added dynamic sorting, clean up and updated props name

Author: amandacxz

.gitignore

@@ -31,4 +31,4 @@ test/skills/*
 # Oobee a11y scan results
 results/
 a11y-failures.log
-**/.pnpm/*
+**/.pnpm*

package.json

@@ -100,6 +100,7 @@
     "@tailwindcss/cli": "^4.1.18",
     "@tailwindcss/postcss": "^4.1.18",
     "@tailwindcss/vite": "^4.1.18",
+    "@types/jest": "^30.0.0",
     "@types/mocha": "^10.0.6",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",

playground/DataTable.html

@@ -170,6 +170,19 @@ <h3>Basic</h3>
   </sgds-data-table>
 </div>
 
+<!-- No rows -->
+<div class="container">
+  <h3>No rows</h3>
+  <sgds-data-table>
+    <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-row>
+  </sgds-data-table>
+</div>
+
 <!-- Multi-select -->
 <div class="container">
   <h3>Multi-select</h3>
@@ -212,20 +225,20 @@ <h3>Expandable rows</h3>
       <sgds-data-table-head>Username</sgds-data-table-head>
     </sgds-data-table-row>
 
-    <sgds-data-table-row expandable>
+    <sgds-data-table-row expand open>
       <sgds-data-table-cell>1</sgds-data-table-cell>
       <sgds-data-table-cell>John</sgds-data-table-cell>
       <sgds-data-table-cell>Doe</sgds-data-table-cell>
       <sgds-data-table-cell>@johndoe</sgds-data-table-cell>
-      <div slot="expandable-content">Department: Engineering · Join date: 01 Jan 2022 · Status: Active</div>
+      <div slot="content">Department: Engineering · Join date: 01 Jan 2022 · Status: Active</div>
     </sgds-data-table-row>
 
-    <sgds-data-table-row expandable>
+    <sgds-data-table-row expand>
       <sgds-data-table-cell>2</sgds-data-table-cell>
       <sgds-data-table-cell>Jane</sgds-data-table-cell>
       <sgds-data-table-cell>Doe</sgds-data-table-cell>
       <sgds-data-table-cell>@janedoe</sgds-data-table-cell>
-      <div slot="expandable-content">Department: Design · Join date: 15 Mar 2023 · Status: Active</div>
+      <div slot="content">Department: Design · Join date: 15 Mar 2023 · Status: Active</div>
     </sgds-data-table-row>
 
     <sgds-data-table-row>
@@ -248,12 +261,12 @@ <h3>Expandable + Multi-select</h3>
       <sgds-data-table-head>Username</sgds-data-table-head>
     </sgds-data-table-row>
 
-    <sgds-data-table-row id="ems-row-1" expandable>
+    <sgds-data-table-row id="ems-row-1" expand>
       <sgds-data-table-cell>1</sgds-data-table-cell>
       <sgds-data-table-cell>John</sgds-data-table-cell>
       <sgds-data-table-cell>Doe</sgds-data-table-cell>
       <sgds-data-table-cell>@johndoe</sgds-data-table-cell>
-      <div slot="expandable-content">Department: Engineering</div>
+      <div slot="content">Department: Engineering</div>
     </sgds-data-table-row>
 
     <sgds-data-table-row id="ems-row-2">
@@ -327,27 +340,27 @@ <h3>Hide Footer (hideFooter)</h3>
   <h3>Server Mode (mode="server")</h3>
   <sgds-data-table id="server-table" currentPage="1" dataLength="50" itemsPerPage="10" mode="server" isLoading>
     <sgds-data-table-row>
-      <sgds-data-table-head>ID</sgds-data-table-head>
-      <sgds-data-table-head>Name</sgds-data-table-head>
-      <sgds-data-table-head>Region</sgds-data-table-head>
+      <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-row>
   </sgds-data-table>
 </div>
 
-<!-- Header props: sortable, sortKey, width, colspan, rowspan, textAlign -->
+<!-- Header props: sorting, sortKey, width, colspan, rowspan, textAlign -->
 <div class="container">
-  <h3>Header Props (sortable, sortKey, width, colspan, rowspan, textAlign)</h3>
+  <h3>Header Props (sorting, sortKey, width, colspan, rowspan, textAlign)</h3>
   <sgds-data-table currentPage="1" dataLength="4" itemsPerPage="4">
     <sgds-data-table-row>
       <sgds-data-table-head rowspan="2" width="88">ID</sgds-data-table-head>
       <sgds-data-table-head colspan="2">Profile</sgds-data-table-head>
-      <sgds-data-table-head rowspan="2" sortable sortKey="score" width="120" textAlign="right"
+      <sgds-data-table-head rowspan="2" sorting sortKey="score" width="120" textAlign="right"
         >Score</sgds-data-table-head
       >
     </sgds-data-table-row>
     <sgds-data-table-row>
-      <sgds-data-table-head sortable sortKey="name">Name</sgds-data-table-head>
-      <sgds-data-table-head sortable sortKey="role">Role</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-row>
 
     <sgds-data-table-row id="sort-row-1">
@@ -388,7 +401,7 @@ <h3>Header Props (sortable, sortKey, width, colspan, rowspan, textAlign)</h3>
   document.getElementById("ems-row-2").rowData = { id: 2, name: "Jane Doe" };
   document.getElementById("ems-row-3").rowData = { id: 3, name: "Bob Smith" };
 
-  // Set rowData for sortable table head demo (sortKey)
+  // Set rowData for sorting table head demo (sorting)
   document.getElementById("sort-row-1").rowData = { id: 1, name: "Lina", role: "Engineer", score: 82 };
   document.getElementById("sort-row-2").rowData = { id: 2, name: "Adam", role: "Designer", score: 90 };
   document.getElementById("sort-row-3").rowData = { id: 3, name: "Nora", role: "Manager", score: 75 };
@@ -398,20 +411,49 @@ <h3>Header Props (sortable, sortKey, width, colspan, rowspan, textAlign)</h3>
   const serverTable = document.getElementById("server-table");
   const totalRows = 50;
   const regions = ["North", "South", "East", "West", "Central"];
+  const serverSort = { key: "", direction: "none" };
 
-  const mockApi = ({ page, itemsPerPage }) => {
-    const start = (page - 1) * itemsPerPage;
-    const end = Math.min(start + itemsPerPage, totalRows);
+  const compareServerRows = (left, right, key, direction) => {
+    if (direction === "none") return 0;
+
+    const leftValue = left[key];
+    const rightValue = right[key];
 
-    const rows = Array.from({ length: Math.max(0, end - start) }, (_, index) => {
-      const id = start + index + 1;
+    if (leftValue === rightValue) return 0;
+
+    const leftNumber = Number(leftValue);
+    const rightNumber = Number(rightValue);
+    const bothNumeric = Number.isFinite(leftNumber) && Number.isFinite(rightNumber);
+
+    if (bothNumeric) {
+      return direction === "ascending" ? leftNumber - rightNumber : rightNumber - leftNumber;
+    }
+
+    const cmp = String(leftValue).localeCompare(String(rightValue), undefined, {
+      numeric: true,
+      sensitivity: "base"
+    });
+    return direction === "ascending" ? cmp : -cmp;
+  };
+
+  const mockApi = ({ page, itemsPerPage, sortKey, sortDirection }) => {
+    const allRows = Array.from({ length: totalRows }, (_, index) => {
+      const id = index + 1;
       return {
         id,
         name: `Citizen ${id}`,
         region: regions[id % regions.length]
       };
     });
 
+    if (sortKey && sortDirection !== "none") {
+      allRows.sort((left, right) => compareServerRows(left, right, sortKey, sortDirection));
+    }
+
+    const start = (page - 1) * itemsPerPage;
+    const end = Math.min(start + itemsPerPage, totalRows);
+    const rows = allRows.slice(start, end);
+
     return new Promise(resolve => {
       setTimeout(() => {
         resolve({ total: totalRows, rows });
@@ -442,7 +484,12 @@ <h3>Header Props (sortable, sortKey, width, colspan, rowspan, textAlign)</h3>
     serverTable.isLoading = true;
 
     try {
-      const response = await mockApi({ page, itemsPerPage });
+      const response = await mockApi({
+        page,
+        itemsPerPage,
+        sortKey: serverSort.key,
+        sortDirection: serverSort.direction
+      });
       serverTable.dataLength = response.total;
       renderServerRows(response.rows);
     } finally {
@@ -454,5 +501,11 @@ <h3>Header Props (sortable, sortKey, width, colspan, rowspan, textAlign)</h3>
     await loadServerPage(Number(serverTable.currentPage || 1));
   });
 
+  serverTable.addEventListener("sgds-sort", async event => {
+    serverSort.key = event.detail.key;
+    serverSort.direction = event.detail.direction;
+    await loadServerPage(Number(serverTable.currentPage || 1));
+  });
+
   loadServerPage(1);
 </script>