feat: column drag-reorder and flex resize fixes

- Fix: manual column resize now sticks for flex columns
- Feat: added drag-and-drop column reordering to Column Visibility Panel
- Docs: merged all updates pending for v0.1.4 release

Author: asif7774

CHANGELOG.md

@@ -5,7 +5,11 @@
 
 ---
 
-## [0.1.4] — March 10, 2026 🐛
+## [0.1.4] — March 10, 2026 ✨
+
+### Added
+- **Column Visibility Reorder**: Added a drag handle to the `ColumnVisibilityPanel` letting users seamlessly reorder columns directly via the Visibility Panel dropdown checkbox list. Uses native HTML Drag and Drop API with no external dependencies.
+- Added `onColumnReorder` support to `ColumnVisibilityPanel` and `GridToolbar`.
 
 ### Fixed
 - `import '@opencorestack/opengridx/styles'` now resolves correctly in TypeScript projects. The `./styles` subpath export in `package.json` now includes a `types` pointer to `dist/opengridx.css.d.ts`, eliminating the "Cannot find module" TS error.

demo/App.tsx

@@ -117,7 +117,7 @@ function App() {
                     <img src={`${import.meta.env.BASE_URL}logo.png`} alt="OpenGridX Logo" className="app-logo" />
                     <h2 className="app-title">
                         OpenGridX
-                        <span className="app-version">v0.1.3</span>
+                        <span className="app-version">v0.1.4</span>
                     </h2>
                 </div>
 

demo/Home.tsx

@@ -68,7 +68,7 @@ export default function Home(_props: HomeProps) {
                 <div className="home-logo-hero">
                     <img src={`${import.meta.env.BASE_URL}banner.png`} alt="OpenGridX Logo" className="home-banner-image" />
                 </div>
-                <span className="home-badge">OpenGridX v0.1.3</span>
+                <span className="home-badge">OpenGridX v0.1.4</span>
                 <p className="home-subtitle">
                     The elite, high-performance DataGrid for modern React.
                     Built to handle massive data with a premium developer experience.

demo/public/llms.txt

@@ -1,6 +1,6 @@
 # OpenGridX — AI Agent Context
 # Package: @opencorestack/opengridx
-# Version: 0.1.3
+# Version: 0.1.4
 # Docs: https://opencorestack.github.io/OpenGridX/
 # This file is machine-readable. AI developers: start here.
 

lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.css

@@ -52,19 +52,53 @@
 .ogx-column-visibility-panel__item {
   display: flex;
   align-items: center;
-  gap: var(--ogx-spacing-md);
-  padding: var(--ogx-spacing-xs) var(--ogx-spacing-md);
-  cursor: pointer;
+  gap: var(--ogx-spacing-sm);
+  padding: var(--ogx-spacing-xs) var(--ogx-spacing-sm) var(--ogx-spacing-xs) var(--ogx-spacing-xs);
   transition: background var(--ogx-transition-duration-fast) var(--ogx-transition-easing);
+  user-select: none;
 }
 
 .ogx-column-visibility-panel__item:hover:not(.ogx-column-visibility-panel__item--disabled) {
   background: var(--ogx-color-gray-50);
 }
 
+.ogx-column-visibility-panel__item--drag-over {
+  background: var(--ogx-color-primary-light, rgba(59, 130, 246, 0.08));
+  border-top: 2px solid var(--ogx-color-primary);
+}
+
 .ogx-column-visibility-panel__item--disabled {
   opacity: 0.5;
-  cursor: not-allowed;
+}
+
+/* ── Drag handle ──────────────────────────────────────────────────────────── */
+.ogx-column-visibility-panel__drag-handle-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 100%;
+  cursor: grab;
+  color: var(--ogx-color-gray-400);
+  border-radius: 3px;
+  transition: color var(--ogx-transition-duration-fast) var(--ogx-transition-easing),
+              background var(--ogx-transition-duration-fast) var(--ogx-transition-easing);
+}
+
+.ogx-column-visibility-panel__drag-handle-wrapper:hover {
+  color: var(--ogx-color-gray-600);
+  background: var(--ogx-color-gray-100);
+}
+
+.ogx-column-visibility-panel__drag-handle-wrapper:active {
+  cursor: grabbing;
+  color: var(--ogx-color-primary);
+}
+
+.ogx-column-visibility-panel__drag-handle {
+  display: block;
+  pointer-events: none;
 }
 
 .ogx-column-visibility-panel__label {

lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useRef } from 'react';
 import { Checkbox } from '../ui/Checkbox';
 import type { GridColDef, GridRowModel } from '../../types';
 
@@ -9,6 +9,7 @@ export interface ColumnVisibilityPanelProps<R extends GridRowModel = GridRowMode
     onVisibilityChange: (field: string, isVisible: boolean) => void;
     onShowAll: () => void;
     onHideAll: () => void;
+    onColumnReorder?: (fromField: string, toField: string) => void;
 }
 
 function SearchIcon() {
@@ -20,11 +21,32 @@ function SearchIcon() {
     );
 }
 
