Как разместить компонент React jsx в ячейках ag-grid

К сожалению, я не могу поделиться кодом, потому что это конфиденциально для компании, но я в основном использую colDefs для определения своих столбцов в аг-сетке React и хотел бы иметь один столбец, все ячейки которого являются настраиваемым компонентом кнопки JSX, который я создал, что позволит мне удалить строка ячейки, по которой щелкнули, а также распространить изменения в другом месте кода. Я застрял, пытаясь использовать cellRenderers, и просто не могу понять, как добавить настраиваемые функциональные компоненты реакции в ячейку. Если кто-то может помочь с этим, мы будем очень признательны. Я постараюсь предоставить как можно больше дополнительного контекста, но, к сожалению, не могу поделиться фрагментами прямого кода. Спасибо!


reactjs jsx ag-grid cellrenderer
person DesperateCoder    schedule 30.12.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете увидеть пример в документации ag-grid здесь. Я также установил песочницу в в котором вы можете удалять строки из сетки, нажимая каждую соответствующую кнопку.

В основном вам необходимо:

  1. Создайте собственное средство визуализации, которое будет отображаться в ячейках столбца, например DeleteCellRenderer. Вам нужно будет получить доступ как минимум к двум реквизитам:

    • props.context, the grid's context which will contain the method(s) to fire in the onClick method
    • props.data, который содержит данные для этой строки - конкретного элемента в массиве rowData, который есть.

  2. Откройте компонент, который отображает компонент <AgGridReact />, и импортируйте средство визуализации.

  3. Объявите средство визуализации в опоре frameworkComponents сетки, например:

    <AgGridReact
  frameworkComponents={{
    deleteCellRenderer: DeleteCellRenderer
  }}
  // ...

  4. Объявите, что ваша функция удаления срабатывает при нажатии на кнопку, а затем передайте ее в контекст сетки.

    const handleDelete = (data) => {
  // Your logic here
};

// ...

<AgGridReact
   frameworkComponents={{
     deleteCellRenderer: DeleteCellRenderer
   }}
   context={{ handleDelete }}
   //...

  5. Наконец, вставьте столбец в массив colDef, содержащий cellRenderer, либо следующим образом:

    const colDef = [
//...
{
  headerName: "delete"
  cellRenderer: "deleteCellRenderer"
},
//...
];

    Или, если вы используете <AgGridColumn> компонентов в качестве дочерних:

    <AgGridReact
//...
>
  <AgGridColumn headerName="Delete" cellRenderer="deleteCellRenderer" />
  //...
</AgGridReact>
person rateLess    schedule 31.12.2020
comment
Возможно, вы знаете, как ответить на этот вопрос: stackoverflow.com/questions/65518883/ - person Yonatan Nir; 01.01.2021