1

Muy buenas estoy intentando mostrar los datos de una tabla en un modal y no puedo hacer que al seleccionar la fila abra el modal con todos los datos del ticket seleccionado en la tabla.

Estoy trabajando con boostrap 4 para la parte visual y quiero usar una tabla normal.

Logre hacer lo que quiero con componentes como MuiDatatable o React-boostrap pero no quiero usar ese tipo de componentes

Asi traigo mis datos en el array data:


class TicketsContainer extends React.Component {
  state = {
    data: []
  }

  constructor() {
    super();

    this.apiUrl = process.env.REACT_APP_API_URL || 'https://localhost:5050';
    this.getData = this.getData.bind(this);


  }

  componentDidMount() {
    this.getData();
  }


  getData() {
    Axios.get(`${this.apiUrl}/tickets`)
      .then(result => this.setState({ ...this.state, data: result.data }))
      .catch(error => alert(error.message));
  }

Aca mapeo los datos y los muestro en la tabla

{this.state.data.length && (
  <div>
    {this.state.data.map((ticket) => {
      return (
        <div className="card">
          <div className="card-header">
            <div className="row align-items-center">
              <div className="col">
                <form className="row align-items-center">
                  <div className="col-auto pr-0">
                    <span className="fe fe-search text-muted" />
                  </div>
                  <div className="col">
                    <input
                      type="search"
                      className="form-control form-control-flush search"
                      placeholder="Inngresa el #numero de ticket aqui..."
                    />
                  </div>
                </form>
              </div>
            </div>
            {/* / .row */}
          </div>
          <div className="table-responsive">
            <table className="table table-sm table-nowrap card-table table-hover ">
              <thead>
                <tr>
                  <th>
                    <div className="custom-control custom-checkbox table-checkbox">
                      <input
                        type="checkbox"
                        className="custom-control-input"
                        name="ordersSelect"
                        id="ordersSelectAll"
                      />
                      <label
                        className="custom-control-label"
                        htmlFor="ordersSelectAll"
                      >
                        &nbsp;
                      </label>
                    </div>
                  </th>
                  <th>N°: Ticket</th>
                  <th>Contrato</th>
                  <th>Empresa</th>
                  <th>Problema</th>
                  <th>Estado</th>
                  <th colSpan={2}>Tecnico Asignado</th>
                </tr>
              </thead>
              <tbody className="list">
                <tr id={ticket._id}>
                  <td>
                    <div className="custom-control custom-checkbox table-checkbox">
                      <input
                        type="checkbox"
                        className="custom-control-input"
                        name="ordersSelect"
                        id="ordersSelectOne"
                      />
                      <label
                        className="custom-control-label"
                        htmlFor="ordersSelectOne"
                      >
                        &nbsp;
                      </label>
                    </div>
                  </td>
                  <td className="orders-order">
                    {'#' + ticket.ticketNumber}
                  </td>
                  <td className="orders-product">{ticket.contract.name}</td>
                  <td className="orders-date">
                    {ticket.contract.compant.name}
                  </td>
                  <td className="orders-total">{ticket.issue}</td>
                  <td className="orders-status">
                    <div className="badge badge-soft-info">
                      {ticket.status}
                    </div>
                  </td>
                  <td className="orders-method">
                    {ticket.assignedTechnical}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      );
    })}
  </div>
)}

Como deberia hacer para seleccionar una fila de la tabla y que me muestre los datos en un modal?

Estuve probando multiples cosas y no lo puedo lograr

1 respuesta 1

0

lo que puedes hacer para obtener el ticket que ha seleccionado el usuario es setear un evento onClick (por ejemplo) y pasarle una función que reciba como parámetro el ticket, te pongo un ejemplo:

Para cuando hagan click en la fila:

 <tr id={ticket._id} onClick={() => this.handleRowClick(ticket)}>

Para ello tendrás que haber declarado en tu clase ese método de la misma manera que declaraste;

this.getData = this.getData.bind(this);
this.handleRowClick = this.handleRowClick.bind(this);

Y en ese método manejas el ticket para lo que necesites después de que el usuario ha hecho click.

handleRowClick(ticket) {
  // Aqui realizas la lógica para abrir el modal pasándole el ticket seleccionado.
}

Espero te sirva, saludos!

1
  • Funciona a la bien. gracias Adolfo Onrubia el 27 nov. 2019 a las 15:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.