lcp-visualizer/blocks/components/LCPDataGrid.js

import { useState, useRef, useEffect } from '@wordpress/element';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const LCPDataGrid = () => {
    const gridData = [
        { Department2: 'Sheriffs Office 2', Budget: '150000' },  
        { Department2: 'Treasurer2', Budget: '10000' },  
        { Department2: 'Assessor2', Budget: '40000' },  
    ];

    // Helper function to convert index to letters, accounting for 'A1', 'B1', 'C1', etc.
    const getColumnLabel = (index) => {
        const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        let label = '';

        while (index >= 0) {
            label = alphabet[index % 26] + label;
            index = Math.floor(index / 26) - 1;
        }

        return label;
    };

    function lcpDataTypeParser(params) {
        if (params.node.rowPinned) {
            return params.newValue;
        } else {
            return Number(params.newValue);
        }
    }

    // Create columnDefs dynamically
    const [columnDefs, setColumnDefs] = useState([]);
    const [pinnedTopRowData, setPinnedTopRowData] = useState([]);

    useEffect(() => {
        if (columnDefs.length > 0) return; // Prevent rerun if columnDefs already set

        if (gridData.length > 0) {
            const keys = Object.keys(gridData[0]); // Get the keys from the first row (Department2, Budget, etc.)

            const columns = keys.map((key, index) => {
                return {
                    headerName: getColumnLabel(index),  // 'A', 'B', 'C', ...
                    field: key, // Field will match the key (Department2, Budget, etc.)
                    valueParser: lcpDataTypeParser,
                };
            });

            // Set the pinned top row data with the actual field names (like 'Department2', 'Budget')
            const topRowData = keys.reduce((acc, key) => {
                acc[key] = key; // Set key as the value in top row (use field names)
                return acc;
            }, {});

            // Ensure pinnedTopRowData is set with correct data
            setPinnedTopRowData([topRowData]);

            // Add the row number column as the first column
            const rowNumberColumn = {
                headerName: '',
                valueGetter: (params) => {
                    const rowIndex = params.node.rowPinned ? params.node.rowIndex + 1 : params.node.rowIndex + 2;
                    return rowIndex;
                },
                suppressMovable: true,
                editable: false,
                filter: false,
                sortable: false,
                width: 45,
                resizable: false,
                flex: 0,
                cellStyle: { backgroundColor: '#e0e0e0' },
            };

            setColumnDefs([rowNumberColumn, ...columns]);  // Set columns along with row number column
        }
    }, [gridData, columnDefs]); // R

    const [rowData] = useState(gridData);

    // AG Grid instance reference
    const gridRef = useRef(null);
    const [gridApi, setGridApi] = useState(null); // Store grid API in state

    // Button click handler to add a new row
    const addRow = () => {
        if (gridApi) {
            const newRow = {}; // Empty Row
            // Use the grid API to add the new row
            gridApi.applyTransaction({ add: [newRow] });


        } else {
            console.log('Grid is not ready yet');
        }
    };

    // Default Column Properties
    const defaultColDef = {
        flex: 1,
        minWidth: 45,
        editable: (params) => {
            if (params.node.rowPinned) {
                return false;
            } else {
                return true;
            }
        },
        sortable: true,
        filter: true,
        suppressMovable: true,
        cellDataType: false, //By default column can be any data type 
        cellStyle: (params) => {
            if (params.node.rowPinned) {
                return { backgroundColor: 'rgb(197, 219, 229)' };
            }
        }
    };

    const gridOptions = {
        rowDragManaged: true,
        animateRows: true,
        rowHeight: 35,
        getRowStyle: (params) => {
            if (params.node.rowPinned) {
                return { backgroundColor: 'rgb(197, 219, 229)' }; // Light gray for pinned rows
            }
            return null; // No special style for non-pinned rows
        }
    };

    const onGridReady = (params) => {
        // Store the grid API when the grid is ready
        setGridApi(params.api);
    };

    // Reset row number on sorted
    const onSortChanged = (e) => {
        e.api.refreshCells();
    };

    // Reset row number on filtered
    const onFilterChanged = (e) => {
        e.api.refreshCells();
    };

    return (
        <div>
            <div
                id="lcp-data-grid"
                className="ag-theme-alpine"
                style={{ width: '100%', height: '300px' }}
            >
                <AgGridReact
                    ref={gridRef}
                    columnDefs={columnDefs}
                    rowData={rowData}
                    defaultColDef={defaultColDef}
                    gridOptions={gridOptions}
                    pinnedTopRowData={pinnedTopRowData}
                    pinnedLeftColCount={1}
                    onSortChanged={onSortChanged}
                    onFilterChanged={onFilterChanged}
                    onGridReady={onGridReady}
                />
            </div>

            {/* Button outside the grid */}
            <div>
                <button onClick={addRow}>Add Row</button>
            </div>
        </div>
    );
};

export default LCPDataGrid;