@visns-studio/visns-components 5.11.11 → 5.11.12

package/package.json

@@ -24,13 +24,13 @@
         "dayjs": "^1.11.13",
         "fabric": "^6.7.0",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.18.1",
+        "framer-motion": "^12.19.1",
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.518.0",
         "moment": "^2.30.1",
-        "motion": "^12.18.1",
+        "motion": "^12.19.1",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
@@ -58,7 +58,7 @@
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "swapy": "^1.0.5",
-        "sweetalert2": "^11.22.0",
+        "sweetalert2": "^11.22.1",
         "tesseract.js": "^6.0.1",
         "truncate": "^3.0.0",
         "uuid": "^11.1.0",
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.11.11",
+    "version": "5.11.12",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/cms/DataGrid.jsx

@@ -36,6 +36,7 @@ import 'react-toggle/style.css';
 
 import CustomFetch from '../crm/Fetch';
 import Form from './Form';
+import { extractColumnsMetadata, isColumnSortable } from '../../utils/columnsMetadataUtils';
 
 const loadData = async (
     { skip, limit, sortInfo, currentData, filterValue, groupBy },
@@ -83,10 +84,14 @@ const loadData = async (
     try {
         const response = await fetchUtil.post(url, params);
         const { data, total } = response.data;
-        return { data, count: total };
+        
+        // Extract columns metadata if available
+        const metadata = extractColumnsMetadata(response);
+        
+        return { data, count: total, metadata };
     } catch (error) {
         console.error('Error fetching data:', error);
-        return { data: [], count: 0 };
+        return { data: [], count: 0, metadata: {} };
     }
 };
 
@@ -146,9 +151,16 @@ const DataGrid = ({
 
             sqlResult.then((res) => {
                 setDataCount(res.count);
+                // Update metadata when data is loaded
+                if (res.metadata) {
+                    setColumnsMetadata(res.metadata);
+                }
             });
 
-            return sqlResult;
+            return sqlResult.then(res => ({
+                data: res.data,
+                count: res.count
+            }));
         },
         [ajaxSetting, dataReload, dSearch]
     );
@@ -157,6 +169,7 @@ const DataGrid = ({
     const [gridColumns, setGridColumns] = useState([]);
     const [limit, setLimit] = useState(ajaxSetting.take || 10);
     const [search, setSearch] = useState('');
+    const [columnsMetadata, setColumnsMetadata] = useState({});
 
     /** Table Functions */
     const handleChangeSearch = (e) => {
@@ -455,9 +468,14 @@ const DataGrid = ({
             let style;
             let value;
 
+            // Check if column is sortable based on metadata
+            const columnKey = column.id;
+            const sortable = isColumnSortable(columnKey, columnsMetadata);
+            
             const commonProps = {
                 header: column.label,
                 defaultFlex: 1,
+                sortable: sortable,
                 link: column.link ? column.link : {},
                 minWidth:
                     column.minWidth && column.minWidth > 0
@@ -1384,7 +1402,7 @@ const DataGrid = ({
             });
 
         setFilterValue(newFilterValue);
-    }, [columns, filterDataSource]);
+    }, [columns, filterDataSource, columnsMetadata]);
 
     useEffect(() => {
         if (setFilterData) {

package/src/components/crm/Autocomplete.jsx

@@ -178,11 +178,11 @@ const VisnsAutocomplete = memo((props) => {
 
     // Effect to handle overwrite toggle
     useEffect(() => {
-        if (!overwrite && search) {
+        if (!overwrite && search && search.length > 1 && isFocused) {
             setIsLoading(true);
             performSearch(1, search);
         }
-    }, [overwrite, search, performSearch]);
+    }, [overwrite, search, performSearch, isFocused]);
 
     // Effect to sync with inputValue prop
     useEffect(() => {
@@ -274,7 +274,7 @@ const VisnsAutocomplete = memo((props) => {
                 )}
             </div>
 
-            {isFocused && (search.length > 1 || isLoading) && (
+            {isFocused && !overwrite && (search.length > 1 || isLoading) && (
                 <ul
                     ref={resultsRef}
                     className={styles['AutocompletePlace-results']}

package/src/components/crm/DataGrid.jsx

@@ -42,6 +42,7 @@ import { toast } from 'react-toastify';
 import fetchUtil from '../../utils/fetchUtil';
 import { confirmDialog } from '../utils/ConfirmDialog';
 import { DEFAULT_INTELLIGENT_SORTING_CONFIG } from '../../utils/relationshipSortingUtils';
+import { extractColumnsMetadata, isColumnSortable } from '../../utils/columnsMetadataUtils';
 import {
     AlarmClock,
     RotateCcw,
@@ -205,10 +206,14 @@ const loadData = async (
     try {
         const response = await fetchUtil.post(url, params);
         const { data, total } = response.data;
-        return { data, count: total };
+        
+        // Extract columns metadata if available
+        const metadata = extractColumnsMetadata(response);
+        
+        return { data, count: total, metadata };
     } catch (error) {
         console.error('Error fetching data:', error);
-        return { data: [], count: 0 };
+        return { data: [], count: 0, metadata: {} };
     }
 };
 
@@ -377,6 +382,11 @@ const DataGrid = forwardRef(
                 }
 
                 sqlResult.then((res) => {
+                    // Update metadata when data is loaded
+                    if (res.metadata) {
+                        setColumnsMetadata(res.metadata);
+                    }
+                    
                     // Sort data by grouping field if grouping is enabled
                     if (ajaxSetting?.groupBy?.length > 0) {
                         const groupField = ajaxSetting.groupBy[0]; // groupBy is array of strings
@@ -434,13 +444,17 @@ const DataGrid = forwardRef(
                     }, 10);
                 });
 
-                return sqlResult;
+                return sqlResult.then(res => ({
+                    data: res.data,
+                    count: res.count
+                }));
             },
             [ajaxSetting, dSearch, collapsedGroups]
         );
         const [filterDataSource, setFilterDataSource] = useState([]);
         const [filterValue, setFilterValue] = useState([]);
         const [gridColumns, setGridColumns] = useState([]);
+        const [columnsMetadata, setColumnsMetadata] = useState({});
         const gridRef = useRef(null);
         const [limit, setLimit] = useState(0);
         const [search, setSearch] = useState('');
@@ -2354,9 +2368,14 @@ const DataGrid = forwardRef(
                         let columnStyle;
                         let value;
 
+                        // Check if column is sortable based on metadata
+                        const columnKey = column.id;
+                        const sortable = isColumnSortable(columnKey, columnsMetadata);
+                        
                         const commonProps = {
                             header: column.label,
                             defaultFlex: 1,
+                            sortable: sortable,
                             link: column.link ?? {},
                             minWidth: column.minWidth ?? undefined,
                             maxWidth: column.maxWidth ?? undefined,
@@ -2836,7 +2855,7 @@ const DataGrid = forwardRef(
                 .catch((error) => {
                     console.error('Error in fetching dropdown data: ', error);
                 });
-        }, [columns, filterDataSource]);
+        }, [columns, filterDataSource, columnsMetadata]);
 
         useEffect(() => {
             if (setFilterData) {

package/src/components/crm/Field.jsx

@@ -1,6 +1,6 @@
 import '../styles/global.css';
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
 import DatePicker from 'react-datepicker';
 import _ from 'lodash';
 import Toggle from 'react-toggle';
@@ -189,22 +189,6 @@ function Field({
         const fetchOptions = () => {
             let filter = {};
 
-            if (settings.where?.length > 0) {
-                const processedWhere = settings.where.map((whereItem) => {
-                    if (whereItem.getKey && formData[whereItem.getKey]) {
-                        return {
-                            ...whereItem,
-                            value: formData[whereItem.getKey],
-                        };
-                    }
-                    return whereItem;
-                });
-
-                filter = {
-                    where: processedWhere,
-                };
-            }
-
             if (settings.fields?.length > 0) {
                 filter.fields = settings.fields;
             }
@@ -261,7 +245,10 @@ function Field({
             case 'dropdown-ajax':
             case 'multi-dropdown-ajax':
             case 'radio-ajax':
-                fetchOptions();
+                // Only fetch if there are no dependent fields (no 'where' conditions)
+                if (!settings.where || settings.where.length === 0) {
+                    fetchOptions();
+                }
                 break;
             default:
                 break;
@@ -285,7 +272,66 @@ function Field({
             );
             setCanvasUrl(canvasType.url);
         }
-    }, [settings, counter, formData]);
+    }, [settings, counter]);
+
+    // Get dependency field keys once
+    const dependencyKeys = useMemo(() => {
+        return settings.where?.map(whereItem => whereItem.getKey).filter(Boolean) || [];
+    }, [settings.where]);
+
+    // Separate useEffect for handling dependent form data changes for dropdown refetch
+    useEffect(() => {
+        if (['dropdown-ajax', 'multi-dropdown-ajax', 'radio-ajax'].includes(settings.type) && settings.where?.length > 0) {
+            let filter = {};
+
+            const processedWhere = settings.where.map((whereItem) => {
+                if (whereItem.getKey && formData[whereItem.getKey]) {
+                    return {
+                        ...whereItem,
+                        value: formData[whereItem.getKey],
+                    };
+                }
+                return whereItem;
+            });
+
+            filter = { where: processedWhere };
+
+            if (settings.fields?.length > 0) {
+                filter.fields = settings.fields;
+            }
+
+            if (settings.order && settings.order.sortBy && settings.order.sort) {
+                filter.sortBy = settings.order.sortBy;
+                filter.sort = settings.order.sort;
+            }
+
+            if (settings?.customParams) {
+                filter = { ...filter, ...settings.customParams };
+            }
+
+            CustomFetch(settings.url, 'POST', filter, function (result) {
+                setOptions(result.data);
+
+                let dataArray = [];
+                result.data.forEach((a) => {
+                    let _tempObject = a;
+                    if (!_.isEmpty(_tempObject)) {
+                        let modifiedObject = {};
+                        Object.keys(_tempObject).forEach(function (c) {
+                            if (c !== 'id' && c !== 'label') {
+                                modifiedObject['data-' + c] = _tempObject[c];
+                            }
+                        });
+                        dataArray.push(modifiedObject);
+                    }
+                });
+
+                if (dataArray.length > 0) {
+                    setDataOptions(dataArray);
+                }
+            });
+        }
+    }, [...dependencyKeys.map(key => formData[key])]);
 
     const fetchChildDropdownData = (s, v) => {
         let filter = {};
@@ -2126,7 +2172,6 @@ function Field({
                         </span>
                     );
                 }
-                break;
             case 'plaintextheading':
                 return <h2>{settings.label ? settings.label : ''}</h2>;
             case 'section':
@@ -2143,7 +2188,7 @@ function Field({
                         onEditorChange={(value, e) => {
                             onChangeRicheditor(e, value, settings.id);
                         }}
-                        onInit={(evt, editor) => (editorRef.current = editor)}
+                        onInit={(_, editor) => (editorRef.current = editor)}
                         value={inputValue || ''}
                         init={{
                             branding: false,

package/src/components/crm/generic/GenericGrid.jsx

@@ -13,6 +13,7 @@ import { showContactSelectorModal } from './ContactSelectorModal';
 import { showDateRangeSelectorModal } from './DateRangeSelectorModal';
 import { showAlternativeActionModal } from './AlternativeActionModal';
 import { showReasonCollectorModal } from './ReasonCollectorModal';
+import { processGridHeaders, getColumnHeaderClasses, getColumnHeaderStyles, getColumnHeaderTooltip } from '../../../utils/columnsMetadataUtils';
 import styles from './styles/GenericIndex.module.scss';
 
 // ContactTooltip component for enhanced contact display
@@ -825,6 +826,14 @@ const GenericGrid = ({
 
     // Handle sort request
     const requestSort = useCallback((key) => {
+        // Find the header configuration for this key to check if it's sortable
+        const header = gridHeaders.find((h) => h.key === key);
+        
+        // If the column is not sortable, don't proceed with sorting
+        if (header && header.sortable === false) {
+            return;
+        }
+        
         // If clicking the same column, toggle direction
         // Otherwise, start with ascending sort for the new column
         setSortConfig((prevConfig) => {
@@ -835,7 +844,7 @@ const GenericGrid = ({
 
             return { key, direction: newDirection };
         });
-    }, []);
+    }, [gridHeaders]);
 
     // Function to filter data based on filter values
     const filterData = useCallback(
@@ -975,24 +984,16 @@ const GenericGrid = ({
                 const staticData = settings.staticData;
 
                 if (staticData.header && staticData.rows) {
-                    // Set the headers from the static data
-                    const headerEntries = Object.entries(staticData.header);
-                    setGridHeaders(
-                        headerEntries.map(([key, config]) => ({
-                            key,
-                            label: config.label || key,
-                            sort: config.sort || key,
-                            type: config.type || 'text',
-                            filter: config.filter || null,
-                            onClick: config.onClick || null,
-                        }))
-                    );
+                    // Process static headers using the metadata utilities
+                    const mockResponse = { data: { data: staticData } };
+                    const processedHeaders = processGridHeaders(mockResponse);
+                    setGridHeaders(processedHeaders);
 
                     // Initialize filter values
                     const initialFilterValues = {};
-                    headerEntries.forEach(([key, config]) => {
-                        if (config.filter) {
-                            initialFilterValues[key] = '';
+                    processedHeaders.forEach((header) => {
+                        if (header.filter) {
+                            initialFilterValues[header.key] = '';
                         }
                     });
                     setFilterValues(initialFilterValues);
@@ -1046,26 +1047,15 @@ const GenericGrid = ({
                 if (response.data.data) {
                     // Check if the response has the expected structure with header and rows
                     if (response.data.data.header && response.data.data.rows) {
-                        // Set the headers from the response with the new structure
-                        const headerEntries = Object.entries(
-                            response.data.data.header
-                        );
-                        setGridHeaders(
-                            headerEntries.map(([key, config]) => ({
-                                key,
-                                label: config.label || key,
-                                sort: config.sort || key,
-                                type: config.type || 'text',
-                                filter: config.filter || null,
-                                onClick: config.onClick || null,
-                            }))
-                        );
+                        // Process headers using the metadata utilities
+                        const processedHeaders = processGridHeaders(response.data);
+                        setGridHeaders(processedHeaders);
 
                         // Initialize filter values
                         const initialFilterValues = {};
-                        headerEntries.forEach(([key, config]) => {
-                            if (config.filter) {
-                                initialFilterValues[key] = '';
+                        processedHeaders.forEach((header) => {
+                            if (header.filter) {
+                                initialFilterValues[header.key] = '';
                             }
                         });
                         setFilterValues(initialFilterValues);
@@ -2627,34 +2617,36 @@ const GenericGrid = ({
                         <tr>
                             {/* Use gridHeaders if available, otherwise fall back to headers from columns */}
                             {gridHeaders.length > 0
-                                ? gridHeaders.map((header, index) => (
-                                      <th
-                                          key={`header-${index}`}
-                                          className={`${styles.gridHeader} ${styles.sortableHeader}`}
-                                          onClick={() =>
-                                              requestSort(header.key)
-                                          }
-                                          style={{ cursor: 'pointer' }}
-                                      >
-                                          <div className={styles.headerContent}>
-                                              {header.label}
-                                              <span
-                                                  className={
-                                                      styles.sortIndicator
-                                                  }
-                                                  style={getSortIndicatorStyle(
-                                                      header.key
+                                ? gridHeaders.map((header, index) => {
+                                      const headerClasses = getColumnHeaderClasses(header);
+                                      const headerStyles = getColumnHeaderStyles(header);
+                                      const tooltip = getColumnHeaderTooltip(header);
+                                      
+                                      return (
+                                          <th
+                                              key={`header-${index}`}
+                                              className={`${styles.gridHeader} ${headerClasses.join(' ')}`}
+                                              onClick={header.sortable !== false ? () => requestSort(header.key) : undefined}
+                                              style={headerStyles}
+                                              title={tooltip}
+                                          >
+                                              <div className={styles.headerContent}>
+                                                  {header.label}
+                                                  {header.sortable !== false && (
+                                                      <span
+                                                          className={styles.sortIndicator}
+                                                          style={getSortIndicatorStyle(header.key)}
+                                                      >
+                                                          {sortConfig.key === header.key &&
+                                                          sortConfig.direction === 'asc'
+                                                              ? ' ▲'
+                                                              : ' ▼'}
+                                                      </span>
                                                   )}
-                                              >
-                                                  {sortConfig.key ===
-                                                      header.key &&
-                                                  sortConfig.direction === 'asc'
-                                                      ? ' ▲'
-                                                      : ' ▼'}
-                                              </span>
-                                          </div>
-                                      </th>
-                                  ))
+                                              </div>
+                                          </th>
+                                      );
+                                  })
                                 : headers.map((header, index) => (
                                       <th
                                           key={`header-${index}`}

package/src/components/crm/generic/styles/GenericIndex.module.scss

@@ -502,6 +502,58 @@
     }
 }
 
+// Non-sortable column styles
+.non-sortable {
+    cursor: default !important;
+    opacity: 0.8;
+    user-select: none;
+    
+    &:hover {
+        background-color: var(--primary-color, #007bff) !important;
+    }
+    
+    .headerContent {
+        opacity: 0.9;
+    }
+}
+
+// Virtual column styles
+.virtual-column {
+    position: relative;
+    
+    &::after {
+        content: '🔗';
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        font-size: 0.7em;
+        opacity: 0.6;
+    }
+}
+
+// Computed column styles  
+.computed-column {
+    position: relative;
+    
+    &::after {
+        content: '🧮';
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        font-size: 0.7em;
+        opacity: 0.6;
+    }
+}
+
+// Column type indicators
+.column-type-virtual {
+    border-left: 3px solid rgba(255, 193, 7, 0.7);
+}
+
+.column-type-computed {
+    border-left: 3px solid rgba(40, 167, 69, 0.7);
+}
+
 .headerContent {
     display: flex;
     align-items: center;

package/src/utils/columnsMetadataUtils.js

@@ -0,0 +1,277 @@
+/**
+ * Utilities for handling columns_metadata from API responses
+ * 
+ * This module provides functions to parse and apply metadata from the backend
+ * that controls column behavior, especially for virtual columns that should not be sortable.
+ */
+
+/**
+ * Extracts and normalizes columns metadata from API response
+ * 
+ * @param {Object} response - API response object
+ * @returns {Object} - Normalized metadata object with column keys as properties
+ */
+export const extractColumnsMetadata = (response) => {
+    // Handle different possible response structures
+    const metadata = response?.data?.columns_metadata || 
+                    response?.columns_metadata || 
+                    response?.metadata?.columns ||
+                    {};
+    
+    // Ensure we have a valid object
+    if (!metadata || typeof metadata !== 'object') {
+        return {};
+    }
+    
+    return metadata;
+};
+
+/**
+ * Checks if a column is sortable based on metadata
+ * 
+ * @param {string} columnKey - The column key/identifier
+ * @param {Object} metadata - Columns metadata object
+ * @returns {boolean} - Whether the column is sortable
+ */
+export const isColumnSortable = (columnKey, metadata) => {
+    // If no metadata available, assume sortable (backward compatibility)
+    if (!metadata || typeof metadata !== 'object') {
+        return true;
+    }
+    
+    const columnMeta = metadata[columnKey];
+    
+    // If no specific metadata for this column, assume sortable
+    if (!columnMeta || typeof columnMeta !== 'object') {
+        return true;
+    }
+    
+    // Check the sortable property, default to true if not specified
+    return columnMeta.sortable !== false;
+};
+
+/**
+ * Gets the display type for a column based on metadata
+ * 
+ * @param {string} columnKey - The column key/identifier  
+ * @param {Object} metadata - Columns metadata object
+ * @returns {string} - Column display type (e.g., 'virtual', 'computed', 'regular')
+ */
+export const getColumnDisplayType = (columnKey, metadata) => {
+    if (!metadata || typeof metadata !== 'object') {
+        return 'regular';
+    }
+    
+    const columnMeta = metadata[columnKey];
+    
+    if (!columnMeta || typeof columnMeta !== 'object') {
+        return 'regular';
+    }
+    
+    return columnMeta.type || 'regular';
+};
+
+/**
+ * Gets additional column properties from metadata
+ * 
+ * @param {string} columnKey - The column key/identifier
+ * @param {Object} metadata - Columns metadata object  
+ * @returns {Object} - Additional properties like tooltip, description, etc.
+ */
+export const getColumnProperties = (columnKey, metadata) => {
+    if (!metadata || typeof metadata !== 'object') {
+        return {};
+    }
+    
+    const columnMeta = metadata[columnKey];
+    
+    if (!columnMeta || typeof columnMeta !== 'object') {
+        return {};
+    }
+    
+    return {
+        tooltip: columnMeta.tooltip || null,
+        description: columnMeta.description || null,
+        virtual: columnMeta.virtual === true,
+        computed: columnMeta.computed === true,
+        searchable: columnMeta.searchable !== false,
+        filterable: columnMeta.filterable !== false
+    };
+};
+
+/**
+ * Merges column configuration with metadata to create enhanced column objects
+ * 
+ * @param {Array} columns - Original column configuration array
+ * @param {Object} metadata - Columns metadata object
+ * @returns {Array} - Enhanced column array with metadata applied
+ */
+export const mergeColumnsWithMetadata = (columns, metadata) => {
+    if (!Array.isArray(columns)) {
+        return [];
+    }
+    
+    if (!metadata || typeof metadata !== 'object') {
+        return columns;
+    }
+    
+    return columns.map(column => {
+        const columnKey = column.key || column.id || column.name;
+        
+        if (!columnKey) {
+            return column;
+        }
+        
+        const columnProperties = getColumnProperties(columnKey, metadata);
+        const isSortable = isColumnSortable(columnKey, metadata);
+        const displayType = getColumnDisplayType(columnKey, metadata);
+        
+        return {
+            ...column,
+            sortable: isSortable,
+            displayType,
+            virtual: columnProperties.virtual,
+            computed: columnProperties.computed,
+            tooltip: columnProperties.tooltip,
+            description: columnProperties.description,
+            searchable: columnProperties.searchable,
+            filterable: columnProperties.filterable,
+            // Keep original metadata for reference
+            _metadata: metadata[columnKey] || {}
+        };
+    });
+};
+
+/**
+ * Processes grid headers from API response and applies metadata
+ * 
+ * @param {Object} response - API response containing headers and metadata
+ * @returns {Array} - Processed headers with metadata applied
+ */
+export const processGridHeaders = (response) => {
+    // Extract headers from different possible response structures
+    const headers = response?.data?.data?.header || 
+                   response?.data?.header || 
+                   response?.header || 
+                   {};
+                   
+    const metadata = extractColumnsMetadata(response);
+    
+    if (!headers || typeof headers !== 'object') {
+        return [];
+    }
+    
+    // Convert headers object to array format expected by components
+    const headerEntries = Object.entries(headers);
+    
+    return headerEntries.map(([key, config]) => {
+        const isSortable = isColumnSortable(key, metadata);
+        const displayType = getColumnDisplayType(key, metadata);
+        const properties = getColumnProperties(key, metadata);
+        
+        return {
+            key,
+            label: config.label || key,
+            sort: config.sort || key,
+            type: config.type || 'text',
+            filter: config.filter || null,
+            onClick: config.onClick || null,
+            // Apply metadata
+            sortable: isSortable,
+            displayType,
+            virtual: properties.virtual,
+            computed: properties.computed,
+            tooltip: properties.tooltip,
+            description: properties.description,
+            searchable: properties.searchable,
+            filterable: properties.filterable,
+            // Keep original metadata for reference
+            _metadata: metadata[key] || {}
+        };
+    });
+};
+
+/**
+ * Gets CSS classes for a column header based on its metadata
+ * 
+ * @param {Object} header - Header configuration object with metadata
+ * @returns {Array} - Array of CSS class names
+ */
+export const getColumnHeaderClasses = (header) => {
+    const classes = [];
+    
+    if (header.sortable === false) {
+        classes.push('non-sortable');
+    } else {
+        classes.push('sortable');
+    }
+    
+    if (header.virtual) {
+        classes.push('virtual-column');
+    }
+    
+    if (header.computed) {
+        classes.push('computed-column');
+    }
+    
+    if (header.displayType) {
+        classes.push(`column-type-${header.displayType}`);
+    }
+    
+    return classes;
+};
+
+/**
+ * Gets inline styles for a column header based on its metadata
+ * 
+ * @param {Object} header - Header configuration object with metadata
+ * @returns {Object} - Style object for the header
+ */
+export const getColumnHeaderStyles = (header) => {
+    const styles = {};
+    
+    if (header.sortable === false) {
+        styles.cursor = 'default';
+        styles.opacity = 0.7;
+    } else {
+        styles.cursor = 'pointer';
+    }
+    
+    return styles;
+};
+
+/**
+ * Gets tooltip text for a column header based on its metadata
+ * 
+ * @param {Object} header - Header configuration object with metadata
+ * @returns {string|null} - Tooltip text or null if no tooltip needed
+ */
+export const getColumnHeaderTooltip = (header) => {
+    if (header.tooltip) {
+        return header.tooltip;
+    }
+    
+    if (header.sortable === false) {
+        if (header.virtual) {
+            return 'This is a virtual column and cannot be sorted';
+        }
+        if (header.computed) {
+            return 'This is a computed column and cannot be sorted';
+        }
+        return 'This column cannot be sorted';
+    }
+    
+    return null;
+};
+
+export default {
+    extractColumnsMetadata,
+    isColumnSortable,
+    getColumnDisplayType,
+    getColumnProperties,
+    mergeColumnsWithMetadata,
+    processGridHeaders,
+    getColumnHeaderClasses,
+    getColumnHeaderStyles,
+    getColumnHeaderTooltip
+};