feat: Simple column hiding and showing

https://harperdb.atlassian.net/browse/STUDIO-451

Author: dawsontoth

src/components/ui/dropdownMenu.tsx

@@ -80,7 +80,11 @@ function DropdownMenuCheckboxItem({
 		<DropdownMenuPrimitive.CheckboxItem
 			data-slot="dropdown-menu-checkbox-item"
 			className={cn(
-				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"focus:bg-primary relative flex cursor-pointer items-center gap-2 rounded-sm" +
+				" py-1.5 pr-2 pl-8" +
+				" text-sm outline-hidden" +
+				" select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50" +
+				" [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className
 			)}
 			checked={checked}

src/features/instance/databases/DatabaseTableView.tsx

@@ -1,10 +1,12 @@
 import { ConfirmDeletionModal } from '@/components/ConfirmDeletionModal';
 import { Button } from '@/components/ui/button';
 import { useInstanceClientIdParams } from '@/config/useInstanceClient';
+import { PickColumnsDropdown } from '@/features/instance/databases/components/PickColumnsDropdown';
 import { TableView } from '@/features/instance/databases/components/TableView';
 import { formatBrowseDataTableHeader } from '@/features/instance/databases/functions/formatBrowseDataTableHeader';
 import { AddTableRowModal } from '@/features/instance/databases/modals/AddTableRowModal';
 import { EditTableRowModal } from '@/features/instance/databases/modals/EditTableRowModal';
+import { ImportCSVModal } from '@/features/instance/databases/modals/ImportCSVModal';
 import { useDeleteTableMutation } from '@/features/instance/operations/mutations/deleteTable';
 import { useDeleteTableRecords } from '@/features/instance/operations/mutations/deleteTableRecords';
 import { useInsertTableRecords } from '@/features/instance/operations/mutations/insertTableRecords';
@@ -15,14 +17,14 @@ import { getSearchByValueOptions } from '@/features/instance/operations/queries/
 import { useEffectedState } from '@/hooks/useEffectedState';
 import { useInstanceBrowseManagePermission, useInstanceSchemaTablePermission } from '@/hooks/usePermissions';
 import { useRefreshClick } from '@/hooks/useRefreshClick';
+import { useSessionStorage } from '@/hooks/useSessionStorage';
 import { queryClient } from '@/react-query/queryClient';
 import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { useNavigate, useParams } from '@tanstack/react-router';
-import { Row } from '@tanstack/react-table';
+import { Row, VisibilityState } from '@tanstack/react-table';
 import { ImportIcon, PlusIcon, RefreshCwIcon, Trash } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { toast } from 'sonner';
-import { ImportCSVModal } from '@/features/instance/databases/modals/ImportCSVModal';
 
 export function DatabaseTableView() {
 	const allParams: {
@@ -225,6 +227,11 @@ export function DatabaseTableView() {
 		}
 	}, [databaseName, onDeleteTable, tableName]);
 
+	const [columnVisibility, setColumnVisibility] = useSessionStorage(
+		`ColumnDisplayed/${databaseName}}/${tableName}` as 'ColumnDisplayed/{database}/{table}',
+		{} satisfies VisibilityState,
+	);
+
 	return (
 		<>
 			<div className="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-3 pt-15 pb-4">
@@ -260,7 +267,12 @@ export function DatabaseTableView() {
 					</Button>
 				</div>
 
-				<div>
+				<div className="flex space-x-2">
+					<PickColumnsDropdown
+						columns={dataTableColumns}
+						columnVisibility={columnVisibility}
+						setColumnVisibility={setColumnVisibility}
+					/>
 					{canManageBrowseInstance && (
 						<Button variant="destructiveOutline" onClick={openDeleteModal}>
 							<Trash className="inline-block " />
@@ -274,6 +286,7 @@ export function DatabaseTableView() {
 				data={tableData?.data || []}
 				isFetching={tableDataFetching}
 				columns={dataTableColumns}
+				columnVisibility={columnVisibility}
 				onRowClick={onRowClick}
 				onColumnClick={onColumnClick}
 				totalPages={totalPages}

src/features/instance/databases/components/PickColumnsDropdown.tsx

@@ -0,0 +1,73 @@
+import { Button } from '@/components/ui/button';
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+} from '@/components/ui/dropdownMenu';
+import { formatBrowseDataTableHeader } from '@/features/instance/databases/functions/formatBrowseDataTableHeader';
+import { useToggleCallback } from '@/hooks/useToggleCallback';
+import { excludeFalsy } from '@/lib/arrays/excludeFalsy';
+import { notYetImplemented } from '@/lib/notYetImplemented';
+import { VisibilityState } from '@tanstack/react-table';
+import { Columns3CogIcon } from 'lucide-react';
+import { useEffect, useMemo } from 'react';
+
+export function PickColumnsDropdown({
+	columns,
+	columnVisibility,
+	setColumnVisibility,
+}: {
+	columns: ReturnType<typeof formatBrowseDataTableHeader>['dataTableColumns'],
+	columnVisibility: VisibilityState,
+	setColumnVisibility: (columnVisibility: VisibilityState) => void,
+}) {
+	const columnHeaders = useMemo(() => {
+		return columns
+			.map(c => c.header as string)
+			.filter(excludeFalsy);
+	}, [columns]);
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="ghost" onClick={notYetImplemented}>
+					<Columns3CogIcon className="inline-block " />
+					Columns
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent>
+				{columnHeaders.map(columnHeader => <ColumnPicker
+					key={columnHeader}
+					columnHeader={columnHeader}
+					columnVisibility={columnVisibility}
+					setColumnVisibility={setColumnVisibility}
+				/>)}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}
+
+function ColumnPicker({
+	columnHeader,
+	columnVisibility,
+	setColumnVisibility,
+}: {
+	columnHeader: string,
+	columnVisibility: VisibilityState,
+	setColumnVisibility: (columnVisibility: VisibilityState) => void,
+}) {
+	const [isChecked, onCheckedChanged] = useToggleCallback(columnVisibility[columnHeader] ?? true);
+	useEffect(() => {
+		if (columnVisibility[columnHeader] !== isChecked) {
+			setColumnVisibility({
+				...columnVisibility,
+				[columnHeader]: isChecked,
+			});
+		}
+	}, [columnHeader, columnVisibility, isChecked, setColumnVisibility]);
+	return (
+		<DropdownMenuCheckboxItem key={columnHeader} checked={isChecked} onClick={onCheckedChanged}>
+			{columnHeader}
+		</DropdownMenuCheckboxItem>
+	);
+}

src/features/instance/databases/components/TableView.tsx

@@ -13,12 +13,14 @@ import {
 	getPaginationRowModel,
 	Row,
 	useReactTable,
+	VisibilityState,
 } from '@tanstack/react-table';
 import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';
 import { Dispatch, SetStateAction, useCallback } from 'react';
 
 interface BrowseDataTableProps<TData, TValue> {
 	columns: ColumnDef<TData, TValue>[];
+	columnVisibility: VisibilityState;
 	data: TData[];
 	isFetching?: boolean;
 	totalPages: number;
@@ -33,6 +35,7 @@ interface BrowseDataTableProps<TData, TValue> {
 
 export function TableView<TData, TValue>({
 	columns,
+	columnVisibility,
 	data,
 	isFetching,
 	totalPages,
@@ -54,6 +57,9 @@ export function TableView<TData, TValue>({
 		defaultColumn: {
 			minSize: 1,
 		},
+		state: {
+			columnVisibility,
+		},
 		rowCount: totalRecords,
 		getCoreRowModel: getCoreRowModel(),
 		getPaginationRowModel: getPaginationRowModel(),

src/hooks/useToggleCallback.ts

@@ -0,0 +1,13 @@
+import { MouseEvent, useCallback, useState } from 'react';
+
+export function useToggleCallback(defaultValue?: boolean) {
+	const [state, setState] = useState<boolean>(defaultValue || false);
+	const onClick = useCallback((e: MouseEvent) => {
+		e.preventDefault();
+		setState((checked: boolean) => {
+			return !checked;
+		});
+		return false;
+	}, []);
+	return [state, onClick] as const;
+}

src/lib/storage/sessionStorageKeys.ts

@@ -1,3 +1,4 @@
 export interface SessionStorageKeys {
 	'FolderOpened/{instanceId}/{key}': true;
+	'ColumnDisplayed/{database}/{table}': true;
 }