Contamos con la mejor información que hemos encontrado on line. Nosotros queremos que te sirva de ayuda y si quieres aportar alguna mejora hazlo con libertad.
Solución:
Actualmente estoy trabajando con la cuadrícula de reacción de DevExtreme y me enfrenté a un problema similar pero seguí una solución diferente. Lo que hice fue crear un nuevo complemento para agregar una nueva columna llamada “ActionsColumn”. Puede pasar ambos nodos y las devoluciones de llamada asociadas al complemento. El código mínimo sería algo como esto (lo siento, no probado):
import React from 'react'
import PropTypes from 'prop-types'
import IconButton from '@material-ui/core/IconButton'
import TABLE_HEADING_TYPE from '@devexpress/dx-grid-core'
import Getter, Template, Plugin from '@devexpress/dx-react-core'
import
Table,
from '@devexpress/dx-react-grid-material-ui'
const pluginDependencies = [
name: 'Table',
];
const ACTIONS_COLUMN_TYPE = 'actionsColumnType';
function tableColumnsWithActions(tableColumns, width)
return [...tableColumns, key: ACTIONS_COLUMN_TYPE, type: ACTIONS_COLUMN_TYPE, width: width];
function isHeadingActionsTableCell(tableRow, tableColumn)
return tableRow.type === TABLE_HEADING_TYPE && tableColumn.type === ACTIONS_COLUMN_TYPE;
function isActionsTableCell(tableRow, tableColumn)
return tableRow.type !== TABLE_HEADING_TYPE && tableColumn.type === ACTIONS_COLUMN_TYPE;
export class ActionsColumn extends React.PureComponent
render()
const
actions,
width,
= this.props;
const tableColumnsComputed = (tableColumns) => tableColumnsWithActions(tableColumns, width);
return (
isHeadingActionsTableCell(tableRow, tableColumn)
>
Actions Column
isActionsTableCell(tableRow, tableColumn)
>
params => (
actions.map(action =>
const id = params.tableRow.row.id;
return (
action.action(id)>
action.icon
)
)
)
);
ActionsColumn.propTypes =
actions: PropTypes.arrayOf(PropTypes.PropTypes.shape(
icon: PropTypes.node,
action: PropTypes.func.isRequired
)).isRequired,
width: PropTypes.number
;
ActionsColumn.defaultProps =
width: 240,
;
Simplemente verifica si estás en una fila de encabezado o en una fila de tabla normal y simplemente agregas un encabezado o las acciones que definiste respectivamente.
Para utilizar este complemento, simplemente inclúyalo en su definición de Grid después de la declaración del complemento Table:
render()
const columns, rows = this.state;
const actions = [
icon:
)
La forma en que se me ocurrió esta solución es bastante sencilla:
- Lea “DevExtreme React Grid: serie de blogs” de Oliver Sturm
- Lea la documentación de React Core.
- Verifique el código fuente de la columna de edición de tabla existente en GitHub: aquí y aquí
Espero que esto ayude.
He bifurcado el código de su caja de arena e hice algunas adiciones. Espero que eso sea lo que estás buscando. Y a continuación se muestra el mismo código. Espero que esto ayude.
import React from "react";
import render from "react-dom";
import Paper from "@material-ui/core/Paper";
import // State or Local Processing Plugins
"@devexpress/dx-react-grid";
import
Grid,
Table,
TableHeaderRow
from "@devexpress/dx-react-grid-material-ui";
class App extends React.PureComponent
constructor(props)
super(props);
this.state =
columns: [
name: "name", title: "Name" ,
name: "sex", title: "Sex" ,
name: "city", title: "City" ,
name: "car", title: "Car" ,
name: "action", title: "action"
],
rows: [
sex: "Female",
name: "Sandra",
city: "Las Vegas",
car: "Audi A4",
action: this.addResetBtn.call(this, index: 0 )
,
sex: "Male", name: "Paul", city: "Paris", car: "Nissan Altima" ,
sex: "Male", name: "Mark", city: "Paris", car: "Honda Accord" ,
sex: "Male", name: "Paul", city: "Paris", car: "Nissan Altima" ,
sex: "Female", name: "Linda", city: "Austin", car: "Toyota Corolla" ,
sex: "Male",
name: "Robert",
city: "Las Vegas",
car: "Chevrolet Cruze",
action: this.addResetBtn.call(this, index: 5 )
,
sex: "Female", name: "Lisa", city: "London", car: "BMW 750" ,
sex: "Male", name: "Mark", city: "Chicago", car: "Toyota Corolla" ,
sex: "Male",
name: "Thomas",
city: "Rio de Janeiro",
car: "Honda Accord"
,
sex: "Male", name: "Robert", city: "Las Vegas", car: "Honda Civic" ,
sex: "Female", name: "Betty", city: "Paris", car: "Honda Civic" ,
sex: "Male",
name: "Robert",
city: "Los Angeles",
car: "Honda Accord"
,
sex: "Male",
name: "William",
city: "Los Angeles",
car: "Honda Civic"
,
sex: "Male", name: "Mark", city: "Austin", car: "Nissan Altima"
]
;
addResetBtn = ( index ) =>
return (
);
;
handleResetClick = ( index ) =>
const updatedRows = [...this.state.rows];
updatedRows[index].car = "";
this.setState( rows: updatedRows );
;
render()
const rows, columns = this.state;
return (
);
render(Acuérdate de que tienes el privilegio reseñar si hallaste tu impedimento a tiempo.