Smart AI in React Data Grid

The AI Toolkit integrates natural language interaction into the EJ2 React Grid. By connecting the grid to a Large Language Model (LLM) such as OpenAI GPT‑4o‑mini, users can execute grid operations such as filtering, sorting, grouping, and pagination through simple text commands. Examples of grid operations:

  • “Find iPhone 15 Pro”
  • “Sort the Amount column from low to high”
  • “Group by Status column”
  • “Go to page 3”

This feature is particularly valuable for enterprise applications where efficient and user-friendly data manipulation is essential.

How it works?

The AI Toolkit uses a strict prompt and JSON output strategy to ensure reliable and secure grid manipulation. Here’s the workflow:

  1. User input: The user enters a natural language query in the AI Assist panel.
  2. Prompt construction: The client builds a strong prompt that combines the user query, column metadata (including field names and known values), and strict rules enforcing JSON-only output.
  3. LLM request: The prompt is sent to a secure backend proxy (api/chat), which calls the LLM (e.g., GPT-4o-mini).
  4. Response processing: The LLM returns a JSON object containing operations like: 
    {
 "filter": [{ "field": "status", "operator": "equal", "value": "Pending" }],
 "sort": [{ "field": "amount", "direction": "Ascending" }],
 "group": [{ "field": "quantity" }],
 "message": "Filtered by status = Pending, sorted by amount ascending and group by quantity."
}
  5. Apply changes: The grid state can be updated either by modifying properties directly or by using Syncfusion Grid APIs, based on the JSON response. After applying the changes, the grid should be refreshed to reflect the updated state. The following example demonstrates how to update the grid state using properties:
    gridInstance.setProperties({ 
        filterSettings: { columns: data.filter },
        sortSettings = { columns: data.sort },
        groupSettings = { columns: data.group },
        pageSettings = { currentPage: data.page.pageNumber }
    }, true);
    gridInstance.refresh();

Handle grid features

AI is capable of performing a wide range of data operations and manipulations based on the provided input. The following features are handled in this user guide for executing actions using AI:

  • Filtering – All Excel-style operators supported.
  • Sorting – Multi-column, ascending/descending.
  • Grouping – Group by one or more fields.
  • Paging – Navigate to specific pages.
  • Clearing – Remove filters, sorting, or grouping.

Integrate AI with grid

To enable the AI Toolkit in your Syncfusion React Grid project, the following prerequisites must be satisfied:

Step 1: Syncfusion React Grid installed and configured

Follow the getting started to set up the grid in your application.

Step 2: Include Syncfusion’s AI assist toolbar

Add the AI Assist toolbar component to your grid UI for AI interactions.

<AIAssistViewComponent id="ai-grid-aiassistview" ref={(assist) => assistInstance = assist} toolbarSettings={toolbarSettings} promptRequest={onPromptRequest} promptSuggestionsHeader='Suggestions' responseItemTemplate={responseTemplate} >
    <ViewsDirective>
        <ViewDirective type='Assist' name=' Ask AI'></ViewDirective>
    </ViewsDirective>
</AIAssistViewComponent>

Step 3: LLM API key

Obtain an API key from your preferred Large Language Model provider, such as OpenAI, Azure OpenAI, or Google Gemini.

Step 4: Backend proxy

Implement a secure backend service to handle requests to the LLM API. This ensures your API key remains protected and allows you to apply rate limiting and security measures.

Step 5: Basic HTTP knowledge

Familiarity with making HTTP requests using fetch or axios is required for client-server communication.

Build the prompt

The following prompt includes predefined rules to handle grid actions such as filtering, sorting, grouping, and pagination using OpenAI GPT-4o-mini. Similarly, you can create your own predefined rules to manage grid operations. To ensure consistency and machine-readability, use a strict template that enforces JSON-only output.

Convert the following natural language query into a JSON object representing Syncfusion Query operations.

    Rules:
    - Output only the JSON object, with no extra text.
    - Available columns: ${JSON.stringify(columns)}.
    - Sort direction must be either "Ascending" or "Descending".
    
    Action Handling:
    - Include only actions explicitly mentioned in the query: filter, sort, page, group, clearFilter, clearSort, clearGroup.
    - Supported filter operators: startswith, endswith, contains, doesnotstartwith, doesnotendwith, doesnotcontain, equal, notequal, greaterthan, greaterthanorequal, lessthan, lessthanorequal, isnull, isnotnull, isempty, isnotempty, between, in, notin.
    - If the query involves only filtering, include only the "filter" key.
    - If the query involves only sorting, include only the "sort" key.
    - For clear actions:
    - Use clearFilter: [] to clear all filters.
    - Use clearSort: [] to clear all sorting.
    - Use clearGroup: [] to clear all grouping.
    - To clear specific fields, include them as arrays: clearFilter: ["field1"], clearSort: ["field2"], clearGroup: ["field3"].
    
    Supported Operations:
    - filter: [{ field, operator, value (array for "in"/"notin", otherwise single value), ignoreCase }]
    - sort: [{ field, direction }] // columns not available return [].
    - page: { pageNumber }  // for page navigation not pagesize.
    - group: [fields] - return group: [] if the columns not available.
    
    Additional Requirement:
    - sort/group/filter only by available columns.
    - Include a "message" field describing the interpreted query action and expected behavior.
    - Handled actions: paging, filtering, sorting, grouping.
    - If the action is not handled by this schema, need to clearly explain the action not handled in this schema and how to achieve it in Syncfusion React Grid. Dont explain the JSON structure.
    User Input: ${text}

Apply grid actions

Convert the AI-generated prompt result into JSON format and execute the grid action based on that result. When using your own prompt, ensure the response is returned in JSON format. Parse the JSON and apply the action to the grid as shown below:

    let jsonResult = result;
    if (result.indexOf("```json") !== -1) {
        jsonResult = result.split("```json")[1].split("```")[0].trim();
    }
    let data;
    data = JSON.parse(jsonResult);
    executeGridAction(data, gridInstance);
    assistInstance.addPromptResponse({ prompt: text, response: data });

The following code example demonstrates how to create a assistive grid to perform grid action using natural language.

