feat: add table

packages/react-native-opentui/index.tsx

@@ -8,7 +8,14 @@ export function View({ children, style }: ViewProps) {
     ? style.backgroundColor
     : undefined
     : undefined;
-  return <box backgroundColor={bg}>{children}</box>
+  const flexDirection = style &&
+    'flexDirection' in style
+    ? typeof style.flexDirection == 'string'
+    ? style.flexDirection
+    : undefined
+    : undefined;
+
+  return <box backgroundColor={bg} flexDirection={flexDirection}>{children}</box>
 
 }
 

packages/shared/src/queries.ts

@@ -12,9 +12,9 @@ export const queries = {
       .one();
   }),
   allTransactions: syncedQueryWithContext('allTransactions', z.tuple([]), (authData: AuthData | null) => {
-    isLoggedIn(authData);
+    // isLoggedIn(authData);
     return builder.transaction
-      .where('user_id', '=', authData.user.id)
+      // .where('user_id', '=', authData.user.id)
       .orderBy('datetime', 'desc')
       .limit(50)
   }),

packages/ui/package.json

@@ -7,8 +7,8 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "react-native-opentui": "workspace:*",
+    "@money/shared": "workspace:*",
-    "@money/shared": "workspace:*"
+    "react-native-opentui": "workspace:*"
   },
   "packageManager": "pnpm@10.18.2"
 }

packages/ui/src/index.tsx

@@ -1,15 +1,29 @@
-import { Text } from "react-native";
+import { Table, type Column } from "./table";
-import { List } from "./list";
 import { useQuery } from "@rocicorp/zero/react";
 import { queries } from '@money/shared';
 
