try adding arrow table

This isn't working, running into a weird error:
```
import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";
```
with react-virtualized and vite. See
bvaughn/react-virtualized#1635
bvaughn/react-virtualized#1632
https://github.com/uber/baseweb/issues/4129

Seems like react-virtualized is an inactive project, so
probably should just switch to a more active full featured
table library

package.json

@@ -19,6 +19,7 @@
     "@reduxjs/toolkit": "^1.7.1",
     "@rematch/core": "^2.2.0",
     "@rematch/immer": "^2.1.3",
+    "@types/react-virtualized": "^9.21.16",
     "apache-arrow": "^6.0.1",
     "chakra-react-select": "^1.3.2",
     "compassql": "^0.21.2",
@@ -37,6 +38,7 @@
     "react-instantsearch-dom": "^6.15.0",
     "react-redux": "^7.2.6",
     "react-vega": "^7.4.4",
+    "react-virtualized": "^9.22.3",
     "redux": "^4.1.2",
     "reselect": "^4.1.4",
     "sqlstring": "^2.3.2",

src/features/sqlEditor/components/TableGrid.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { useAppSelector } from "hooks";
+import { ArrowTableGrid } from "./arrow-viewer/ArrowTableGrid";
+
+export const TableGrid = () => {
+  const data = useAppSelector((s) => s.sqlQuery.data);
+  const status = useAppSelector((s) => s.sqlQuery.status);
+  return status == "completed" ? (
+    <ArrowTableGrid table={data} width={300} height={800}></ArrowTableGrid>
+  ) : null;
+};

src/features/sqlEditor/components/arrow-viewer/ArrowTableGrid.tsx

@@ -0,0 +1,101 @@
+// From github.com/cwharris/arrow-viewer
+import {Table as ArrowTable} from "apache-arrow";
+
+import { valueToString } from "utils/arrow-utils"
+
+import { Table, Column, AutoSizer, Index } from "react-virtualized";
+
+import "react-virtualized/styles.css";
+import { defaultRowRenderer, TableCellProps, TableHeaderProps, TableHeaderRowProps, TableRowProps } from "react-virtualized/dist/es/Table";
+
+export function ArrowTableGrid({
+  table,
+  width,
+  height,
+}: {
+  table: ArrowTable;
+  width: number;
+  height: number;
+}): JSX.Element {
+  return (
+    <AutoSizer>
+      {(size) => (
+        <Table
+          {...size}
+          height={height - 10}
+          rowHeight={28}
+          headerHeight={40}
+          rowStyle={rowStyle}
+          rowCount={table.length}
+          rowGetter={({ index }: Index) => table.get(index)}
+          rowRenderer={(props: TableRowProps) => {
+            // console.log(props);
+
+            return defaultRowRenderer({
+              ...props,
+              style: { ...props.style, width: props.style.width - 15 },
+            });
+          }}
+          headerStyle={headerStyle()}
+          headerRowRenderer={({
+            className,
+            columns,
+            style,
+          }: TableHeaderRowProps) => (
+            <div
+              role="row"
+              className={className}
+              style={{ ...style, ...headerStyle(), width: size.width }}
+            >
+              {columns}
+            </div>
+          )}
+        >
+          {table.schema.fields.map((field, idx) => {
+            // console.log(field, idx);
+
+            return (
+              <Column
+                key={idx}
+                width={25}
+                minWidth={25}
+                flexGrow={1}
+                dataKey={idx.toString()}
+                label={`${field.toString()}`}
+                columnData={table.getColumn(field.name).toArray()}
+                cellDataGetter={(props) => {
+                  // console.log(props);
+                  const d = props.rowData[idx];
+                  // console.log(d);
+                  return d;
+                }}
+                cellRenderer={({ cellData }: TableCellProps) =>
+                  valueToString(cellData)
+                }
+                headerRenderer={({
+                  label,
+                }: TableHeaderProps) => label}
+              />
+            );
+          })}
+        </Table>
+      )}
+    </AutoSizer>
+  );
+}
+
+const headerStyle = () =>
+  ({ textAlign: "right", textTransform: "none" } as React.CSSProperties);
+
+const rowStyle = ({ index }: Index) =>
+  index % 2 === 0
+    ? {
+        ...headerStyle(),
+        borderBottom: "1px solid #e0e0e0",
+        backgroundColor: "#fff",
+      }
+    : {
+        ...headerStyle(),
+        borderBottom: "1px solid #e0e0e0",
+        backgroundColor: "#fafafa",
+      };

src/features/workspace/components/Workspace.tsx

@@ -1,6 +1,7 @@
 import { Box, Text } from "@chakra-ui/react";
 import { DataSelector } from "features/selectData/components/DataSelector";
 import { SQLEditor } from "features/sqlEditor/components/SQLEditor";
+import { TableGrid } from "features/sqlEditor/components/TableGrid";
 import {
   IJsonModel,
   Layout,
@@ -22,6 +23,7 @@ const ComponentsMap: Record<string, React.ComponentType<{ node: TabNode }>> = {
   fields: Fields,
   sqlEditor: SQLEditor,
   selectData: DataSelector,
+  tableGrid: TableGrid
 };
 
 export const Workspace = () => {

src/hooks/index.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import type { RootState, Dispatch } from 'store/store'
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch<Dispatch>()
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

src/models/workspace.ts

@@ -42,7 +42,7 @@ const initialModel = {
             type: "tab",
             enableClose: false,
             name: "Table View",
-            component: "button",
+            component: "tableGrid",
           },
         ],
       },

src/utils/arrow-utils.ts

@@ -0,0 +1,22 @@
+// from import { valueToString } from "apache-arrow/util/pretty";
+export function valueToString(x) {
+    if (x === null) {
+        return 'null';
+    }
+    if (x === undefined) {
+        return 'undefined';
+    }
+    switch (typeof x) {
+        case 'number': return `${x}`;
+        case 'bigint': return `${x}`;
+        case 'string': return `"${x}"`;
+    }
+    // If [Symbol.toPrimitive] is implemented (like in BN)
+    // use it instead of JSON.stringify(). This ensures we
+    // print BigInts, Decimals, and Binary in their native
+    // representation
+    if (typeof x[Symbol.toPrimitive] === 'function') {
+        return x[Symbol.toPrimitive]('string');
+    }
+    return ArrayBuffer.isView(x) ? `[${x}]` : JSON.stringify(x);
+}