Erstellen Sie eine neue Zeile über eine gerenderte React-Komponente

Question

Ich habe cellRenderermit verwendet frameworkComponents, um eine Schaltflächenkomponente als Spalte zu rendern.

import InsertNodeBtnRender from "./HierarchyButtons/insertRowBtn.jsx";

columnDefs: [
        {
          lockPosition: true,
          cellRenderer: "insertBtnRender",
          // cellClass: 'locked-col',
          maxWidth: 60,
          // suppressNavigable: true,
        },
        { field: "jobTitle" },
        { field: "employmentType" },
      ],
      frameworkComponents: {
        insertBtnRender: InsertNodeBtnRender,
      },

class InsertNodeBtn extends Component {

  btnClickedHandler() {
  // I have access to "this.props.node" for setting data to EXISTING rows
  }

  render() {
    return <button onClick={() => this.btnClickedHandler()}>+</button>;
  }
}

export default InsertNodeBtn;

Innerhalb des Handlers in der obigen Komponente kann ich den vorhandenen Zeilenknoten mit der Eigenschaft props (z. B. use this.props.node.setData()) bearbeiten . Ich möchte dem Raster jedoch einfach eine neue Zeile mit einigen Datenfeldern hinzufügen, die auf der aktuellen Zelle basieren.

Wie würde ich das machen? Es scheint keine Methode in der API zu geben, die mir dies ermöglicht und auf die im Ereignishandler für Komponenten zugegriffen werden kann.https://www.ag-grid.com/javascript-grid-data-update/#gsc.tab=0

TLDR; Nach dem Drücken der "+" Taste. Wie füge ich dem Raster eine NEUE Zeile hinzu?

Answer 1

Sie können GriApi.applyTransaction({ add: newItems })dem Raster neue Zeilen hinzufügen. Siehe Update-Transaktion Abschnitt für weitere Informationen. Hier ist ein Beispiel:

import React from "react";

let i = 0;

function createNewRowData({ orgHierarchy, employmentType }) {
  const boss = orgHierarchy[orgHierarchy.length - 1];
  const newData = {
    jobTitle: "Minion",
    employmentType,
    orgHierarchy: orgHierarchy.concat(boss + "'s Minion " + ++i)
  };
  return newData;
}

export default function InsertNodeBtnRender(props) {
  const { api, columnApi, data } = props;
  const onAdd = () => {
    const newItems = [createNewRowData(data)];

    api.applyTransaction({ add: newItems });
    columnApi.autoSizeAllColumns();
  };

  return <button onClick={onAdd}>+</button>;
}

Live-Demo