Crie uma nova linha por meio de um componente React renderizado

Question

Usei cellRenderercom frameworkComponentspara renderizar um componente de botão como uma coluna.

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;

No manipulador do componente acima, posso manipular o nó da linha existente com a propriedade props (como use this.props.node.setData()). No entanto, desejo simplesmente ADICIONAR uma nova linha à grade com alguns dos campos de dados com base na célula atual.

Como eu faria isso? Não parece haver um método fornecido na API que me permite fazer isso e está acessível no manipulador de eventos do componente.https://www.ag-grid.com/javascript-grid-data-update/#gsc.tab=0

TLDR; Depois de pressionar o botão "+". Como adiciono uma NOVA linha à grade?

Answer 1

Você pode usar GriApi.applyTransaction({ add: newItems })para adicionar novas linhas à grade. Veja a seção update-transaction para mais informações. Aqui está um exemplo:

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>;
}

Demonstração ao vivo