-export function Settings() {
-  const [items] = useQuery(queries.getItems(null));
 
-  return <List
+export type Account = {
-    items={items}
+  name: string;
-    renderItem={({ item, isSelected }) => <Text style={{ color: isSelected ? 'white' : 'black' }}>{item.name}</Text>}
+  createdAt: number;
+}
+
+const COLUMNS: Column[] = [
+  { name: 'createdAt', label: 'Created At', render: (n) => new Date(n).toDateString() },
+  { name: 'amount', label: 'Amount' },
+  { name: 'name', label: 'Name' },
+];
+
+
+export function Settings() {
+  const [items] = useQuery(queries.allTransactions(null));
+
+  return (
+    <Table
+      data={items}
+      columns={COLUMNS}
     />
+  )
 }
 
 

packages/ui/src/table.tsx

@@ -0,0 +1,113 @@
+import { createContext, use, useState, type ReactNode } from "react";
+import { View, Text } from "react-native";
+import { useKeyboard } from "./useKeyboard";
+
+const HEADER_COLOR = '#7158e2';
+const TABLE_COLORS = [
+  '#3c3c3c',
+  '#4b4b4b'
+];
+const SELECTED_COLOR = '#f7b730';
+
+
+const EXTRA = 5;
+
+export type ValidRecord = Record<string, string | number | null>;
+
+const TableContext = createContext<{ data: unknown[], columns: Column[], columnMap: Map<string, number> }>({
+  data: [],
+  columns: [],
+  columnMap: new Map(),
+}); 
+
+export type Column = { name: string, label: string, render?: (i: number | string) => string };
+
+
+
+function renderCell(row: ValidRecord, column: Column): string {
+  const cell = row[column.name];
+  if (cell == undefined) return 'n/a';
+  if (cell == null) return 'null';
+  if (column.render) return column.render(cell);
+  return cell.toString();
+}
+
+
+export interface TableProps<T> {
+  data: T[];
+  columns: Column[];
+};
+export function Table<T extends ValidRecord>({ data, columns }: TableProps<T>) {
+  const [idx, setIdx] = useState(0);
+  const [selectedFrom, setSelectedFrom] = useState<number>();
+
+  useKeyboard((key) => {
+    if (key.name == 'j' || key.name == 'down') {
+      if (key.shift && selectedFrom == undefined) {
+        setSelectedFrom(idx);
+      }
+      setIdx((prev) => Math.min(prev + 1, data.length - 1));
+    } else if (key.name == 'k' || key.name == 'up') {
+      if (key.shift && selectedFrom == undefined) {
+        setSelectedFrom(idx);
+      }
+      setIdx((prev) => Math.max(prev - 1, 0));
+    } else if (key.name == 'g' && key.shift) {
+      setIdx(data.length - 1);
+    } else if (key.name == 'v') {
+      setSelectedFrom(idx);
+    } else if (key.name == 'escape') {
+      setSelectedFrom(undefined);
+    }
+  }, [data, idx]);
+
+
+  const columnMap = new Map(columns.map(col => {
+    return [col.name, Math.max(col.label.length, ...data.map(row => renderCell(row, col).length))]
+  }));
+
+
+  return (
+    <TableContext.Provider value={{ data, columns, columnMap }}>
+      <View>
+        <View style={{ backgroundColor: HEADER_COLOR, flexDirection: 'row' }}>
+          {columns.map(column => <Text key={column.name} style={{ fontFamily: 'mono', color: 'white' }}>{rpad(column.label, columnMap.get(column.name)! - column.label.length + EXTRA)}</Text>)}
+        </View>
+        {data.map((row, index) => {
+          const isSelected = index == idx || (selectedFrom != undefined && ((selectedFrom <= index && index <= idx) || (idx <= index && index <= selectedFrom)))
+
+          return (
+            <View key={index} style={{ backgroundColor: isSelected ? SELECTED_COLOR : TABLE_COLORS[index % 2] }}>
+              <TableRow key={index} row={row} index={index} isSelected={isSelected} />
+            </View>
+          );
+        })}
+      </View>
+    </TableContext.Provider>
+  );
+}
+
+interface RowProps<T> {
+  row: T;
+  index: number;
+  isSelected: boolean;
+}
+function TableRow<T extends ValidRecord>({ row, isSelected }: RowProps<T>) {
+  const { data, columns, columnMap } = use(TableContext);
+
+
+  return <View style={{ flexDirection: 'row' }}>
+    {columns.map(column => {
+      const rendered = renderCell(row, column);
+      return <Text key={column.name} style={{ fontFamily: 'mono', color: isSelected ? 'black' : 'white' }}>{rpad(rendered, columnMap.get(column.name)! - rendered.length + EXTRA)}</Text>;
+    })}
+  </View>
+}
+
+function rpad(input: string, length: number): string {
+  return input + Array.from({ length })
+    .map(_ => " ")
+    .join("");
+}
+
+

packages/ui/src/useKeyboard.web.ts

@@ -3,12 +3,19 @@ import type { KeyboardEvent } from "react";
 import type { KeyEvent } from "@opentui/core";
 
 
+function convertName(keyName: string): string {
+  const result = keyName.toLowerCase()
+  if (result == 'arrowdown') return 'down';
+  if (result == 'arrowup') return 'up';
+  return result;
+}
+
 export function useKeyboard(handler: (key: KeyEvent) => void, deps: any[] = []) {
   useEffect(() => {
     const handlerWeb = (event: KeyboardEvent) => {
       // @ts-ignore
       handler({
-        name: event.key.toLowerCase(),
+        name: convertName(event.key),
         ctrl: event.ctrlKey,
         meta: event.metaKey,
         shift: event.shiftKey,
@@ -29,7 +36,10 @@ export function useKeyboard(handler: (key: KeyEvent) => void, deps: any[] = [])
 
     // @ts-ignore
     window.addEventListener("keydown", handlerWeb);
+    return () => {
+      console.log("REMOVING");
     // @ts-ignore
-    return () => window.removeEventListener("keydown", handlerWeb);
+window.removeEventListener("keydown", handlerWeb);
+    };
   }, deps);
 }

pnpm-lock.yaml

@@ -8065,7 +8065,6 @@ snapshots:
       - graphql
       - supports-color
       - utf-8-validate
-    optional: true
 
   '@expo/code-signing-certificates@0.0.5':
     dependencies:
@@ -8132,7 +8131,6 @@ snapshots:
     optionalDependencies:
       react: 19.2.0
       react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0)
-    optional: true
 
   '@expo/env@2.0.7':
     dependencies:
@@ -8211,7 +8209,7 @@ snapshots:
       postcss: 8.4.49
       resolve-from: 5.0.0
     optionalDependencies:
-      expo: 54.0.23(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.14)(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo: 54.0.23(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.14)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0))(react@19.2.0)
     transitivePeerDependencies:
       - bufferutil
       - supports-color
@@ -8290,7 +8288,7 @@ snapshots:
       '@expo/json-file': 10.0.7
       '@react-native/normalize-colors': 0.81.5
       debug: 4.4.3
-      expo: 54.0.23(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.14)(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo: 54.0.23(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.14)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0))(react@19.2.0)
       resolve-from: 5.0.0
       semver: 7.7.3
       xml2js: 0.6.0
@@ -8318,7 +8316,6 @@ snapshots:
       expo-font: 14.0.9(expo@54.0.23)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0))(react@19.2.0)
       react: 19.2.0
       react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0)