+function DragHandleIcon() {
+    return (
+        <svg
+            className="ogx-column-visibility-panel__drag-handle"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+        >
+            <circle cx="9"  cy="5"  r="1.5" />
+            <circle cx="15" cy="5"  r="1.5" />
+            <circle cx="9"  cy="12" r="1.5" />
+            <circle cx="15" cy="12" r="1.5" />
+            <circle cx="9"  cy="19" r="1.5" />
+            <circle cx="15" cy="19" r="1.5" />
+        </svg>
+    );
+}
+
 export function ColumnVisibilityPanel<R extends GridRowModel = GridRowModel>(
     props: ColumnVisibilityPanelProps<R>
 ) {
-    const { columns, visibleColumns, onVisibilityChange, onShowAll, onHideAll } = props;
+    const { columns, visibleColumns, onVisibilityChange, onShowAll, onHideAll, onColumnReorder } = props;
     const [searchQuery, setSearchQuery] = useState('');
+    const [dragOverField, setDragOverField] = useState<string | null>(null);
+    const dragFieldRef = useRef<string | null>(null);
 
     const hideableColumns = useMemo(() => columns.filter(col => col.hideable !== false), [columns]);
     const allVisible = hideableColumns.every(col => visibleColumns.has(col.field));
@@ -45,6 +67,41 @@ export function ColumnVisibilityPanel<R extends GridRowModel = GridRowModel>(
         }
     };
 
