@opencorestack/opengridx 1.2.2 → 1.2.3

package/lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.test.tsx

@@ -0,0 +1,85 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ColumnVisibilityPanel } from './ColumnVisibilityPanel';
+import type { GridColDef } from '../../types';
+
+const columns: GridColDef[] = [
+    { field: 'name', headerName: 'Name' },
+    { field: 'department', headerName: 'Department' },
+    { field: 'groupKey', headerName: 'Group Key', hideable: false },
+];
+
+const visibleColumns = new Set(['name', 'department', 'groupKey']);
+
+const noop = () => {};
+
+describe('ColumnVisibilityPanel', () => {
+    it('excludes hideable:false columns from the list by default', () => {
+        render(
+            <ColumnVisibilityPanel
+                columns={columns}
+                visibleColumns={visibleColumns}
+                onVisibilityChange={noop}
+                onShowAll={noop}
+                onHideAll={noop}
+            />
+        );
+        expect(screen.getByText('Name')).toBeInTheDocument();
+        expect(screen.getByText('Department')).toBeInTheDocument();
+        expect(screen.queryByText('Group Key')).not.toBeInTheDocument();
+    });
+
+    it('shows hideable:false columns as disabled when showNonHideableColumns is true', () => {
+        render(
+            <ColumnVisibilityPanel
+                columns={columns}
+                visibleColumns={visibleColumns}
+                onVisibilityChange={noop}
+                onShowAll={noop}
+                onHideAll={noop}
+                showNonHideableColumns
+            />
+        );
+        expect(screen.getByText('Name')).toBeInTheDocument();
+        expect(screen.getByText('Department')).toBeInTheDocument();
+        expect(screen.getByText('Group Key')).toBeInTheDocument();
+
+        // 3 columns shown + 1 "Show/Hide All" checkbox in footer = 4 checkboxes
+        // The 3rd column (Group Key, hideable:false) must be the disabled one
+        const checkboxes = screen.getAllByRole('checkbox');
+        const disabledCheckboxes = checkboxes.filter(cb => (cb as HTMLInputElement).disabled);
+        expect(disabledCheckboxes).toHaveLength(1);
+    });
+
+    it('does not render a disabled checkbox for hideable:false columns by default', () => {
+        render(
+            <ColumnVisibilityPanel
+                columns={columns}
+                visibleColumns={visibleColumns}
+                onVisibilityChange={noop}
+                onShowAll={noop}
+                onHideAll={noop}
+            />
+        );
+        const checkboxes = screen.getAllByRole('checkbox');
+        const disabledCheckboxes = checkboxes.filter(cb => (cb as HTMLInputElement).disabled);
+        expect(disabledCheckboxes).toHaveLength(0);
+    });
+
+    it('never shows hideable:false columns even when search would match them', () => {
+        // Without showNonHideableColumns, hideable:false columns are not in the base list
+        // so they cannot appear regardless of search. This test verifies the base list,
+        // not a dynamic search interaction.
+        render(
+            <ColumnVisibilityPanel
+                columns={columns}
+                visibleColumns={visibleColumns}
+                onVisibilityChange={noop}
+                onShowAll={noop}
+                onHideAll={noop}
+            />
+        );
+        // "Group Key" is hideable:false — must not appear in the default panel
+        expect(screen.queryByText('Group Key')).not.toBeInTheDocument();
+    });
+});

package/lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.tsx

@@ -11,6 +11,8 @@ export interface ColumnVisibilityPanelProps<R extends GridRowModel = GridRowMode
     onHideAll: () => void;
     onColumnReorder?: (fromField: string, toField: string) => void;
     onColumnOrderReset?: () => void;
