Saltar al contenido

¿Cómo agregar un botón dentro de una celda en DevExtreme React Grid?

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 (
            
                

                
                
            
        );
    

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: ,
            action: doAlert
        ,
        
            icon: ,
            action: id => alert('edit id: ' + id)
        
    ];

    return (
        
            
            
        
    )


La forma en que se me ocurrió esta solución es bastante sencilla:

  1. Lea “DevExtreme React Grid: serie de blogs” de Oliver Sturm
  2. Lea la documentación de React Core.
  3. 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(, document.getElementById("root"));

Acuérdate de que tienes el privilegio reseñar si hallaste tu impedimento a tiempo.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4.5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Respuestas a preguntas comunes sobre programacion y tecnología