Custom UI Components

/**
 * Props provided to custom loading overlay component
 * @template TData - Type of row data objects
 * @template TContext - Type of grid context
 */
interface CustomLoadingOverlayProps<TData = any, TContext = any>
  extends ILoadingOverlayParams<TData, TContext> {}

import React from 'react';
import { CustomLoadingOverlayProps } from 'ag-grid-react';

const CustomLoadingOverlay: React.FC<CustomLoadingOverlayProps> = (props) => {
  return (
    <div 
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
        backgroundColor: 'rgba(255, 255, 255, 0.8)'
      }}
    >
      <div 
        style={{
          width: '40px',
          height: '40px',
          border: '4px solid #f3f3f3',
          borderTop: '4px solid #3498db',
          borderRadius: '50%',
          animation: 'spin 1s linear infinite'
        }}
      />
      <p style={{ marginTop: '16px', color: '#666' }}>
        Loading data...
      </p>
    </div>
  );
};

// Usage in grid options
const gridOptions = {
  loadingOverlayComponent: CustomLoadingOverlay,
  // ... other options
};

/**
 * Props provided to custom no-rows overlay component
 * @template TData - Type of row data objects
 * @template TContext - Type of grid context
 */
interface CustomNoRowsOverlayProps<TData = any, TContext = any> 
  extends INoRowsOverlayParams<TData, TContext> {}

import React from 'react';
import { CustomNoRowsOverlayProps } from 'ag-grid-react';

const CustomNoRowsOverlay: React.FC<CustomNoRowsOverlayProps> = (props) => {
  return (
    <div 
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
        color: '#666'
      }}
    >
      <div style={{ fontSize: '48px', marginBottom: '16px' }}>
        📋
      </div>
      <h3 style={{ margin: '0 0 8px 0' }}>No Data Available</h3>
      <p style={{ margin: 0, textAlign: 'center' }}>
        There are no rows to display. Try adjusting your filters or adding some data.
      </p>
    </div>
  );
};

// Usage in grid options
const gridOptions = {
  noRowsOverlayComponent: CustomNoRowsOverlay,
  // ... other options
};

/**
 * Props provided to custom tool panel components
 * @template TData - Type of row data objects
 * @template TContext - Type of grid context
 * @template TState - Type of component state
 */
interface CustomToolPanelProps<TData = any, TContext = any, TState = any>
  extends BaseToolPanelParams<TData, TContext, TState> {
  /** 
   * The current state for the component (used in grid state).
   * Initially set to the same value as initialState
   */
  state: TState | undefined;
  /** 
   * If using grid state, callback that should be called every time the state changes.
   * If not using grid state, not required.
   */
  onStateChange: (model: TState | undefined) => void;
}

import React, { useState, useEffect } from 'react';
import { CustomToolPanelProps } from 'ag-grid-react';

interface ColumnToolPanelState {
  hiddenColumns: string[];
  columnOrder: string[];
}

const CustomColumnToolPanel: React.FC<CustomToolPanelProps<any, any, ColumnToolPanelState>> = (props) => {
  const [columns, setColumns] = useState<any[]>([]);
  const [hiddenColumns, setHiddenColumns] = useState<string[]>(props.state?.hiddenColumns || []);

  useEffect(() => {
    // Get all columns from the grid
    const allColumns = props.columnApi.getAllColumns() || [];
    setColumns(allColumns);
  }, [props.columnApi]);

  useEffect(() => {
    // Update state when hidden columns change
    props.onStateChange({
      ...props.state,
      hiddenColumns: hiddenColumns,
      columnOrder: columns.map(col => col.getColId())
    });
  }, [hiddenColumns, columns, props]);

  const toggleColumnVisibility = (colId: string) => {
    const column = props.columnApi.getColumn(colId);
    if (column) {
      const isVisible = column.isVisible();
      props.columnApi.setColumnVisible(colId, !isVisible);
      
      if (isVisible) {
        setHiddenColumns([...hiddenColumns, colId]);
      } else {
        setHiddenColumns(hiddenColumns.filter(id => id !== colId));
      }
    }
  };

  return (
    <div style={{ padding: '16px' }}>
      <h3>Column Visibility</h3>
      <div>
        {columns.map(column => {
          const colId = column.getColId();
          const isVisible = column.isVisible();
          
          return (
            <div key={colId} style={{ marginBottom: '8px' }}>
              <label style={{ display: 'flex', alignItems: 'center' }}>
                <input
                  type="checkbox"
                  checked={isVisible}
                  onChange={() => toggleColumnVisibility(colId)}
                  style={{ marginRight: '8px' }}
                />
                {column.getColDef().headerName || colId}
              </label>
            </div>
          );
        })}
      </div>
    </div>
  );
};

// Usage in grid options
const gridOptions = {
  sideBar: {
    toolPanels: [
      {
        id: 'columns',
        labelDefault: 'Columns',
        labelKey: 'columns',
        iconKey: 'columns',
        toolPanel: CustomColumnToolPanel
      }
    ]
  },
  // ... other options
};

/**
 * Props provided to custom menu item components
 * @template TData - Type of row data objects
 * @template TContext - Type of grid context
 */
