Simple replication attempt

App.tsx

import "./App.css";
import {
  CordProvider,
  PresenceFacepile,
  PresenceObserver,
} from "@cord-sdk/react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import React from "react";
import { CLIENT_AUTH_TOKEN } from "./consts";

function Cell(props: any) {
  const location = { rowIndex: props.rowIndex, col: props.column.colId };
  return (
    <PresenceObserver groupId="my-first-group" location={location}>
      <span>{props.value.toString()}</span>
      <PresenceFacepile
        location={location}
        excludeViewer={false}
        maxUsers={3}
      />
    </PresenceObserver>
  );
}

const rowData = [
  { make: "Tesla", model: "Model Y", price: 64950, electric: true },
  { make: "Ford", model: "F-Series", price: 33850, electric: false },
  { make: "Toyota", model: "Corolla", price: 29600, electric: false },
];

const colDefs = [
  { field: "make", cellRenderer: Cell },
  { field: "model", cellRenderer: Cell },
  { field: "price", cellRenderer: Cell },
  { field: "electric", cellRenderer: Cell },
];

function App() {
  return (
    <CordProvider clientAuthToken={CLIENT_AUTH_TOKEN}>
      <div className="ag-theme-quartz" style={{ height: 500, width: 900 }}>
        <AgGridReact rowData={rowData} columnDefs={colDefs} />
      </div>
    </CordProvider>
  );
}

export default App;