+    // ── Drag handlers ──────────────────────────────────────────────────────────
+    const handleDragStart = (field: string) => (e: React.DragEvent) => {
+        dragFieldRef.current = field;
+        e.dataTransfer.effectAllowed = 'move';
+        // Use a ghost image offset so the handle looks natural
+        e.dataTransfer.setDragImage(e.currentTarget.closest('.ogx-column-visibility-panel__item') as HTMLElement, 20, 20);
+    };
+
+    const handleDragOver = (field: string) => (e: React.DragEvent) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        if (field !== dragFieldRef.current) {
+            setDragOverField(field);
+        }
+    };
+
+    const handleDragLeave = () => {
+        setDragOverField(null);
+    };
+
+    const handleDrop = (toField: string) => (e: React.DragEvent) => {
+        e.preventDefault();
+        const fromField = dragFieldRef.current;
+        setDragOverField(null);
+        dragFieldRef.current = null;
+        if (fromField && fromField !== toField && onColumnReorder) {
+            onColumnReorder(fromField, toField);
+        }
+    };
+
+    const handleDragEnd = () => {
+        setDragOverField(null);
+        dragFieldRef.current = null;
+    };
+
     return (
         <div className="ogx-column-visibility-panel">
             <div className="ogx-column-visibility-panel__search-section">
@@ -66,21 +123,47 @@ export function ColumnVisibilityPanel<R extends GridRowModel = GridRowModel>(
                 {filteredColumns.map(col => {
                     const isVisible = visibleColumns.has(col.field);
                     const isHideable = col.hideable !== false;
+                    const isDragOver = dragOverField === col.field;
+                    const canReorder = !!onColumnReorder && !searchQuery;
 
                     return (
-                        <label
+                        <div
                             key={col.field}
-                            className={`ogx-column-visibility-panel__item ${!isHideable ? 'ogx-column-visibility-panel__item--disabled' : ''}`}
+                            className={[
+                                'ogx-column-visibility-panel__item',
+                                !isHideable && 'ogx-column-visibility-panel__item--disabled',
+                                isDragOver && 'ogx-column-visibility-panel__item--drag-over',
+                            ].filter(Boolean).join(' ')}
+                            draggable={canReorder}
+                            onDragOver={canReorder ? handleDragOver(col.field) : undefined}
+                            onDragLeave={canReorder ? handleDragLeave : undefined}
+                            onDrop={canReorder ? handleDrop(col.field) : undefined}
+                            onDragEnd={canReorder ? handleDragEnd : undefined}
                         >
-                            <Checkbox
-                                checked={isVisible}
-                                onChange={(e) => onVisibilityChange(col.field, e.target.checked)}
-                                disabled={!isHideable}
-                            />
-                            <span className="ogx-column-visibility-panel__label">
-                                {col.headerName || col.field}
-                            </span>
-                        </label>
+                            {canReorder && (
+                                <span
+                                    className="ogx-column-visibility-panel__drag-handle-wrapper"
+                                    draggable
+                                    onDragStart={handleDragStart(col.field)}
+                                    title="Drag to reorder"
+                                >
+                                    <DragHandleIcon />
+                                </span>
+                            )}
+                            <label
+                                className="ogx-column-visibility-panel__item-label"
+                                style={{ display: 'flex', alignItems: 'center', gap: 'var(--ogx-spacing-md)', flex: 1, cursor: isHideable ? 'pointer' : 'not-allowed' }}
+                            >
+                                <Checkbox
+                                    checked={isVisible}
+                                    onChange={(e) => onVisibilityChange(col.field, e.target.checked)}
+                                    disabled={!isHideable}
+                                />
+                                <span className="ogx-column-visibility-panel__label">
+                                    {col.headerName || col.field}
+                                </span>
+                            </label>
+                        </div>
                     );
                 })}
             </div>

lib/components/DataGrid/DataGrid.tsx

@@ -782,7 +782,8 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         }, 0);
 
         const naturalFlexWidth = unpinnedCols.reduce((sum, col) => {
-            if (col.flex && col.flex > 0) {
+            const hasManualWidth = Object.prototype.hasOwnProperty.call(columnWidths, col.field);
+            if (!hasManualWidth && col.flex && col.flex > 0) {
                 const minWidth = col.minWidth ?? 150;
                 const width = typeof col.width === 'number' ? col.width : 150;
                 return sum + (minWidth || width);
@@ -804,9 +805,14 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         let totalFlexUnits = 0;
 
         unpinnedCols.forEach(col => {
+            // If the user has manually resized this column, columnWidths has an explicit
+            // entry for it. Respect that stored width as fixed-width so the resize sticks,
+            // even if the column definition originally had flex.
+            const hasManualWidth = Object.prototype.hasOwnProperty.call(columnWidths, col.field);
+
             const parsed = parseWidth(getColWidth(col));
 
-            if (col.flex && col.flex > 0) {
+            if (!hasManualWidth && col.flex && col.flex > 0) {
                 flexCols.push({ col, flex: col.flex });
                 totalFlexUnits += col.flex;
                 return;
@@ -1665,6 +1671,18 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                     columnVisibilityModel,
                     onColumnVisibilityModelChange: handleColumnVisibilityModelChange,
 
+                    onColumnReorder: (fromField: string, toField: string) => {
+                        const currentOrder = [...effectiveColumnOrder];
+                        const fromIdx = currentOrder.indexOf(fromField);
+                        const toIdx = currentOrder.indexOf(toField);
+                        if (fromIdx === -1 || toIdx === -1) return;
+                        const newOrder = [...currentOrder];
+                        newOrder.splice(fromIdx, 1);
+                        newOrder.splice(toIdx, 0, fromField);
+                        if (!columnOrder) setInternalColumnOrder(newOrder);
+                        const col = effectiveColumns.find(c => c.field === fromField); if (col) onColumnOrderChange?.({ oldIndex: fromIdx, targetIndex: toIdx, column: col as any });
+                    },
+
                     forceColumnsOpen: columnsPanelOpen,
                     onColumnsPanelClose: () => setColumnsPanelOpen(false),
 
@@ -1731,6 +1749,19 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                             effectiveColumns.forEach(col => { if (col.hideable !== false) next[col.field] = false; });
                             handleColumnVisibilityModelChange(next);
                         }}
+                        onColumnReorder={(fromField, toField) => {
+                            const currentOrder = [...effectiveColumnOrder];
+                            const fromIdx = currentOrder.indexOf(fromField);
+                            const toIdx = currentOrder.indexOf(toField);
+                            if (fromIdx === -1 || toIdx === -1) return;
+                            const newOrder = [...currentOrder];
+                            newOrder.splice(fromIdx, 1);
+                            newOrder.splice(toIdx, 0, fromField);
+                            if (!columnOrder) {
+                                setInternalColumnOrder(newOrder);
+                            }
+                            onColumnOrderChange?.({ oldIndex: fromIdx, targetIndex: toIdx, column: effectiveColumns.find(c => c.field === fromField) as any });
+                        }}
                     />
                 </div>,
                 document.body

lib/components/Toolbar/GridToolbar.tsx

@@ -17,6 +17,7 @@ export interface GridToolbarProps {
     onFilterModelChange?: (model: GridFilterModel) => void;
     columnVisibilityModel?: Record<string, boolean>;
     onColumnVisibilityModelChange?: (model: Record<string, boolean>) => void;
+    onColumnReorder?: (fromField: string, toField: string) => void;
     forceColumnsOpen?: boolean;
     onColumnsPanelClose?: () => void;
     children?: React.ReactNode;
@@ -189,6 +190,7 @@ function ColumnsPanelWrapper({
     onVisibilityChange,
     onShowAll,
     onHideAll,
+    onColumnReorder,
     onClose
 }: {
     anchorRef: React.RefObject<HTMLButtonElement | null>;
@@ -197,6 +199,7 @@ function ColumnsPanelWrapper({
     onVisibilityChange: (field: string, isVisible: boolean) => void;
     onShowAll: () => void;
     onHideAll: () => void;
+    onColumnReorder?: (fromField: string, toField: string) => void;
     onClose: () => void;
 }) {
     const panelRef = useRef<HTMLDivElement>(null);
@@ -249,6 +252,7 @@ function ColumnsPanelWrapper({
                 onVisibilityChange={onVisibilityChange}
                 onShowAll={onShowAll}
                 onHideAll={onHideAll}
+                onColumnReorder={onColumnReorder}
             />
         </div>
     );
@@ -372,6 +376,7 @@ export function GridToolbar({
     onFilterModelChange,
     columnVisibilityModel = {},
     onColumnVisibilityModelChange,
+    onColumnReorder,
     forceColumnsOpen,
     onColumnsPanelClose,
     children,
@@ -521,6 +526,7 @@ export function GridToolbar({
                                 onVisibilityChange={handleVisibilityChange}
                                 onShowAll={handleShowAllColumns}
                                 onHideAll={handleHideAllColumns}
+                                onColumnReorder={onColumnReorder}
                                 onClose={() => { setColsOpen(false); onColumnsPanelClose?.(); }}
                             />
                         )}

llms.txt

@@ -1,6 +1,6 @@
 # OpenGridX — AI Agent Context
 # Package: @opencorestack/opengridx
-# Version: 0.1.3
+# Version: 0.1.4
 # Docs: https://opencorestack.github.io/OpenGridX/
 # This file is machine-readable. AI developers: start here.