-    optional: true
 
   '@expo/ws-tunnel@1.0.6': {}
 
@@ -10247,7 +10244,6 @@ snapshots:
       react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0)
     optionalDependencies:
       '@types/react': 19.1.17
-    optional: true
 
   '@react-navigation/bottom-tabs@7.8.4(@react-navigation/native@7.1.19(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.6.2(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
     dependencies:
@@ -11107,7 +11103,7 @@ snapshots:
       resolve-from: 5.0.0
     optionalDependencies:
       '@babel/runtime': 7.28.4
-      expo: 54.0.23(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.14)(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo: 54.0.23(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.14)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0))(react@19.2.0)
     transitivePeerDependencies:
       - '@babel/core'
       - supports-color
@@ -12091,7 +12087,6 @@ snapshots:
       react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0)
     transitivePeerDependencies:
       - supports-color
-    optional: true
 
   expo-constants@18.0.10(expo@54.0.23)(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0)):
     dependencies:
@@ -12110,7 +12105,6 @@ snapshots:
       react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0)
     transitivePeerDependencies:
       - supports-color
-    optional: true
 
   expo-crypto@15.0.7(expo@54.0.23):
     dependencies:
@@ -12126,7 +12120,6 @@ snapshots:
     dependencies:
       expo: 54.0.23(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.14)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0))(react@19.2.0)
       react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0)
-    optional: true
 
   expo-font@14.0.9(expo@54.0.23)(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
     dependencies:
@@ -12141,7 +12134,6 @@ snapshots:
       fontfaceobserver: 2.3.0
       react: 19.2.0
       react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0)
-    optional: true
 
   expo-haptics@15.0.7(expo@54.0.23):
     dependencies:
@@ -12164,7 +12156,6 @@ snapshots:
     dependencies:
       expo: 54.0.23(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.14)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0))(react@19.2.0)
       react: 19.2.0
-    optional: true
 
   expo-linking@8.0.8(expo@54.0.23)(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
     dependencies:
@@ -12206,7 +12197,6 @@ snapshots:
       invariant: 2.2.4
       react: 19.2.0
       react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0)
-    optional: true
 
   expo-router@6.0.14(@expo/metro-runtime@6.1.2)(@types/react@19.1.17)(expo-constants@18.0.10)(expo-linking@8.0.8)(expo@54.0.23)(react-dom@19.1.0(react@19.1.0))(react-native-gesture-handler@2.28.0(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-reanimated@4.1.3(@babel/core@7.28.5)(react-native-worklets@0.5.1(@babel/core@7.28.5)(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.6.2(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-web@0.21.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
     dependencies:
@@ -12422,7 +12412,6 @@ snapshots:
       - graphql
       - supports-color
       - utf-8-validate
-    optional: true
 
   exponential-backoff@3.1.3: {}
 
@@ -14511,7 +14500,6 @@ snapshots:
       - bufferutil
       - supports-color
       - utf-8-validate
-    optional: true
 
   react-reconciler@0.32.0(react@19.1.0):
     dependencies:
@@ -14579,8 +14567,7 @@ snapshots:
 
   react@19.1.0: {}
 
-  react@19.2.0:
+  react@19.2.0: {}
-    optional: true
 
   readable-stream@3.6.2:
     dependencies: