From 37728d9e05deddaf914286903d58a8a0827b31fe Mon Sep 17 00:00:00 2001
From: phunv <phunv@vaixgroup.com>
Date: Sun, 12 Feb 2023 13:54:13 +0700
Subject: [PATCH] update sort column and paginate for result filter

---
 package.json                                  |  2 ++
 .../QueryResultTable/QueryResultTable.tsx     | 34 +++++++++++++------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 3296fec6..69ad3ab6 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "pg": "8.7.1",
     "plotly.js-basic-dist-min": "1.57.1",
     "react": "16.8.6",
+    "react-data-table-component": "^7.5.3",
     "react-dom": "16.8.6",
     "react-linkify": "^1.0.0-alpha",
     "react-micro-flyout": "1.0.1",
@@ -56,6 +57,7 @@
     "react-select": "~3.0.8",
     "react-splitter-layout": "4.0.0",
     "sqlite3": "^5.0.2",
+    "styled-components": "^5.3.6",
     "td": "0.4.0"
   },
   "devDependencies": {
diff --git a/src/renderer/components/QueryResultTable/QueryResultTable.tsx b/src/renderer/components/QueryResultTable/QueryResultTable.tsx
index dd7d3d11..4e092fc6 100644
--- a/src/renderer/components/QueryResultTable/QueryResultTable.tsx
+++ b/src/renderer/components/QueryResultTable/QueryResultTable.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { QueryType } from "../../../lib/Database/Query";
 import Linkify from "react-linkify";
+import DataTable from "react-data-table-component";
 
 const MAX_DISPLAY_ROWS_COUNT = 1000;
 
@@ -62,17 +63,28 @@ export default class QueryResultTable extends React.Component<Props> {
       return <tr key={`cols-${i}`}>{cols}</tr>;
     });
 
-    return (
-      <div className="QueryResultTable">
-        <table className="QueryResultTable-table">
-          <thead>
-            <tr>{heads}</tr>
-          </thead>
-          <tbody>{rows}</tbody>
-        </table>
-        <div className="QueryResultTable-more" hidden={MAX_DISPLAY_ROWS_COUNT >= query.rows.length}>
-          And more rows ...
-        </div>
+   // Convert column result to datatable
+   const columns: object[] = [];
+   query.fields.forEach((el) => {
+     const item = {
+       name: el,
+       selector: (row) => row[el],
+       sortable: true,
+     };
+     columns.push(item);
+   });
+
+   // Convert column result to datatable
+   const data: object[] = [];
+   query.rows.forEach((el) => {
+     const item = {};
+     query.fields.forEach((key, idx) => (item[key] = el[idx]));
+     data.push(item);
+   });
+
+   return (
+     <div className="QueryResultTable">
+       <DataTable title="Search Results" columns={columns} data={data} pagination />
       </div>
     );
   }