+    /** Show columns with `hideable: false` in the panel as disabled rows. Default: false. */
+    showNonHideableColumns?: boolean;
 }
 
 function SearchIcon() {
@@ -44,7 +46,7 @@ function DragHandleIcon() {
 export function ColumnVisibilityPanel<R extends GridRowModel = GridRowModel>(
     props: ColumnVisibilityPanelProps<R>
 ) {
-    const { columns, visibleColumns, onVisibilityChange, onShowAll, onHideAll, onColumnReorder, onColumnOrderReset } = props;
+    const { columns, visibleColumns, onVisibilityChange, onShowAll, onHideAll, onColumnReorder, onColumnOrderReset, showNonHideableColumns } = props;
     const [searchQuery, setSearchQuery] = useState('');
     const [dragOverField, setDragOverField] = useState<string | null>(null);
     const dragFieldRef = useRef<string | null>(null);
@@ -53,12 +55,13 @@ export function ColumnVisibilityPanel<R extends GridRowModel = GridRowModel>(
     const allVisible = hideableColumns.every(col => visibleColumns.has(col.field));
 
     const filteredColumns = useMemo(() => {
-        if (!searchQuery) return columns;
+        const base = showNonHideableColumns ? columns : hideableColumns;
+        if (!searchQuery) return base;
         const lowerQuery = searchQuery.toLowerCase();
-        return columns.filter(col =>
+        return base.filter(col =>
             (col.headerName || col.field).toLowerCase().includes(lowerQuery)
         );
-    }, [columns, searchQuery]);
+    }, [columns, hideableColumns, searchQuery, showNonHideableColumns]);
 
     const handleToggleAll = (e: React.ChangeEvent<HTMLInputElement>) => {
         if (e.target.checked) {

package/lib/components/Toolbar/GridToolbar.tsx

@@ -74,6 +74,8 @@ export interface GridToolbarProps {
     renderQuickFilter?: (props: ToolbarQuickFilterRenderProps) => React.ReactNode;
     /** Additional CSS class applied to the toolbar root element. */
     className?: string;
+    /** Show columns with `hideable: false` in the Columns panel as disabled rows. Default: false. */
+    showNonHideableColumns?: boolean;
 }
 
 const AGGREGATION_FUNCTIONS = ['none', 'sum', 'avg', 'count', 'min', 'max'] as const;
@@ -248,7 +250,8 @@ function ColumnsPanelWrapper({
     onHideAll,
     onColumnReorder,
     onColumnOrderReset,
-    onClose
+    onClose,
+    showNonHideableColumns,
 }: {
     anchorRef: React.RefObject<HTMLElement | null>;
     columns: GridColDef[];
@@ -259,6 +262,7 @@ function ColumnsPanelWrapper({
     onColumnReorder?: (fromField: string, toField: string) => void;
     onColumnOrderReset?: () => void;
     onClose: () => void;
+    showNonHideableColumns?: boolean;
 }) {
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<PanelPosition>({ top: 0, right: 0 });
@@ -317,6 +321,7 @@ function ColumnsPanelWrapper({
                 onHideAll={onHideAll}
                 onColumnReorder={onColumnReorder}
                 onColumnOrderReset={onColumnOrderReset}
+                showNonHideableColumns={showNonHideableColumns}
             />
         </div>
     );
@@ -464,6 +469,7 @@ export function GridToolbar({
     renderExportButton,
     renderQuickFilter,
     className,
+    showNonHideableColumns,
 }: GridToolbarProps) {
     const [aggOpen, setAggOpen] = useState(false);
     const [pivotOpen, setPivotOpen] = useState(false);
@@ -631,6 +637,7 @@ export function GridToolbar({
                                 onColumnReorder={onColumnReorder}
                                 onColumnOrderReset={onColumnOrderReset}
                                 onClose={() => { setColsOpen(false); onColumnsPanelClose?.(); }}
+                                showNonHideableColumns={showNonHideableColumns}
                             />
                         )}
                     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencorestack/opengridx",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "OpenGridX: High-performance React data infrastructure. Unlock advanced Row Grouping, Excel Export, and Column Pinning without the usual \"Pro\" gatekeeping. Built for speed, scale, and complete architectural freedom. Fully open, virtualization-ready, and feature-complete.",
   "type": "module",
   "main": "./dist/opengridx.umd.js",