import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, Sort, Filter, Group, Page, Search, type ToolbarItems, type FilterSettingsModel } from '@syncfusion/ej2-react-grids';
import { AIAssistViewComponent, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-interactive-chat';
import { fetchAI } from './AIModel';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { purchaseDetails, type PurchaseDetailsArgs } from './datasource';
import { createRef } from "react";


let dialog!: DialogComponent;
let grid!: GridComponent;
let assistView!: AIAssistViewComponent;
let suggestionListRef = createRef<any>();

function AIAssistiveGrid() {

    // Toolbar options for Grid with AI Assist button.
    const toolbarOptions: object[] = [{text: 'AI Assist', tooltipText: 'AI Assist', prefixIcon: 'e-assistview-icon', id: 'ai-assist-btn', align: 'Right' }];

    // Handles the Grid toolbar button click action. If the AI Assist button clicked shows the AI Assist dialog.
    const toolbarClick = (args: any) => {
        if (args.item.id === 'ai-assist-btn') {
            const gridRect = grid.element.getBoundingClientRect();
            const toolbarRect = document.getElementById('ai-grid_toolbarItems')!.getBoundingClientRect();
            const targetRect = (args.originalEvent.target as HTMLElement).closest('.e-toolbar-item')!.getBoundingClientRect();
            const x = targetRect.left - gridRect.left - (parseInt(dialog.width.toString()));
            const y = (toolbarRect.top + toolbarRect.height) - gridRect.top;
            dialog.position = { X: x, Y: y };
            dialog.show();
        }
    }

    // Configures toolbar settings for AI assist dialog.
    const toolbarSettings: any = {
        items: [
            { tooltip: 'Start New Chat', iconCss: 'e-icons e-rename', align: 'Right' },
            { tooltip: 'Clear', iconCss: 'e-icons e-refresh', align: 'Right' },
            { tooltip: 'Close', iconCss: 'e-icons e-icon-dlg-close', align: 'Right' },
        ],
        itemClicked: (args: any) => {
            if (args.item.iconCss === 'e-icons e-icon-dlg-close') {
                dialog.hide()
            }
            if (args.item.iconCss === 'e-icons e-rename') {
                assistView.prompts = [];
            }
            if (args.item.iconCss === 'e-icons e-refresh') {
                assistView.prompts = [];
                grid.setProperties({
                    sortSettings: { columns: [] },
                    filterSettings: { columns: [] },
                    groupSettings: { columns: [] },
                });
                grid.refresh();
            }
        }
    };

    // Renders response template for AI prompts.
    const responseTemplate = (props: { prompt: string, response: string }) => {
        return (
            <div className="response-item-content">
                <div className="response-header">
                    <span className="e-icons e-assistview-icon"></span>
                    {props.response}
                </div>
            </div>
        );
    };

    // Handles prompt request execution.
    const onPromptRequest = (args: any) => {
        (assistView as any).stopResponding.classList.remove('e-btn-active');
        assistView.scrollToBottom();
        const columns = grid.columns.map((col: any) => { return { field: col.field } });
        columns.forEach((col: any) => {
            if (col.field === 'status') {
                col.values = ['Completed', 'Pending', 'Failed', 'Processing'];
            }
            else if (col.field === 'paymentMethod') {
                col.values = ['Cheque', 'Credit Card', 'Paypal', 'Online Transfer'];
            }
        })
        fetchAI(args.prompt, grid, dialog, assistView, columns);
    };

    // Sets up suggestion list click handler.
    const created = (): void => {
        suggestionListRef.current.addEventListener('click', (event: any) => {
            if (event.target.tagName === 'LI') {
                const clickedPill = event.target;
                const pillText = clickedPill.textContent;
                assistView.executePrompt(pillText);
            }
        });
    }

    // Renders footer template with suggestion list.
    const dialogFooterTemplate = () => {
        return (
            <div className="e-suggestions">
                <div className="e-suggestion-header">Suggestions</div>
                <div className="e-suggestion-list">
                    <ul ref={suggestionListRef}>
                        <li>Find iPhone 15 Pro</li>
                        <li>Sort Amount from lowest to highest</li>
                        <li>Payment status not completed</li>
                        <li>Group status column</li>
                        <li>Clear Filtering</li>
                        <li>Clear Sorting</li>
                        <li>Remove Grouping</li>
                    </ul>
                </div>
            </div>
        );
    }

    const filterSettings: FilterSettingsModel = { type: 'Excel' };

    return (
        <div>
            <div id='assistive-grid'>
                <DialogComponent ref={(dialogIns: DialogComponent) => dialog = dialogIns as DialogComponent} target='#ai-grid' id='ai-assist-dialog' width='500px' visible={false} height='500px' footerTemplate={dialogFooterTemplate} created={created}>
                    <AIAssistViewComponent id="ai-grid-aiassistview" ref={(assist: AIAssistViewComponent) => assistView = assist as AIAssistViewComponent} toolbarSettings={toolbarSettings} promptRequest={onPromptRequest} promptSuggestionsHeader='Suggestions' responseItemTemplate={responseTemplate} >
                <ViewsDirective>
                    <ViewDirective type='Assist' name=' Ask AI'></ViewDirective>
                </ViewsDirective>
            </AIAssistViewComponent>
                </DialogComponent>
                <GridComponent ref={(gridIns: GridComponent) => grid = gridIns as GridComponent} id="ai-grid" height={540} width={1500} dataSource={purchaseDetails} allowFiltering={true} allowSorting={true} allowGrouping={true} filterSettings={filterSettings} allowPaging={true} toolbar={toolbarOptions} toolbarClick={toolbarClick} >
                    <ColumnsDirective>
                        <ColumnDirective field="TransactionID" headerText="Transaction ID" width="100"
                        />
                        <ColumnDirective field="CustomerName" headerText="Customer Name" width="140" textAlign="Center"
                            template={(data: PurchaseDetailsArgs) => (
                                <div >
                                    <p>{data.CustomerName}</p>
                                    <p className="email">{data.Email}</p>
                                </div>
                            )} />
                        <ColumnDirective field="ProductName" headerText="Product" width="120" textAlign="Left"
                            template={(data: PurchaseDetailsArgs) => (
                                <div className='product-items'>
                                    <img className="rounded" src={`src/sales-transactions-table/${data.ProductImage}`} width={40} height={40} alt="product image" />
                                    <p>{data.ProductName}</p>
                                </div>
                            )}
                        />
                        <ColumnDirective field="Quantity" headerText="Quantity" width="90" textAlign="Right" />
                        <ColumnDirective field="Amount" headerText="Amount" width="90" format="c2" textAlign="Right" />
                        <ColumnDirective field="PurchaseDate" headerText="Purchase Date" width="130" format= textAlign="Right" />
                        <ColumnDirective field="PaymentMethod" headerText="Payment Method" width="110" />
                        <ColumnDirective field="Status" headerText="Status" width="120" textAlign='Right'
                            template={(data: PurchaseDetailsArgs) => (
                                <div >
                                    <span className={`e-badge ${data.Status === "Completed" ? "e-badge-success" : data.Status === "Pending" ? "e-badge-info" : data.Status === "Processing" ? "e-badge-warning" : data.Status === "Failed" ? "e-badge-danger" : ""} !px-2`}>{data.Status}</span>
                                </div>
                            )}
                        />
                    </ColumnsDirective>
                    <Inject services={[Toolbar, Sort, Filter, Group, Page, Search]} />
                </GridComponent>
            </div>
        </div>
    )
}

export { AIAssistiveGrid };
import { GridComponent } from '@syncfusion/ej2-react-grids';
import { type Sort, type GridActionData, type Filter } from './datasource';

export const executeGridAction = (data: GridActionData, grid: GridComponent) => {
    if (data.filter && data.filter.length) {
        data.filter.forEach((filter: Filter) => {
            grid.filterByColumn(filter.field, filter.operator, filter.value);
        })
    }
    if (data.clearFilter) {
        if (data.clearFilter.length === 0) {
            grid.clearFiltering();
        } else {
            grid.clearFiltering(data.clearFilter);
        }
    }
    if (data.sort && data.sort.length) {
        data.sort.forEach((sort: Sort) => {
            grid.sortColumn(sort.field, sort.direction, true);
        })
    }
    else if (data.clearSort) {
        grid.clearSorting();
    }
    if (data.page && data.page.pageNumber) {
        grid.goToPage(data.page.pageNumber);
    }
    if (data.group && data.group.length) {
        const groupColumns: string[] = [...(grid.groupSettings.columns ?? [])];
        if (groupColumns.indexOf(data.group[0]) === -1) {
            grid.groupColumn(data.group[0]);
        }
    }
    if (data.clearGroup) {
        if (data.clearGroup.length === 0) {
            grid.clearGrouping();
        } else {
            const groupColumns: string[] = [...(grid.groupSettings.columns ?? [])];
            if (groupColumns.indexOf(data.clearGroup[0]) !== -1) {
                grid.ungroupColumn(data.clearGroup[0]);
            }
        }
    }
}
import './App.css'
import { AIAssistiveGrid } from './Grid'

function App() {

  return (
    <div>
      <AIAssistiveGrid />
    </div>
  )
}

export default App
async function fingerPrint() {
  try {
    var canvas = document.body.appendChild(document.createElement('canvas'));
    canvas.width = 600;
    canvas.height = 300;
    canvas.style.display = "none";
    const ctx: any = canvas.getContext("2d");
    const size = 24;
    const diamondSize = 28;
    const gap = 4;
    const startX = 30;
    const startY = 30;
    const blue = "#1A3276";
    const orange = "#F28C00";
    const colorMap = [
      ["blue", "blue", "diamond"],
      ["blue", "orange", "blue"],
      ["blue", "blue", "blue"]
    ];
    const drawSquare = (x, y, color) => {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, size, size);
    };
    const drawDiamond = (centerX, centerY, size, color) => {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(centerX, centerY - size / 2);
    ctx.lineTo(centerX + size / 2, centerY);
    ctx.lineTo(centerX, centerY + size / 2);
    ctx.lineTo(centerX - size / 2, centerY);
    ctx.closePath();
    ctx.fill();
    };
    for (let row = 0; row < 3; row++) {
      for (let col = 0; col < 3; col++) {
        const type = colorMap[row][col];
        const x = startX + col * (size + gap);
        const y = startY + row * (size + gap);
        if (type === "blue") drawSquare(x, y, blue);
        else if (type === "orange") drawSquare(x, y, orange);
        else if (type === "diamond") drawDiamond(x + size / 2, y + size / 2, diamondSize, orange);
      }
    }
    ctx.font = "20px Arial";
    ctx.fillStyle = blue;
    ctx.textBaseline = "middle";
    ctx.fillText("Syncfusion", startX + 3 * (size + gap) + 20, startY + size + gap);
    ctx.globalCompositeOperation = "multiply";
    ctx.fillStyle = "rgb(255,0,255)";
    ctx.beginPath(); ctx.arc(50, 200, 50, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = "rgb(0,255,255)";
    ctx.beginPath(); ctx.arc(100, 200, 50, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = "rgb(255,255,0)";
    ctx.beginPath(); ctx.arc(75, 250, 50, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = "rgb(255,0,255)";
    ctx.beginPath();
    ctx.arc(200, 200, 75, 0, Math.PI * 2, true);
    ctx.arc(200, 200, 25, 0, Math.PI * 2, true);
    ctx.fill("evenodd");
    const sha256 = async function (str) {
      const encoder = new TextEncoder();
      const data = encoder.encode(str);
      const hashBuffer = await crypto.subtle.digest('SHA-256', data);
      const hashArray = Array.from(new Uint8Array(hashBuffer));
      return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
    };
    const visitorID = await sha256(canvas.toDataURL());
    document.body.removeChild(canvas); // Clean up the canvas element
    return visitorID;
  }
  catch (error) {
    console.error(error);
    return null;
  }
}

const serverAIRequest = async (settings: any) => {
    try {
        const visitorId = await fingerPrint();
        let response = await fetch('http://localhost:3000/api/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                visitorId,
                messages: settings
            })
        })
        let result = await response.json();
        if (!response.ok) {
            throw new Error(result.error || 'Network response was not ok');
        }
        result.response = result.response.replace('END_INSERTION', '');
        return result.response;
    } catch (error: any) {
        if (error.message.includes('token limit')) {
            (document.querySelector('.banner-message') as any).innerHTML = error.message;
            (document.querySelector('.sb-token-header') as any).classList.remove('sb-hide');
        }
        else {
            console.error('There was a problem with your fetch operation:', error);
        }
    }
};

