add a more robust data table that allows filtering

Author: skhamis

data/aboutsync.css

@@ -119,6 +119,12 @@ html {
   cursor: pointer;
 }
 
+.filterHeader {
+  inline-size: 100%;
+  padding: 4px;
+  font-size: 14px;
+}
+
 /* =============================================================================
   Panel and PanelGroup
 ============================================================================= */

package-lock.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",

package.json

@@ -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">