Setting Up an AG-Grid Component in FramerX

Question

I'm working on a prototype in FramerX, and our production software uses Ag-Grid for a large number of components. I need to be able to incorporate Ag-Grid in my latest prototype.

Does anyone know how I can go about setting this up at the most basic level?

Answer 1

I was able to figure out how to make the simple ag-grid table provided in the AG-Grid starter tutorial: https://stackblitz.com/edit/ag-grid-react-hello-world

The trick was that I forgot that FramerX uses TypeScript syntax so there were a few things that need to be modified about the example. Below is the code I ultimately ended up using. I'll go through the edits that I had to make.

import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
import { AgGridReact } from "@ag-grid-community/react"
import { AllCommunityModules } from "@ag-grid-community/all-modules"

import "@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css"
import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-material.css"

interface MyProps {}

interface MyState {
    columnDefs: object
    rowData: object
}

export class Simple_Table extends React.Component<MyProps, MyState> {
    //Set the data for the Table
    constructor(props) {
        super(props)
        this.state = {
            //Set the Columns
            columnDefs: [
                {
                headerName: "Make", field: "make"
                }, {
                headerName: "Model", field: "model"
                }, {
                headerName: "Price", field: "price"
                }
            ],
            //Set the actual data
            rowData: [
                {
                make: "Toyota", model: "Celica", price: 35000
                }, {
                make: "Ford", model: "Mondeo", price: 32000
                }, {
                make: "Porsche", model: "Boxter", price: 72000
                }
            ],
        }
    }

    render() {
        return (
            <Frame
                style={{ height: "368px", width: "784px", background: "#FAFAFA" }}
                className="ag-theme-material"
            >
                <AgGridReact
                    columnDefs={this.state.columnDefs}
                    rowData={this.state.rowData}
                    modules={AllCommunityModules}
                ></AgGridReact>
            </Frame>
        )
    }
}

First instead of calling out React and Component separately in the import like this:

import React, { Component } from 'react';

I imported React with the wildcard like show Framer typically does it:

import * as React from "react"

Then since this is TypeScript with React, you need to define the props and states in the interface before the component. Make sure that the states are set as objects because they will be arrays.

interface MyProps {}

interface MyState {
    columnDefs: object
    rowData: object
}

Then I rewrote the component function to have the export at the beginning, and called "MyProps" and "MyState" interfaces in the function, again since this is TypeScript.

export class Simple_Table extends React.Component<MyProps, MyState> {...}

Last but not least, I changed the <div>...</div> to a <Frame>...</Frame> by including Framer's module:

import { Frame, addPropertyControls, ControlType } from "framer"