export {serverAIRequest};
import { serverAIRequest } from './AI-service';
import { executeGridAction } from './GridAction';
import { GridComponent} from '@syncfusion/ej2-react-grids';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';

function fetchAI(text: string | undefined, grid: GridComponent, dialog: DialogComponent, assistView: AIAssistViewComponent, columns: Object) {
    let textArea = `Convert the following natural language query into a JSON object representing Syncfusion Query operations.

    Rules:
    - Output only the JSON object, with no extra text.
    - Available columns: ${JSON.stringify(columns)}.
    - Sort direction must be either "Ascending" or "Descending".
    
    Action Handling:
    - Include only actions explicitly mentioned in the query: filter, sort, page, group, clearFilter, clearSort, clearGroup.
    - Supported filter operators: startswith, endswith, contains, doesnotstartwith, doesnotendwith, doesnotcontain, equal, notequal, greaterthan, greaterthanorequal, lessthan, lessthanorequal, isnull, isnotnull, isempty, isnotempty, between, in, notin.
    - If the query involves only filtering, include only the "filter" key.
    - If the query involves only sorting, include only the "sort" key.
    - For clear actions:
    - Use clearFilter: [] to clear all filters.
    - Use clearSort: [] to clear all sorting.
    - Use clearGroup: [] to clear all grouping.
    - To clear specific fields, include them as arrays: clearFilter: ["field1"], clearSort: ["field2"], clearGroup: ["field3"].
    
    Supported Operations:
    - filter: [{ field, operator, value (array for "in"/"notin", otherwise single value), ignoreCase }]
    - sort: [{ field, direction }] // columns not available return []
    - page: { pageNumber }  // for page navigation not pagesize
    - group: [fields] - return group: [] if the columns not available.
    
    Additional Requirement:
    - sort/group/filter only by available columns.
    - Include a "message" field describing the interpreted query action and expected behavior.
    - Handled actions: paging, filtering, sorting, grouping.
    - If the action is not handled by this schema, need to clearly explain the action not handled in this schema and how to achieve it in Syncfusion React Grid. Dont explain the JSON structure.
    User Input: ${text}`;

    let aiOutput = serverAIRequest({ messages: [{ role: 'user', content: textArea }] });
    aiOutput.then((result: string) => {
        if (!result) {
            return;
        }
        let jsonResult = result;
        if (result.indexOf("```json") !== -1) {
            jsonResult = result.split("```json")[1].split("```")[0].trim();
        }
        let data;
        try {
            data = JSON.parse(jsonResult);
            executeGridAction(data, grid);
        } catch (error) {
            assistView.addPromptResponse({ prompt: error, response: error });
            return;
        }
        assistView.addPromptResponse({ response: data.message });
    });
}

