Utwórz nowy wiersz za pomocą renderowanego komponentu React

Question

Użyłem cellRendererz frameworkComponentsdo renderowania składnika przycisku jako kolumny.

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;

W ramach programu obsługi w powyższym komponencie jestem w stanie manipulować istniejącym węzłem wiersza za pomocą właściwości props (na przykład use this.props.node.setData()). Jednak chcę po prostu DODAĆ nowy wiersz do siatki z niektórymi polami danych na podstawie bieżącej komórki.

Jak bym to zrobił? Wygląda na to, że w API nie ma metody, która pozwala mi to zrobić i jest dostępna w module obsługi zdarzeń komponentu.https://www.ag-grid.com/javascript-grid-data-update/#gsc.tab=0

TLDR; Po naciśnięciu przycisku „+”. Jak dodać NOWY wiersz do siatki?

Answer 1

Możesz użyć, GriApi.applyTransaction({ add: newItems })aby dodać nowe wiersze do siatki. Więcej informacji można znaleźć w sekcji aktualizacja-transakcja . Oto przykład:

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