lwcAgGrid.js

(function s() {
  return function () {
    $A.componentService.addModule(
      "markup://c:lwcAgGrid",
      "c/lwcAgGrid",
      [
        "lwc",
        "lightning/platformResourceLoader",
        "@salesforce/resourceUrl/agGridMin"
      ],
      function (lwc, platformResourceLoader, agGridMin) {
        function _interopDefaultLegacy(e) {
          return e && typeof e === "object" && "default" in e
            ? e
            : { default: e };
        }

        var agGridMin__default = /*#__PURE__*/ _interopDefaultLegacy(agGridMin);

        function tmpl($api, $cmp, $slotset, $ctx) {
          const { gid: api_scoped_id, h: api_element } = $api;
          return [
            api_element(
              "div",
              {
                styleMap: {
                  height: "200px",
                  width: "500px"
                },
                classMap: {
                  "ag-theme-alpine": true
                },
                attrs: {
                  id: api_scoped_id("myGrid")
                },
                context: {
                  lwc: {
                    dom: "manual"
                  }
                },
                key: 0
              },
              []
            )
          ];
        }
        var _tmpl = lwc.registerTemplate(tmpl);
        tmpl.stylesheets = [];
        tmpl.stylesheetTokens = {
          hostAttribute: "c-lwcAgGrid_lwcAgGrid-host",
          shadowAttribute: "c-lwcAgGrid_lwcAgGrid"
        };

        var columnDefs = [
          {
            headerName: "Make",
            field: "make"
          },
          {
            headerName: "Model",
            field: "model"
          },
          {
            headerName: "Price",
            field: "price"
          }
        ]; // specify the data

        var rowData = [
          {
            make: "Toyota",
            model: "Celica",
            price: 35000
          },
          {
            make: "Ford",
            model: "Mondeo",
            price: 32000
          },
          {
            make: "Porsche",
            model: "Boxter",
            price: 72000
          }
        ]; // let the grid know which columns and what data to use

        var gridOptions = {
          columnDefs: columnDefs,
          rowData: rowData
        };

        class LwcAgGrid extends lwc.LightningElement {
          renderedCallback() {
            if (this.d3Initialized) {
              return;
            }

            this.d3Initialized = true;
            Promise.all([
              platformResourceLoader.loadScript(
                this,
                agGridMin__default["default"]
              )
            ])
              .then(() => {
                console.log("###loaded"); // this.initializeD3();
                // const svg = d3.select(this.template.querySelector('svg.d3'));

                const gridDiv = this.template.querySelector("div");
                console.log("####gridDiv", gridDiv, agGrid);
                new agGrid.Grid(gridDiv, gridOptions);
              })
              .catch((error) => {
                console.log("###error", error);
              });
          }
        }

        var lwcAgGrid = lwc.registerComponent(LwcAgGrid, {
          tmpl: _tmpl
        });

        return lwcAgGrid;
      }
    );
  };
})(); //# sourceURL=https://db0000000kh83mac-dev-ed.lightning.force.com/components/c/lwcAgGrid.js