export {fetchAI};
#ai-grid-aiassistview .response-header .e-assistview-icon:before {
  margin-right: 10px;
} 

#ai-grid-aiassistview .response-item-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 20px
}

#ai-grid-aiassistview .response-item-content .response-header {
  display: flex;
  align-items: center;
}

#ai-grid-aiassistview .response-item-content .assist-response-content {
  margin-left: 35px;
}

#ai-grid-aiassistview .response-item-content .response-header .e-assistview-icon:before {
  margin-right: 10px;
}

#ai-grid-aiassistview .e-response-item-template .e-toolbar-items {
  margin-left: 35px;
}

#ai-grid-aiassistview.e-aiassistview .e-footer {
  width: 90%;
}

#ai-grid-aiassistview.e-aiassistview .e-output-container {
  width: 100%;
}
#ai-grid-aiassistview.e-aiassistview .e-content-container .e-content {
  overflow-y: auto;
}
#ai-grid-aiassistview .e-response-item-template .e-content-footer,
#ai-grid-aiassistview .e-prompt-toolbar {
  display: none;
}

#ai-grid-aiassistview.e-aiassistview .e-view-container {
  margin: 0;
}

#ai-grid .e-badge {
  padding: 6px;
  width: 70px;
}

#ai-grid .email {
  color: gray;
}

#ai-grid .product-items {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
#ai-grid .product-items p {
  margin: 0px;
}


#ai-assist-dialog .e-suggestions {
  max-width: 100%;
  padding: 0 0 10px 0;
}

#ai-assist-dialog .e-suggestion-header {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 14px;
  text-align: left;
}

#ai-assist-dialog .e-suggestion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#ai-assist-dialog .e-suggestion-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
}

#ai-assist-dialog .e-suggestion-list li {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
  white-space: normal;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 5px 2px;
}

#assistive-grid {
  margin: 10px;
}

#ai-assist-dialog .e-suggestion-list li:hover {
  background: rgba(28, 27, 31, 0.05);
}

#dialog-target .e-dialog .e-footer-content {
  border-top: 1px solid rgb(209, 213, 219);
}

.fluent-dark #ai-assist-dialog .e-suggestion-list li,
.fluent2-dark #ai-assist-dialog .e-suggestion-list li,
.tailwind-dark #ai-assist-dialog .e-suggestion-list li,
.material-dark #ai-assist-dialog .e-suggestion-list li,
.bootstrap5\.3-dark #ai-assist-dialog .e-suggestion-list li,
.tailwind3-dark #ai-assist-dialog .e-suggestion-list li,
.tailwind33-dark #ai-assist-dialog .e-suggestion-list li,
.fabric-dark #ai-assist-dialog .e-suggestion-list li,
.bootstrap-dark #ai-assist-dialog .e-suggestion-list li,
.bootstrap4-dark #ai-assist-dialog .e-suggestion-list li,
.bootstrap5-dark #ai-assist-dialog .e-suggestion-list li,
.highcontrast #ai-assist-dialog .e-suggestion-list li {
  box-shadow: 0 2px 4px rgb(228 228 228 / 15%);
}
export interface Filter {
  field: string;
  operator: string;
  value: number | boolean | string | Date;
}

export interface Sort {
  field: string;
  direction: 'Ascending' | 'Descending';
}

export interface Page {
  pageNumber: number;
  pageSize: number;
}

export interface GridActionData {
  filter?: Filter[];
  clearFilter?: string[];
  sort?: Sort[];
  clearSort?: string[];
  page?: Page;
  group?: string[];
  clearGroup?: string[];
}

export interface PurchaseDetailsArgs {
    ID?: number;
    TransactionID?: string;
    CustomerName?: string;
    Email?: string;
    PurchaseDate?: Date;
    ProductName?: string;
    ProductImage?: string;
    Quantity?: number;
    Amount?: number;
    PaymentMethod?: string;
    Status?: string;
}

