add a more robust data table that allows filtering

mozilla-extensions · Jan 12, 2023 · 2b05171 · 2b05171
1 parent 9fa02e5
commit 2b05171
Show file tree

Hide file tree

Showing 5 changed files with 428 additions and 25 deletions.
diff --git a/data/aboutsync.css b/data/aboutsync.css
@@ -119,6 +119,12 @@ html {
   cursor: pointer;
 }
 
+.filterHeader {
+  inline-size: 100%;
+  padding: 4px;
+  font-size: 14px;
+}
+
 /* =============================================================================
   Panel and PanelGroup
 ============================================================================= */

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,9 +27,12 @@
     ]
   },
   "dependencies": {
+    "@tanstack/react-table": "^8.7.4",
     "classnames": "^2.2.5",
+    "json-stringify-safe": "^5.0.1",
     "prop-types": "^15.6.0",
     "react": "^18.2.0",
+    "react-data-grid": "^7.0.0-beta.20",
     "react-dom": "^18.2.0",
     "react-dom-factories": "^1.0.2",
     "react-inspector": "^6.0.1",

diff --git a/src/CollectionsViewer.jsx b/src/CollectionsViewer.jsx
@@ -14,6 +14,7 @@ const { PlacesSqlView, promiseSql } = require("./PlacesSqlView");
 const { BookmarkValidator } = require("./bookmarkValidator");
 
 const validation = require("./validation");
+const {default: DynamicTableView} = require("./components/DynamicTableView");
 
 const { Weave } = importLocal("resource://services-sync/main.js");
 const { AddonValidator } = importLocal("resource://services-sync/engines/addons.js");
@@ -260,7 +261,7 @@ class CollectionViewer extends React.Component {
         </TabPanel>
 
         <TabPanel name="Records (table)" key="records-table">
-          <TableInspector data={this.state.records}/>
+          <DynamicTableView data={this.state.records} />
         </TabPanel>
 
         <TabPanel name="Records (object)" key="records-object">