diff --git a/apps/studio/components/grid/components/grid/Grid.tsx b/apps/studio/components/grid/components/grid/Grid.tsx index 3fa50b0992e..5ec6287bfc1 100644 --- a/apps/studio/components/grid/components/grid/Grid.tsx +++ b/apps/studio/components/grid/components/grid/Grid.tsx @@ -1,4 +1,4 @@ -import { forwardRef, memo, useRef } from 'react' +import { forwardRef, memo, useRef, useMemo } from 'react' import DataGrid, { CalculatedColumn, DataGridHandle } from 'react-data-grid' import { handleCopyCell } from 'components/grid/SupabaseGrid.utils' @@ -10,6 +10,7 @@ import { useSendEventMutation } from 'data/telemetry/send-event-mutation' import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' import { useTableEditorStateSnapshot } from 'state/table-editor' import { useTableEditorTableStateSnapshot } from 'state/table-editor-table' +import { useTableColumnVisibility } from 'components/grid/hooks/useTableColumnVisibility' import { Button, cn } from 'ui' import { GenericSkeletonLoader } from 'ui-patterns' import type { Filter, GridProps, SupaRow } from '../../types' @@ -52,6 +53,12 @@ export const Grid = memo( ) => { const tableEditorSnap = useTableEditorStateSnapshot() const snap = useTableEditorTableStateSnapshot() + const { hiddenColumns } = useTableColumnVisibility() + + const visibleColumns = useMemo(() => { + if (!snap.gridColumns) return [] + return snap.gridColumns.filter((col) => !hiddenColumns.has(col.key)) + }, [snap.gridColumns, hiddenColumns]) const onRowsChange = useOnRowsChange(rows) @@ -182,7 +189,7 @@ export const Grid = memo( ref={ref} className={`${gridClass} flex-grow`} rowClass={rowClass} - columns={snap.gridColumns as CalculatedColumn[]} + columns={visibleColumns as CalculatedColumn[]} rows={rows ?? []} renderers={{ renderRow: RowRenderer }} rowKeyGetter={rowKeyGetter} diff --git a/apps/studio/components/grid/components/header/ColumnVisibility.tsx b/apps/studio/components/grid/components/header/ColumnVisibility.tsx new file mode 100644 index 00000000000..2eabbd3e44d --- /dev/null +++ b/apps/studio/components/grid/components/header/ColumnVisibility.tsx @@ -0,0 +1,68 @@ +import { useParams } from 'common' +import { Settings2 } from 'lucide-react' +import { + Button, + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuTrigger, + Tooltip, + TooltipContent, + TooltipTrigger, +} from 'ui' + +import { useTableColumnVisibility } from 'components/grid/hooks/useTableColumnVisibility' +import { useTableEditorTableStateSnapshot } from 'state/table-editor-table' + +export const ColumnVisibility = () => { + const snap = useTableEditorTableStateSnapshot() + + const { hiddenColumns, hideColumn, showColumn } = useTableColumnVisibility() + + const handleToggleColumnVisibility = (columnKey: string, isVisible: boolean) => { + if (isVisible) { + showColumn(columnKey) + } else { + hideColumn(columnKey) + } + } + + const columns = snap.table?.columns ?? [] + + if (columns.length === 0) { + return null + } + + return ( + + + + +