interface CustomMenuItemProps<TData = any, TContext = any> 
  extends BaseMenuItemParams<TData, TContext> {
  /** The active status of the item (is it currently hovered with the mouse, or navigated to via the keyboard) */
  active: boolean;
  /** If the item is a sub menu, whether it is currently opened or closed */
  expanded: boolean;
  /** Callback that should be called every time the active status is updated (if providing custom behaviour) */
  onActiveChange: (active: boolean) => void;
}

import React, { useState } from 'react';
import { CustomMenuItemProps, useGridMenuItem } from 'ag-grid-react';

const CustomMenuItem: React.FC<CustomMenuItemProps> = (props) => {
  const [isHovered, setIsHovered] = useState(props.active);

  // Integrate with grid menu item callbacks
  useGridMenuItem({
    // Implement required menu item methods here
  });

  const handleClick = () => {
    // Execute the menu item action
    if (props.action) {
      props.action();
    }
  };

  const handleMouseEnter = () => {
    setIsHovered(true);
    props.onActiveChange(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
    props.onActiveChange(false);
  };

  return (
    <div
      onClick={handleClick}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={{
        padding: '8px 16px',
        cursor: 'pointer',
        backgroundColor: isHovered ? '#f0f0f0' : 'transparent',
        display: 'flex',
        alignItems: 'center',
        gap: '8px'
      }}
    >
      {props.icon && <span>{props.icon}</span>}
      <span>{props.name}</span>
      {props.subMenu && (
        <span style={{ marginLeft: 'auto' }}>
          {props.expanded ? '▼' : '▶'}
        </span>
      )}
    </div>
  );
};

// Usage in context menu configuration
const getContextMenuItems = (params: any) => {
  return [
    {
      name: 'Custom Action',
      action: () => console.log('Custom action clicked'),
      menuItem: CustomMenuItem
    }
  ];
};

const gridOptions = {
  getContextMenuItems,
  // ... other options
};

/**
 * Props provided to custom status panel components
 * @template TData - Type of row data objects  
 * @template TContext - Type of grid context
 */
interface CustomStatusPanelProps<TData = any, TContext = any> 
  extends IStatusPanelParams<TData, TContext> {}

import React, { useState, useEffect } from 'react';
import { CustomStatusPanelProps } from 'ag-grid-react';

const CustomStatusPanel: React.FC<CustomStatusPanelProps> = (props) => {
  const [rowCount, setRowCount] = useState(0);
  const [selectedCount, setSelectedCount] = useState(0);

  useEffect(() => {
    const updateCounts = () => {
      const totalRows = props.api.getDisplayedRowCount();
      const selectedRows = props.api.getSelectedRows().length;
      
      setRowCount(totalRows);
      setSelectedCount(selectedRows);
    };

    // Listen for relevant events
    props.api.addEventListener('modelUpdated', updateCounts);
    props.api.addEventListener('selectionChanged', updateCounts);
    
    // Initial update
    updateCounts();

    return () => {
      props.api.removeEventListener('modelUpdated', updateCounts);
      props.api.removeEventListener('selectionChanged', updateCounts);
    };
  }, [props.api]);

  return (
    <div 
      style={{ 
        display: 'flex', 
        alignItems: 'center', 
        padding: '0 16px',
        fontSize: '14px',
        color: '#666'
      }}
    >
      <span>
        Rows: {rowCount} | Selected: {selectedCount}
      </span>
    </div>
  );
};

// Usage in grid options
const gridOptions = {
  statusBar: {
    statusPanels: [
      {
        statusPanel: CustomStatusPanel,
        align: 'left'
      }
    ]
  },
  // ... other options
};

/**
 * Props provided to custom Drag and Drop Image components
 * @template TData - Type of row data objects
 * @template TContext - Type of grid context
 */
interface CustomDragAndDropImageProps<TData = any, TContext = any>
  extends IDragAndDropImageParams<TData, TContext> {
  /** The label provided by the grid about the item being dragged */
  label: string;
  /** The name of the icon provided by the grid about the current drop target */
  icon: string | null;
  /** True if the grid is attempting to scroll horizontally while dragging */
  shake: boolean;
}

import React from 'react';
import { CustomDragAndDropImageProps } from 'ag-grid-react';

const CustomDragImage: React.FC<CustomDragAndDropImageProps> = (props) => {
  return (
    <div 
      style={{
        padding: '8px 12px',
        backgroundColor: '#333',
        color: 'white',
        borderRadius: '4px',
        fontSize: '12px',
        transform: props.shake ? 'translateX(2px)' : 'none',
        transition: 'transform 0.1s',
        display: 'flex',
        alignItems: 'center',
        gap: '8px'
      }}
    >
      {props.icon && <span>{props.icon}</span>}
      <span>{props.label}</span>
    </div>
  );
};

// Usage in grid options
const gridOptions = {
  dragAndDropImageComponent: CustomDragImage,
  // ... other options
};

/**
 * Hook to allow custom menu item component callbacks to be provided to the grid
 * @param callbacks - Menu item callback implementations
 */
function useGridMenuItem(callbacks: CustomMenuItemCallbacks): void;

/**
 * Callbacks for custom menu item components
 */
interface CustomMenuItemCallbacks extends BaseMenuItem {}