@@ -557,6 +586,8 @@ export function DatabaseTableView({ instanceDatabaseMap, databaseName, tableName
filtersToggled={filtersToggled}
columns={dataTableColumns}
columnVisibility={columnVisibility}
+ columnSizing={columnSizing}
+ setColumnSizing={setColumnSizing}
onRowClick={onRowClick}
onColumnClick={onColumnClick}
totalPages={totalPages}
@@ -579,8 +610,12 @@ export function DatabaseTableView({ instanceDatabaseMap, databaseName, tableName
setIsModalOpen={setIsEditModalOpen}
isModalOpen={isEditModalOpen}
primaryKey={primaryKey}
+ missingPrimaryKey={missingPrimaryKey}
+ recordUnavailable={recordUnavailable}
syntheticAttributes={syntheticAttributes}
- data={searchByIdData?.data}
+ data={missingPrimaryKey || recordUnavailable
+ ? (clickedRow ? [clickedRow] : undefined)
+ : searchByIdData?.data}
onSaveChanges={onRecordUpdate}
onDeleteRecord={onDeleteRecord}
isUpdateTableRecordsPending={isUpdateTableRecordsPending}
diff --git a/src/features/instance/databases/components/TableView.test.tsx b/src/features/instance/databases/components/TableView.test.tsx
index 8d3714043..5be3e5682 100644
--- a/src/features/instance/databases/components/TableView.test.tsx
+++ b/src/features/instance/databases/components/TableView.test.tsx
@@ -1,8 +1,9 @@
/**
* @vitest-environment jsdom
*/
-import { ColumnDef, VisibilityState } from '@tanstack/react-table';
+import { ColumnDef, ColumnSizingState, VisibilityState } from '@tanstack/react-table';
import { cleanup, render, screen } from '@testing-library/react';
+import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { afterEach, beforeAll, describe, expect, it } from 'vitest';
import { z } from 'zod';
@@ -31,12 +32,15 @@ const data: Record
[] = [{ id: 'abc-123', type: 'demo' }];
function Harness({ columnVisibility }: { columnVisibility: VisibilityState }) {
const columnFiltersForm = useForm>({ defaultValues: {} });
+ const [columnSizing, setColumnSizing] = useState({});
return (
, unknown>
applyFilters={() => undefined}
columnFiltersForm={columnFiltersForm}
columns={columns}
columnVisibility={columnVisibility}
+ columnSizing={columnSizing}
+ setColumnSizing={setColumnSizing}
data={data}
pageIndex={0}
pageSize={20}
@@ -66,3 +70,13 @@ describe('TableView column visibility', () => {
expect(screen.getByText('demo')).toBeTruthy();
});
});
+
+describe('TableView column resizing', () => {
+ it('renders a resize handle for each column header', () => {
+ // Regression: the handle used to be gated on columnDef.enableResizing (never set), so it
+ // never rendered. It is now gated on getCanResize(), driven by the table-level flag.
+ const { container } = render();
+ const handles = container.querySelectorAll('svg.lucide-grip-vertical');
+ expect(handles.length).toBe(columns.length);
+ });
+});
diff --git a/src/features/instance/databases/components/TableView.tsx b/src/features/instance/databases/components/TableView.tsx
index 330884d9b..5e0e71dd3 100644
--- a/src/features/instance/databases/components/TableView.tsx
+++ b/src/features/instance/databases/components/TableView.tsx
@@ -1,14 +1,24 @@
'use client';
import { LoadingSubtle } from '@/components/LoadingSubtle';
-import { Table, TableBody, TableCell, TableHeader, TableHeadSortable, TableRow } from '@/components/ui/table';
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableHeadSortable,
+ TableRow,
+} from '@/components/ui/table';
import { cn } from '@/lib/cn';
import {
Cell,
ColumnDef,
+ ColumnSizingState,
flexRender,
getCoreRowModel,
getPaginationRowModel,
+ OnChangeFn,
Row,
useReactTable,
VisibilityState,
@@ -24,6 +34,8 @@ interface BrowseDataTableProps {
columnFiltersForm: UseFormReturn>;
columns: ColumnDef[];
columnVisibility: VisibilityState;
+ columnSizing: ColumnSizingState;
+ setColumnSizing: OnChangeFn;
data?: TData[];
isFetching?: boolean;
onColumnClick?: (accessorKey: string, isDescending: boolean) => void;
@@ -48,6 +60,8 @@ export function TableView({
columnFiltersForm,
columns,
columnVisibility,
+ columnSizing,
+ setColumnSizing,
data,
isFetching,
onColumnClick,
@@ -72,63 +86,106 @@ export function TableView({
manualPagination: true,
enableColumnResizing: true,
columnResizeMode: 'onEnd',
+ onColumnSizingChange: setColumnSizing,
pageCount: totalPages,
defaultColumn: {
- minSize: 1,
+ // Wide enough that the header title + sort/resize controls never collide when shrinking.
+ minSize: 80,
},
state: {
columnVisibility,
+ columnSizing,
},
rowCount: totalRecords,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
});
+ // During a column resize, preview where the new right edge will land with a full-height guide line.
+ // columnResizeMode is 'onEnd', so the column width doesn't change until release -- the guide is the
+ // live feedback. Its x is the sum of column widths up to the resizing one, plus the (clamped) drag delta.
+ const columnSizingInfo = table.getState().columnSizingInfo;
+ const resizingColumnId = columnSizingInfo.isResizingColumn;
+ let resizeGuideLeft: number | null = null;
+ if (resizingColumnId) {
+ const minSize = table.options.defaultColumn?.minSize ?? 20;
+ const startSize = table.getColumn(resizingColumnId)?.getSize() ?? 0;
+ let edge = 0;
+ for (const leafColumn of table.getVisibleLeafColumns()) {
+ edge += leafColumn.getSize();
+ if (leafColumn.id === resizingColumnId) {
+ break;
+ }
+ }
+ // Clamp to match the handle's own preview: the column can't shrink below minSize.
+ resizeGuideLeft = edge + Math.max(columnSizingInfo.deltaOffset ?? 0, minSize - startSize);
+ }
+
return (
<>
-
-
- {table.getHeaderGroups().map((headerGroup) => (
-
- {headerGroup.headers.map((header) => (
-
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => (
+
+ ))}
+ {/* Filler column: takes the remaining width so real columns stay tight. */}
+
- ))}
-
- ))}
-
- {filtersToggled && (
-
+ ))}
+
+ {filtersToggled && (
+
+ )}
+
+ {table.getRowModel().rows?.length
+ ? (table.getRowModel().rows.map((row) => (
+
+ )))
+ : (
+
+
+ {isFetching || data === undefined
+ ?
+ : No results.}
+
+
+ )}
+
+
+ {resizeGuideLeft !== null && (
+
)}
-
- {table.getRowModel().rows?.length
- ? (table.getRowModel().rows.map((row) => (
-
- )))
- : (
-
-
- {isFetching || data === undefined
- ?
- : No results.}
-
-
- )}
-
-
+