Merge pull request #11 from weseek/fix/moves-to-the-bottom-when-activ…

…ated-if-there-are-culumns-with-only-number fix: Moves to the bottom when activated if there are culumns with only number
growilabs · Jan 14, 2024 · 26c2bd5 · 26c2bd5
2 parents df93fa0 + 422a37f
commit 26c2bd5
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 8 deletions.
diff --git a/dist/assets/client-entry.9428ab67.js → dist/assets/client-entry.fe3f0772.js b/dist/assets/client-entry.9428ab67.js → dist/assets/client-entry.fe3f0772.js
diff --git a/dist/manifest.json b/dist/manifest.json
@@ -1,6 +1,6 @@
 {
   "client-entry.tsx": {
-    "file": "assets/client-entry.9428ab67.js",
+    "file": "assets/client-entry.fe3f0772.js",
     "src": "client-entry.tsx",
     "isEntry": true,
     "css": [

diff --git a/index.html b/index.html
@@ -4,7 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>growi-plugin-datatables - mock</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
+      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
+      crossorigin="anonymous"
+    />
   </head>
   <body>
     <div id="MockTableForCaclMethod"></div>
@@ -13,5 +18,6 @@
     <script type="module" src="/src/mock/MockTableForCalcMethod.tsx"></script>
     <script type="module" src="/src/mock/MockTable5Lines.tsx"></script>
     <script type="module" src="/src/mock/MockTable50Lines.tsx"></script>
+    <script type="module" src="/src/mock/MockTableIssue9.tsx"></script>
   </body>
 </html>
diff --git a/src/DataTable.tsx b/src/DataTable.tsx
@@ -83,6 +83,9 @@ export const wrapDataTable = (Table: React.FunctionComponent<any>): React.Functi
       calculatedData.forEach(({ row, column, calcResult }) => {
         api.cell({ row, column }).data(calcResult);
       });
+
+      // どこかでソート順序が変わるので明示的に元の順序を設定する(issue#9)
+      (api.order as any).neutral().draw();
     };
 
     const displayEnablingDataTableButton = () => {

diff --git a/src/mock/MockTableIssue9.tsx b/src/mock/MockTableIssue9.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import ReactDOM from 'react-dom/client';
+
+import { wrapDataTable } from '../DataTable';
+
+const tableHTML = (
+  <table className="table table-bordered">
+    <thead>
+      <tr>
+        <th>A</th>
+        <th>B</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>a1</td>
+        <td>ba</td>
+      </tr>
+      <tr>
+        <td>100</td>
+        <td>bb</td>
+      </tr>
+      <tr>
+        <td>a3</td>
+        <td>bc</td>
+      </tr>
+      <tr>
+        <td>99</td>
+        <td>bd</td>
+      </tr>
+      <tr>
+        <td>hoge</td>
+        <td>moge</td>
+      </tr>
+    </tbody>
+  </table>
+);
+const DataTables = wrapDataTable(() => tableHTML);
+
+ReactDOM.createRoot(document.getElementById('MockTableForCaclMethod') as HTMLElement).render(
+  <React.StrictMode>
+    <DataTables />
+  </React.StrictMode>,
+);