export let purchaseDetails: Object[] = [
    {
    ID: 1,
    TransactionID: "TRX202501",
    CustomerName: "Jane Smith",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-20"),
    ProductName: "iMac 24",
    ProductImage: "imac-24.png",
    Quantity: 1,
    Amount: 1199.99,
    PaymentMethod: "Credit Card",
    Status: "Completed"
  },
  {
    ID: 2,
    TransactionID: "TRX202502",
    CustomerName: "Mark Johnson",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-20"),
    ProductName: "Mac Mini",
    ProductImage: "mac-mini.png",
    Quantity: 3,
    Amount: 1797.00,
    PaymentMethod: "PayPal",
    Status: "Pending"
  },
  {
    ID: 3,
    TransactionID: "TRX202503",
    CustomerName: "Emily White",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-20"),
    ProductName: "HomePod Mini",
    ProductImage: "homepod-mini.png",
    Quantity: 6,
    Amount: 594.00,
    PaymentMethod: "Online Transfer",
    Status: "Failed"
  },
  {
    ID: 4,
    TransactionID: "TRX202504",
    CustomerName: "Tom Harris",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-21"),
    ProductName: "iPhone 13",
    ProductImage: "iphone-13.png",
    Quantity: 2,
    Amount: 1399.98,
    PaymentMethod: "Credit Card",
    Status: "Processing"
  },
  {
    ID: 5,
    TransactionID: "TRX202505",
    CustomerName: "Lisa Green",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-21"),
    ProductName: "Apple Watch Series 7",
    ProductImage: "apple-watch-series-7.png",
    Quantity: 4,
    Amount: 1596.00,
    PaymentMethod: "PayPal",
    Status: "Completed"
  },
  {
    ID: 6,
    TransactionID: "TRX202506",
    CustomerName: "Olivia Adams",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-21"),
    ProductName: "Apple TV 4K",
    ProductImage: "apple-tv-4k.png",
    Quantity: 3,
    Amount: 537.00,
    PaymentMethod: "Cheque",
    Status: "Pending"
  },
  {
    ID: 7,
    TransactionID: "TRX202507",
    CustomerName: "David Clark",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-22"),
    ProductName: "iPhone 15 Pro",
    ProductImage: "iphone-15-pro.png",
    Quantity: 1,
    Amount: 999.99,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 8,
    TransactionID: "TRX202508",
    CustomerName: "Rachel Lee",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-22"),
    ProductName: "MacBook Air M2",
    ProductImage: "macbook-air-m2.png",
    Quantity: 2,
    Amount: 2598.00,
    PaymentMethod: "Credit Card",
    Status: "Completed"
  },
  {
    ID: 9,
    TransactionID: "TRX202509",
    CustomerName: "Lucas Robinson",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-22"),
    ProductName: "AirPods Pro",
    ProductImage: "airpods-pro.png",
    Quantity: 6,
    Amount: 1494.00,
    PaymentMethod: "PayPal",
    Status: "Processing"
  },
  {
    ID: 10,
    TransactionID: "TRX202510",
    CustomerName: "Sophia Martinez",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-23"),
    ProductName: "iPad Air",
    ProductImage: "ipad-air.png",
    Quantity: 3,
    Amount: 1797.00,
    PaymentMethod: "Online Transfer",
    Status: "Pending"
  },
  {
    ID: 11,
    TransactionID: "TRX202511",
    CustomerName: "Michael Brown",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-23"),
    ProductName: "Apple Watch Series 8",
    ProductImage: "apple-watch-series-8.png",
    Quantity: 4,
    Amount: 1596.00,
    PaymentMethod: "Credit Card",
    Status: "Completed"
  },
  {
    ID: 12,
    TransactionID: "TRX202512",
    CustomerName: "Sarah Davis",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-23"),
    ProductName: "iPhone 14 Pro Max",
    ProductImage: "iphone-14-pro-max.png",
    Quantity: 1,
    Amount: 1099.99,
    PaymentMethod: "PayPal",
    Status: "Failed"
  },
  {
    ID: 13,
    TransactionID: "TRX202513",
    CustomerName: "James Wilson",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-24"),
    ProductName: "iPhone 15 Plus",
    ProductImage: "iphone-15-plus.png",
    Quantity: 2,
    Amount: 1599.98,
    PaymentMethod: "Online Transfer",
    Status: "Processing"
  },
  {
    ID: 14,
    TransactionID: "TRX202514",
    CustomerName: "Laura Taylor",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-24"),
    ProductName: "iMac 24",
    ProductImage: "imac-24.png",
    Quantity: 3,
    Amount: 3599.97,
    PaymentMethod: "Credit Card",
    Status: "Completed"
  },
  {
    ID: 15,
    TransactionID: "TRX202515",
    CustomerName: "Chris Evans",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-24"),
    ProductName: "Mac Mini",
    ProductImage: "mac-mini.png",
    Quantity: 4,
    Amount: 2396.00,
    PaymentMethod: "PayPal",
    Status: "Pending"
  },
  {
    ID: 16,
    TransactionID: "TRX202516",
    CustomerName: "Anna Moore",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-25"),
    ProductName: "HomePod Mini",
    ProductImage: "homepod-mini.png",
    Quantity: 7,
    Amount: 693.00,
    PaymentMethod: "Online Transfer",
    Status: "Failed"
  },
  {
    ID: 17,
    TransactionID: "TRX202517",
    CustomerName: "Robert King",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-25"),
    ProductName: "iPhone 13",
    ProductImage: "iphone-13.png",
    Quantity: 3,
    Amount: 2099.97,
    PaymentMethod: "Credit Card",
    Status: "Completed"
  },
  {
    ID: 18,
    TransactionID: "TRX202518",
    CustomerName: "Megan Scott",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-25"),
    ProductName: "Apple Watch Series 7",
    ProductImage: "apple-watch-series-7.png",
    Quantity: 2,
    Amount: 798.00,
    PaymentMethod: "PayPal",
    Status: "Processing"
  },
  {
    ID: 19,
    TransactionID: "TRX202519",
    CustomerName: "Daniel Young",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-26"),
    ProductName: "Apple TV 4K",
    ProductImage: "apple-tv-4k.png",
    Quantity: 4,
    Amount: 716.00,
    PaymentMethod: "Online Transfer",
    Status: "Pending"
  },
  {
    ID: 20,
    TransactionID: "TRX202520",
    CustomerName: "Emma Walker",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-26"),
    ProductName: "iPhone 15 Pro",
    ProductImage: "iphone-15-pro.png",
    Quantity: 2,
    Amount: 1999.98,
    PaymentMethod: "Credit Card",
    Status: "Completed"
  },
  {
    ID: 21,
    TransactionID: "TRX202521",
    CustomerName: "Liam Hall",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-26"),
    ProductName: "MacBook Air M2",
    ProductImage: "macbook-air-m2.png",
    Quantity: 1,
    Amount: 1299.00,
    PaymentMethod: "PayPal",
    Status: "Failed"
  },
  {
    ID: 22,
    TransactionID: "TRX202522",
    CustomerName: "Ava Lewis",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-27"),
    ProductName: "AirPods Pro",
    ProductImage: "airpods-pro.png",
    Quantity: 5,
    Amount: 1245.00,
    PaymentMethod: "Online Transfer",
    Status: "Processing"
  },
  {
    ID: 23,
    TransactionID: "TRX202523",
    CustomerName: "Noah Clark",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-27"),
    ProductName: "iPad Air",
    ProductImage: "ipad-air.png",
    Quantity: 3,
    Amount: 1797.00,
    PaymentMethod: "Credit Card",
    Status: "Completed"
  },
  {
    ID: 24,
    TransactionID: "TRX202524",
    CustomerName: "Mia Turner",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-27"),
    ProductName: "Apple Watch Series 8",
    ProductImage: "apple-watch-series-8.png",
    Quantity: 4,
    Amount: 1596.00,
    PaymentMethod: "PayPal",
    Status: "Pending"
  },
  {
    ID: 25,
    TransactionID: "TRX202525",
    CustomerName: "Ethan Allen",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-28"),
    ProductName: "iPhone 14 Pro Max",
    ProductImage: "iphone-14-pro-max.png",
    Quantity: 2,
    Amount: 2199.98,
    PaymentMethod: "Online Transfer",
    Status: "Failed"
  },
  {
    ID: 26,
    TransactionID: "TRX202526",
    CustomerName: "Isabella King",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-28"),
    ProductName: "iPhone 15 Plus",
    ProductImage: "iphone-15-plus.png",
    Quantity: 3,
    Amount: 2399.97,
    PaymentMethod: "Credit Card",
    Status: "Completed"
  },
  {
    ID: 27,
    TransactionID: "TRX202527",
    CustomerName: "Jacob Wright",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-28"),
    ProductName: "iMac 24",
    ProductImage: "imac-24.png",
    Quantity: 1,
    Amount: 1199.99,
    PaymentMethod: "PayPal",
    Status: "Processing"
  },
  {
    ID: 28,
    TransactionID: "TRX202528",
    CustomerName: "Charlotte Lee",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-29"),
    ProductName: "Mac Mini",
    ProductImage: "mac-mini.png",
    Quantity: 2,
    Amount: 1198.00,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 29,
    TransactionID: "TRX202529",
    CustomerName: "William Young",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-29"),
    ProductName: "HomePod Mini",
    ProductImage: "homepod-mini.png",
    Quantity: 5,
    Amount: 495.00,
    PaymentMethod: "Credit Card",
    Status: "Pending"
  },
  {
    ID: 30,
    TransactionID: "TRX202530",
    CustomerName: "Amelia Harris",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-29"),
    ProductName: "iPhone 13",
    ProductImage: "iphone-13.png",
    Quantity: 4,
    Amount: 2799.96,
    PaymentMethod: "PayPal",
    Status: "Failed"
  },
  {
    ID: 31,
    TransactionID: "TRX202531",
    CustomerName: "Alexander Scott",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-30"),
    ProductName: "Apple Watch Series 7",
    ProductImage: "apple-watch-series-7.png",
    Quantity: 3,
    Amount: 1197.00,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 32,
    TransactionID: "TRX202532",
    CustomerName: "Harper Walker",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-30"),
    ProductName: "Apple TV 4K",
    ProductImage: "apple-tv-4k.png",
    Quantity: 2,
    Amount: 358.00,
    PaymentMethod: "Credit Card",
    Status: "Processing"
  },
  {
    ID: 33,
    TransactionID: "TRX202533",
    CustomerName: "Evelyn Adams",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-06-30"),
    ProductName: "iPhone 15 Pro",
    ProductImage: "iphone-15-pro.png",
    Quantity: 3,
    Amount: 2999.97,
    PaymentMethod: "PayPal",
    Status: "Pending"
  },
  {
    ID: 34,
    TransactionID: "TRX202534",
    CustomerName: "Mason Brown",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-01"),
    ProductName: "MacBook Air M2",
    ProductImage: "macbook-air-m2.png",
    Quantity: 1,
    Amount: 1299.00,
    PaymentMethod: "Online Transfer",
    Status: "Failed"
  },
  {
    ID: 35,
    TransactionID: "TRX202535",
    CustomerName: "Sofia Davis",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-01"),
    ProductName: "AirPods Pro",
    ProductImage: "airpods-pro.png",
    Quantity: 4,
    Amount: 996.00,
    PaymentMethod: "Credit Card",
    Status: "Completed"
  },
  {
    ID: 36,
    TransactionID: "TRX202536",
    CustomerName: "James Wilson",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-01"),
    ProductName: "iPad Air",
    ProductImage: "ipad-air.png",
    Quantity: 2,
    Amount: 1198.00,
    PaymentMethod: "PayPal",
    Status: "Processing"
  },
  {
    ID: 37,
    TransactionID: "TRX202537",
    CustomerName: "Chloe Taylor",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-02"),
    ProductName: "Apple Watch Series 8",
    ProductImage: "apple-watch-series-8.png",
    Quantity: 3,
    Amount: 1197.00,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 38,
    TransactionID: "TRX202538",
    CustomerName: "Benjamin Lee",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-02"),
    ProductName: "iPhone 14 Pro Max",
    ProductImage: "iphone-14-pro-max.png",
    Quantity: 1,
    Amount: 1099.99,
    PaymentMethod: "Credit Card",
    Status: "Pending"
  },
  {
    ID: 39,
    TransactionID: "TRX202539",
    CustomerName: "Zoe Clark",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-02"),
    ProductName: "iPhone 15 Plus",
    ProductImage: "iphone-15-plus.png",
    Quantity: 4,
    Amount: 3199.96,
    PaymentMethod: "PayPal",
    Status: "Failed"
  },
  {
    ID: 40,
    TransactionID: "TRX202540",
    CustomerName: "Logan Harris",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-03"),
    ProductName: "iMac 24",
    ProductImage: "imac-24.png",
    Quantity: 2,
    Amount: 2399.98,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 41,
    TransactionID: "TRX202541",
    CustomerName: "Ella Young",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-03"),
    ProductName: "Mac Mini",
    ProductImage: "mac-mini.png",
    Quantity: 3,
    Amount: 1797.00,
    PaymentMethod: "Credit Card",
    Status: "Processing"
  },
  {
    ID: 42,
    TransactionID: "TRX202542",
    CustomerName: "Lucas Martinez",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-03"),
    ProductName: "HomePod Mini",
    ProductImage: "homepod-mini.png",
    Quantity: 6,
    Amount: 594.00,
    PaymentMethod: "PayPal",
    Status: "Pending"
  },
  {
    ID: 43,
    TransactionID: "TRX202543",
    CustomerName: "Aria Walker",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-04"),
    ProductName: "iPhone 13",
    ProductImage: "iphone-13.png",
    Quantity: 1,
    Amount: 699.99,
    PaymentMethod: "Online Transfer",
    Status: "Failed"
  },
  {
    ID: 44,
    TransactionID: "TRX202544",
    CustomerName: "Henry Scott",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-04"),
    ProductName: "Apple Watch Series 7",
    ProductImage: "apple-watch-series-7.png",
    Quantity: 4,
    Amount: 1596.00,
    PaymentMethod: "Credit Card",
    Status: "Completed"
  },
  {
    ID: 45,
    TransactionID: "TRX202545",
    CustomerName: "Lily Adams",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-04"),
    ProductName: "Apple TV 4K",
    ProductImage: "apple-tv-4k.png",
    Quantity: 3,
    Amount: 537.00,
    PaymentMethod: "PayPal",
    Status: "Processing"
  },
  {
    ID: 46,
    TransactionID: "TRX202546",
    CustomerName: "Jack Wilson",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-05"),
    ProductName: "iPhone 15 Pro",
    ProductImage: "iphone-15-pro.png",
    Quantity: 2,
    Amount: 1999.98,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 47,
    TransactionID: "TRX202547",
    CustomerName: "Grace Brown",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-05"),
    ProductName: "MacBook Air M2",
    ProductImage: "macbook-air-m2.png",
    Quantity: 1,
    Amount: 1299.00,
    PaymentMethod: "Credit Card",
    Status: "Pending"
  },
  {
    ID: 48,
    TransactionID: "TRX202548",
    CustomerName: "Owen Davis",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-05"),
    ProductName: "AirPods Pro",
    ProductImage: "airpods-pro.png",
    Quantity: 10,
    Amount: 1743.00,
    PaymentMethod: "PayPal",
    Status: "Failed"
  },
  {
    ID: 49,
    TransactionID: "TRX202549",
    CustomerName: "Hannah Lee",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-06"),
    ProductName: "iPad Air",
    ProductImage: "ipad-air.png",
    Quantity: 4,
    Amount: 2396.00,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 50,
    TransactionID: "TRX202550",
    CustomerName: "Elijah Clark",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-06"),
    ProductName: "Apple Watch Series 8",
    ProductImage: "apple-watch-series-8.png",
    Quantity: 2,
    Amount: 798.00,
    PaymentMethod: "Credit Card",
    Status: "Processing"
  },
  {
    ID: 51,
    TransactionID: "TRX202551",
    CustomerName: "Sophie Turner",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-06"),
    ProductName: "iPhone 14 Pro Max",
    ProductImage: "iphone-14-pro-max.png",
    Quantity: 3,
    Amount: 3299.97,
    PaymentMethod: "PayPal",
    Status: "Pending"
  },
  {
    ID: 52,
    TransactionID: "TRX202552",
    CustomerName: "Daniel Harris",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-07"),
    ProductName: "iPhone 15 Plus",
    ProductImage: "iphone-15-plus.png",
    Quantity: 1,
    Amount: 799.99,
    PaymentMethod: "Online Transfer",
    Status: "Failed"
  },
  {
    ID: 53,
    TransactionID: "TRX202553",
    CustomerName: "Avery Wright",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-07"),
    ProductName: "iMac 24",
    ProductImage: "imac-24.png",
    Quantity: 4,
    Amount: 4799.96,
    PaymentMethod: "Credit Card",
    Status: "Completed"
  },
  {
    ID: 54,
    TransactionID: "TRX202554",
    CustomerName: "Scarlett Young",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-07"),
    ProductName: "Mac Mini",
    ProductImage: "mac-mini.png",
    Quantity: 3,
    Amount: 1797.00,
    PaymentMethod: "PayPal",
    Status: "Processing"
  },
  {
    ID: 55,
    TransactionID: "TRX202555",
    CustomerName: "Mason Adams",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-08"),
    ProductName: "HomePod Mini",
    ProductImage: "homepod-mini.png",
    Quantity: 6,
    Amount: 594.00,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 56,
    TransactionID: "TRX202556",
    CustomerName: "Luna Scott",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-08"),
    ProductName: "iPhone 13",
    ProductImage: "iphone-13.png",
    Quantity: 2,
    Amount: 1399.98,
    PaymentMethod: "Credit Card",
    Status: "Pending"
  },
  {
    ID: 57,
    TransactionID: "TRX202557",
    CustomerName: "Ethan Brown",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-08"),
    ProductName: "Apple Watch Series 7",
    ProductImage: "apple-watch-series-7.png",
    Quantity: 4,
    Amount: 1596.00,
    PaymentMethod: "PayPal",
    Status: "Failed"
  },
  {
    ID: 58,
    TransactionID: "TRX202558",
    CustomerName: "Zoe Davis",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-09"),
    ProductName: "Apple TV 4K",
    ProductImage: "apple-tv-4k.png",
    Quantity: 3,
    Amount: 537.00,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 59,
    TransactionID: "TRX202559",
    CustomerName: "Logan Wilson",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-09"),
    ProductName: "iPhone 15 Pro",
    ProductImage: "iphone-15-pro.png",
    Quantity: 1,
    Amount: 999.99,
    PaymentMethod: "Credit Card",
    Status: "Processing"
  },
  {
    ID: 60,
    TransactionID: "TRX202560",
    CustomerName: "Aria Lee",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-09"),
    ProductName: "MacBook Air M2",
    ProductImage: "macbook-air-m2.png",
    Quantity: 2,
    Amount: 2598.00,
    PaymentMethod: "PayPal",
    Status: "Pending"
  },
  {
    ID: 61,
    TransactionID: "TRX202561",
    CustomerName: "Lucas Clark",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-10"),
    ProductName: "AirPods Pro",
    ProductImage: "airpods-pro.png",
    Quantity: 5,
    Amount: 1245.00,
    PaymentMethod: "Online Transfer",
    Status: "Failed"
  },
  {
    ID: 62,
    TransactionID: "TRX202562",
    CustomerName: "Ella Harris",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-10"),
    ProductName: "iPad Air",
    ProductImage: "ipad-air.png",
    Quantity: 3,
    Amount: 1797.00,
    PaymentMethod: "Credit Card",
    Status: "Completed"
  },
  {
    ID: 63,
    TransactionID: "TRX202563",
    CustomerName: "Noah Young",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-10"),
    ProductName: "Apple Watch Series 8",
    ProductImage: "apple-watch-series-8.png",
    Quantity: 4,
    Amount: 1596.00,
    PaymentMethod: "PayPal",
    Status: "Processing"
  },
  {
    ID: 64,
    TransactionID: "TRX202564",
    CustomerName: "Mia Scott",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-11"),
    ProductName: "iPhone 14 Pro Max",
    ProductImage: "iphone-14-pro-max.png",
    Quantity: 2,
    Amount: 2199.98,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 65,
    TransactionID: "TRX202565",
    CustomerName: "Liam Turner",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-11"),
    ProductName: "iPhone 15 Plus",
    ProductImage: "iphone-15-plus.png",
    Quantity: 3,
    Amount: 2399.97,
    PaymentMethod: "Credit Card",
    Status: "Pending"
  },
  {
    ID: 66,
    TransactionID: "TRX202566",
    CustomerName: "Ava Brown",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-11"),
    ProductName: "iMac 24",
    ProductImage: "imac-24.png",
    Quantity: 1,
    Amount: 1199.99,
    PaymentMethod: "PayPal",
    Status: "Failed"
  },
  {
    ID: 67,
    TransactionID: "TRX202567",
    CustomerName: "Elijah Davis",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-12"),
    ProductName: "Mac Mini",
    ProductImage: "mac-mini.png",
    Quantity: 4,
    Amount: 2396.00,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 68,
    TransactionID: "TRX202568",
    CustomerName: "Sophie Wilson",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-12"),
    ProductName: "HomePod Mini",
    ProductImage: "homepod-mini.png",
    Quantity: 7,
    Amount: 693.00,
    PaymentMethod: "Credit Card",
    Status: "Processing"
  },
  {
    ID: 69,
    TransactionID: "TRX202569",
    CustomerName: "Daniel Lee",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-12"),
    ProductName: "iPhone 13",
    ProductImage: "iphone-13.png",
    Quantity: 3,
    Amount: 2099.97,
    PaymentMethod: "PayPal",
    Status: "Pending"
  },
  {
    ID: 70,
    TransactionID: "TRX202570",
    CustomerName: "Avery Clark",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-13"),
    ProductName: "Apple Watch Series 7",
    ProductImage: "apple-watch-series-7.png",
    Quantity: 2,
    Amount: 798.00,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 71,
    TransactionID: "TRX202571",
    CustomerName: "Scarlett Harris",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-13"),
    ProductName: "Apple TV 4K",
    ProductImage: "apple-tv-4k.png",
    Quantity: 4,
    Amount: 716.00,
    PaymentMethod: "Credit Card",
    Status: "Failed"
  },
  {
    ID: 72,
    TransactionID: "TRX202572",
    CustomerName: "Mason Young",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-13"),
    ProductName: "iPhone 15 Pro",
    ProductImage: "iphone-15-pro.png",
    Quantity: 3,
    Amount: 2999.97,
    PaymentMethod: "PayPal",
    Status: "Processing"
  },
  {
    ID: 73,
    TransactionID: "TRX202573",
    CustomerName: "Luna Scott",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-14"),
    ProductName: "MacBook Air M2",
    ProductImage: "macbook-air-m2.png",
    Quantity: 1,
    Amount: 1299.00,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 74,
    TransactionID: "TRX202574",
    CustomerName: "Ethan Turner",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-14"),
    ProductName: "AirPods Pro",
    ProductImage: "airpods-pro.png",
    Quantity: 6,
    Amount: 1494.00,
    PaymentMethod: "Credit Card",
    Status: "Pending"
  },
  {
    ID: 75,
    TransactionID: "TRX202575",
    CustomerName: "Zoe Brown",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-14"),
    ProductName: "iPad Air",
    ProductImage: "ipad-air.png",
    Quantity: 2,
    Amount: 1198.00,
    PaymentMethod: "PayPal",
    Status: "Failed"
  },
  {
    ID: 76,
    TransactionID: "TRX202576",
    CustomerName: "Logan Davis",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-15"),
    ProductName: "Apple Watch Series 8",
    ProductImage: "apple-watch-series-8.png",
    Quantity: 3,
    Amount: 1197.00,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 77,
    TransactionID: "TRX202577",
    CustomerName: "Ella Wilson",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-15"),
    ProductName: "iPhone 14 Pro Max",
    ProductImage: "iphone-14-pro-max.png",
    Quantity: 1,
    Amount: 1099.99,
    PaymentMethod: "Credit Card",
    Status: "Processing"
  },
  {
    ID: 78,
    TransactionID: "TRX202578",
    CustomerName: "Noah Lee",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-15"),
    ProductName: "iPhone 15 Plus",
    ProductImage: "iphone-15-plus.png",
    Quantity: 4,
    Amount: 3199.96,
    PaymentMethod: "PayPal",
    Status: "Pending"
  },
  {
    ID: 79,
    TransactionID: "TRX202579",
    CustomerName: "Mia Clark",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-16"),
    ProductName: "iMac 24",
    ProductImage: "imac-24.png",
    Quantity: 2,
    Amount: 2399.98,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 80,
    TransactionID: "TRX202580",
    CustomerName: "Liam Harris",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-16"),
    ProductName: "Mac Mini",
    ProductImage: "mac-mini.png",
    Quantity: 3,
    Amount: 1797.00,
    PaymentMethod: "Credit Card",
    Status: "Failed"
  },
  {
    ID: 81,
    TransactionID: "TRX202581",
    CustomerName: "Ava Scott",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-16"),
    ProductName: "HomePod Mini",
    ProductImage: "homepod-mini.png",
    Quantity: 5,
    Amount: 495.00,
    PaymentMethod: "PayPal",
    Status: "Processing"
  },
  {
    ID: 82,
    TransactionID: "TRX202582",
    CustomerName: "Elijah Young",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-17"),
    ProductName: "iPhone 13",
    ProductImage: "iphone-13.png",
    Quantity: 4,
    Amount: 2799.96,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 83,
    TransactionID: "TRX202583",
    CustomerName: "Sophie Brown",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-17"),
    ProductName: "Apple Watch Series 7",
    ProductImage: "apple-watch-series-7.png",
    Quantity: 3,
    Amount: 1197.00,
    PaymentMethod: "Credit Card",
    Status: "Pending"
  },
  {
    ID: 84,
    TransactionID: "TRX202584",
    CustomerName: "Daniel Turner",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-17"),
    ProductName: "Apple TV 4K",
    ProductImage: "apple-tv-4k.png",
    Quantity: 2,
    Amount: 358.00,
    PaymentMethod: "PayPal",
    Status: "Failed"
  },
  {
    ID: 85,
    TransactionID: "TRX202585",
    CustomerName: "Avery Wilson",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-18"),
    ProductName: "iPhone 15 Pro",
    ProductImage: "iphone-15-pro.png",
    Quantity: 4,
    Amount: 3999.96,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 86,
    TransactionID: "TRX202586",
    CustomerName: "Scarlett Clark",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-18"),
    ProductName: "MacBook Air M2",
    ProductImage: "macbook-air-m2.png",
    Quantity: 2,
    Amount: 2598.00,
    PaymentMethod: "Credit Card",
    Status: "Processing"
  },
  {
    ID: 87,
    TransactionID: "TRX202587",
    CustomerName: "Mason Lee",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-18"),
    ProductName: "AirPods Pro",
    ProductImage: "airpods-pro.png",
    Quantity: 6,
    Amount: 1494.00,
    PaymentMethod: "PayPal",
    Status: "Pending"
  },
  {
    ID: 88,
    TransactionID: "TRX202588",
    CustomerName: "Luna Harris",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-19"),
    ProductName: "iPad Air",
    ProductImage: "ipad-air.png",
    Quantity: 3,
    Amount: 1797.00,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 89,
    TransactionID: "TRX202589",
    CustomerName: "Ethan Scott",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-19"),
    ProductName: "Apple Watch Series 8",
    ProductImage: "apple-watch-series-8.png",
    Quantity: 4,
    Amount: 1596.00,
    PaymentMethod: "Credit Card",
    Status: "Failed"
  },
  {
    ID: 90,
    TransactionID: "TRX202590",
    CustomerName: "Zoe Young",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-19"),
    ProductName: "iPhone 14 Pro Max",
    ProductImage: "iphone-14-pro-max.png",
    Quantity: 2,
    Amount: 2199.98,
    PaymentMethod: "PayPal",
    Status: "Processing"
  },
  {
    ID: 91,
    TransactionID: "TRX202591",
    CustomerName: "Logan Brown",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-20"),
    ProductName: "iPhone 15 Plus",
    ProductImage: "iphone-15-plus.png",
    Quantity: 3,
    Amount: 2399.97,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 92,
    TransactionID: "TRX202592",
    CustomerName: "Ella Davis",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-20"),
    ProductName: "iMac 24",
    ProductImage: "imac-24.png",
    Quantity: 1,
    Amount: 1199.99,
    PaymentMethod: "Credit Card",
    Status: "Pending"
  },
  {
    ID: 93,
    TransactionID: "TRX202593",
    CustomerName: "Noah Wilson",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-07-20"),
    ProductName: "Mac Mini",
    ProductImage: "mac-mini.png",
    Quantity: 2,
    Amount: 1198.00,
    PaymentMethod: "PayPal",
    Status: "Failed"
  },
  {
    ID: 94,
    TransactionID: "TRX202594",
    CustomerName: "Mia Lee",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-08-01"),
    ProductName: "HomePod Mini",
    ProductImage: "homepod-mini.png",
    Quantity: 6,
    Amount: 594.00,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 95,
    TransactionID: "TRX202595",
    CustomerName: "Liam Clark",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-08-01"),
    ProductName: "iPhone 13",
    ProductImage: "iphone-13.png",
    Quantity: 3,
    Amount: 2099.97,
    PaymentMethod: "Credit Card",
    Status: "Processing"
  },
  {
    ID: 96,
    TransactionID: "TRX202596",
    CustomerName: "Ava Harris",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-08-01"),
    ProductName: "Apple Watch Series 7",
    ProductImage: "apple-watch-series-7.png",
    Quantity: 4,
    Amount: 1596.00,
    PaymentMethod: "PayPal",
    Status: "Pending"
  },
  {
    ID: 97,
    TransactionID: "TRX202597",
    CustomerName: "Elijah Scott",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-08-02"),
    ProductName: "Apple TV 4K",
    ProductImage: "apple-tv-4k.png",
    Quantity: 3,
    Amount: 537.00,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  },
  {
    ID: 98,
    TransactionID: "TRX202598",
    CustomerName: "Sophie Young",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-08-02"),
    ProductName: "iPhone 15 Pro",
    ProductImage: "iphone-15-pro.png",
    Quantity: 2,
    Amount: 1999.98,
    PaymentMethod: "Credit Card",
    Status: "Failed"
  },
  {
    ID: 99,
    TransactionID: "TRX202599",
    CustomerName: "Daniel Brown",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-08-02"),
    ProductName: "MacBook Air M2",
    ProductImage: "macbook-air-m2.png",
    Quantity: 1,
    Amount: 1299.00,
    PaymentMethod: "PayPal",
    Status: "Processing"
  },
  {
    ID: 100,
    TransactionID: "TRX2025100",
    CustomerName: "Avery Turner",
    Email: "[email protected]",
    PurchaseDate: new Date("2025-08-03"),
    ProductName: "AirPods Pro",
    ProductImage: "airpods-pro.png",
    Quantity: 7,
    Amount: 1743.00,
    PaymentMethod: "Online Transfer",
    Status: "Completed"
  }
];

The following screenshot represents the assistive grid action,

Smart grid