feat: support resizing columns

frectonz · Jul 12, 2024 · ec31b40 · ec31b40
1 parent ec6de26
commit ec31b40
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 11 deletions.
diff --git a/ui/src/index.css b/ui/src/index.css
@@ -67,3 +67,32 @@
     @apply bg-background text-foreground font-mono;
   }
 }
+
+.rdg {
+  --rdg-color: hsl(var(--foreground));
+  --rdg-border-color: hsl(var(--border));
+  --rdg-summary-border-color: hsl(var(--border));
+  --rdg-background-color: hsl(var(--primary-background));
+  --rdg-header-background-color: hsl(var(--background));
+  --rdg-header-draggable-background-color: hsl(var(--background));
+  --rdg-row-hover-background-color: hsl(var(--muted));
+  --rdg-row-selected-background-color: hsl(var(--muted));
+  --rdg-row-selected-hover-background-color: hsl(var(--muted));
+  --rdg-checkbox-color: hsl(207deg 100% 29%);
+  --rdg-checkbox-focus-color: hsl(207deg 100% 69%);
+  --rdg-checkbox-disabled-border-color: #ccc;
+  --rdg-checkbox-disabled-background-color: #ddd;
+
+  --rdg-selection-color: hsl(var(--ring));
+  --rdg-font-size: 13px;
+  --rdg-cell-frozen-box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);
+}
+
+.rdg-header-row > .rdg-cell {
+  border: 1px solid hsl(var(--border));
+}
+
+.rdg-cell[aria-selected="true"] {
+  box-shadow: inset 0 0 0 1px var(--rdg-selection-color);
+  outline: 2px solid var(--rdg-selection-color);
+}
diff --git a/ui/src/routes/query.lazy.tsx b/ui/src/routes/query.lazy.tsx
@@ -196,16 +196,19 @@ function Query({ sql, onChange, onSave, onDelete, onUpdate }: QueryProps) {
       </CardHeader>
     </Card>
   ) : (
-    <DataGrid
-      columns={data.columns.map((col) => ({ key: col, name: col }))}
-      rows={data.rows.map((row) =>
-        row.reduce((acc, curr, i) => {
-          acc[data.columns[i]] = curr;
-          return acc;
-        }, {}),
-      )}
-      className={cn(currentTheme === "light" ? "rdg-light" : "rdg-dark")}
-    />
+    <Card className="p-2">
+      <DataGrid
+        defaultColumnOptions={{ resizable: true }}
+        columns={data.columns.map((col) => ({ key: col, name: col }))}
+        rows={data.rows.map((row) =>
+          row.reduce((acc, curr, i) => {
+            acc[data.columns[i]] = curr;
+            return acc;
+          }, {}),
+        )}
+        className={cn(currentTheme === "light" ? "rdg-light" : "rdg-dark")}
+      />
+    </Card>
   );
 
   useEffect(() => {

diff --git a/ui/src/routes/tables.lazy.tsx b/ui/src/routes/tables.lazy.tsx
@@ -149,7 +149,9 @@ function Table({ name }: Props) {
         </Card>
       )}
 
-      <TableData name={data.name} />
+      <Card className="p-2">
+        <TableData name={data.name} />
+      </Card>
     </div>
   );
 }
@@ -221,6 +223,7 @@ function TableData({ name }: TableDataProps) {
       rows={rows}
       columns={columns}
       onScroll={handleScroll}
+      defaultColumnOptions={{ resizable: true }}
       className={cn(currentTheme === "light" ? "rdg-light" : "rdg-dark")}
     />
   );