ContentList

 import { ApolloClient, gql, InMemoryCache } from '@apollo/client';

import { CellClickedEvent, RowSelectedEvent } from 'ag-grid-community';

import { AgGridReact } from 'ag-grid-react';

import { AnyCnameRecord } from 'dns';

import moment from 'moment';

import React, { useEffect, useRef, useState } from 'react';

const GET_CONTENTS =

    gql`

query {

    contents {

        id

        title

        contentDescription

        feedbackComments

        dateCreated

        dateModified

      }

}

`;

export default function ContentList(props:any) {

    const gridRef = useRef(null); // Optional - for accessing Grid's API

    const [rowData, setRowData] = useState([]); // Set rowData to Array of Objects, one Object per Row

   

    const onRowSelection = (params: RowSelectedEvent) => {

        let data = params.data;

        if(data.id && props?.selectedContentId != data.id)

        {

           

            props.handleVisibility(data.id);

        }       

    };

    const client = new ApolloClient({

        uri: process.env.REACT_APP_MAGIC_API,

        cache: new InMemoryCache(),

    });

    // Each Column Definition results in one Column.

    const [columnDefs, setColumnDefs] = useState([

        { field: 'id', filter: true },

        { field: 'title', filter: true },

        { field: 'contentDescription', filter: true },

        { field: 'feedbackComments',headerName:'Approval Status',cellStyle: (params: { value: string; }) => {

            if (params.value === 'Approved') {

                return {color: '#fff', backgroundColor: 'green'};

            }

            else if (params.value === 'Rejected') {

                return {color: '#fff', backgroundColor: 'red'};

            }

            else if (params.value === 'Pending') {

                return {color: '#fff', backgroundColor: 'orange'};

            }

            return null;

        }, filter: true },        

        { field: 'dateCreated',cellRenderer: (data:any) => {

            return moment(data.dateCreated).format('MM/DD/YYYY')

        }, filter: 'agDateColumnFilter' },

        { field: 'dateModified', filter: 'agDateColumnFilter' }

    ]);

    // Example load data from sever

    useEffect(() => {

        client

            .query({

                query: GET_CONTENTS

            })

            .then((response) => setRowData(response.data.contents));

    }, []);

    return (

        <div className="ag-theme-alpine" style={{ height: 400 }}>

            <AgGridReact

                onRowClicked={onRowSelection}

                rowSelection='single'

                rowData={rowData}

                columnDefs={columnDefs}>

            </AgGridReact>

        </div>

    );

}

---------------------------------------------------------------