Botón no visible en tabla de React.

Tengo un problema. Intenté mostrar un botón en React Table para cada fila, pero no se muestra, solo se muestra una columna en blanco.
Esta es mi columna:

columns = [ { dataField: "nama_user", text: "Nombre", sort: true, style: { overflowWrap: "break-word" }, headerStyle: { backgroundColor: '#2196F3' , color: 'white'} }, { dataField: "email", text: "Correo electrónico", sort: true, headerStyle: { backgroundColor: '#2196F3' , color: 'white'} }, { dataField: "", text: "Acción", formatter: this.GetUserAction, headerStyle: { backgroundColor: '#2196F3' , color: 'white'}, classes: "p-1" } ];

Esta es la función que contiene el botón:

GetUserAction = (cell, row, rowIndex, formatExtraData) => { return ( <div> <button classname="update" onclick="{this.handleClickOpen}"> Editar </button> <button classname="update" onclick="{this.aktivasiUser(row)}"> Activar </button> </div> ); }

¿Quizás me falta algo en mi código? Gracias por responder.

davy.ai

May 27, 2023 at 3:50 pm

Parece que faltan algunas cosas en tu código que podrían estar causando que aparezca una columna en blanco. En primer lugar, parece que no estás pasando el parámetro ‘cell’ correctamente a la función GetUserAction. En segundo lugar, no estás vinculando ‘this’ a las funciones handleClickOpen y aktivasiUser.

Para solucionar este problema, intenta hacer los siguientes cambios en tu código:

Agrega ‘cell’ como parámetro a la función GetUserAction:

GetUserAction = (cell, row, rowIndex, formatExtraData) => {

Usa el parámetro ‘cell’ en lugar de ‘row’ para acceder a los datos de la fila:

<button classname="update" onclick="{this.handleClickOpen}">
    Editar
</button>
<button classname="update" onclick="{()" ==""> this.aktivasiUser(cell)}>
    Activar
</button>

Vincula ‘this’ a las funciones handleClickOpen y aktivasiUser en tu constructor:

constructor(props) {
    super(props);
    this.state = {
        isOpen: false
    };
    this.handleClickOpen = this.handleClickOpen.bind(this);
    this.aktivasiUser = this.aktivasiUser.bind(this);
}

Con estos cambios, el botón ahora debería aparecer en la columna ‘Acción’ para cada fila.

Answer

davy.ai

May 27, 2023 at 3:50 pm
Parece que faltan algunas cosas en tu código que podrían estar causando que aparezca una columna en blanco. En primer lugar, parece que no estás pasando el parámetro ‘cell’ correctamente a la función GetUserAction. En segundo lugar, no estás vinculando ‘this’ a las funciones handleClickOpen y aktivasiUser.

Para solucionar este problema, intenta hacer los siguientes cambios en tu código:
1. Agrega ‘cell’ como parámetro a la función GetUserAction:
```
GetUserAction = (cell, row, rowIndex, formatExtraData) => {
```
1. Usa el parámetro ‘cell’ en lugar de ‘row’ para acceder a los datos de la fila:
```
<button classname="update" onclick="{this.handleClickOpen}">
    Editar
</button>
<button classname="update" onclick="{()" ==""> this.aktivasiUser(cell)}>
    Activar
</button>
```
1. Vincula ‘this’ a las funciones handleClickOpen y aktivasiUser en tu constructor:
```
constructor(props) {
    super(props);
    this.state = {
        isOpen: false
    };
    this.handleClickOpen = this.handleClickOpen.bind(this);
    this.aktivasiUser = this.aktivasiUser.bind(this);
}
```
Con estos cambios, el botón ahora debería aparecer en la columna ‘Acción’ para cada fila.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Botón no visible en tabla de React.

Answer

davy.ai