Table - MutakamwoyoCloud/MCloud GitHub Wiki

Table

Este es el otro componente que se incluye en Peticiones. Su finalidad es mostrar la tabla con los resultados de búsquedas que ya se han realizado previamente, mostrando en cada una de las filas los distintos contenidos relacionados con la misma. Cuando pulsemos en alguna de ellas el sistema nos rediccionará al componente Result que es encargado de mostrar el contenido.

constructor

    constructor(props) {
    super(props);
    this.rows = this.props.rows;
    this.handleSubmit = this.handleSubmit.bind(this);
  }

Crea el componente.

handleSubmit

    handleSubmit(event) {
    var params = {};
    params.success = function(request,response){
      browserHistory.push({
        pathname: '/result',
        state: { data: response }
      });
    }
    params.error = function(response){
      console.log(response);
    }
    params.data = event.target['id'];
    params.type = "wiki";
    if(params.data !== "")
      CommonActions.list(params, "getData");
    event.preventDefault();
  }

Cuando seleccionamos una fila de la tabla, se llama a esta función que nos trae el contenido con el que esta relacionado, si todo funciona correctamente se redirige al componente Result por medio del browserHistory.push añadiendo el salto a esa "ruta" (componente Result) y pasándole la información del contenido.

render

    render(){
    this.rows = this.props.rows;
    var length = 10;
    var that = this;
    if(this.rows){
      var rows = Object.keys(this.rows).map(function (key) { return that.rows[key]; });
      length = this.rows.length;
      return(
        <Table
          rowHeight={50}
          rowsCount={length}
          width={1200}
          height={50*(length+1)}
          headerHeight={50}>
          <Column
            header={<Cell>{"Description"}</Cell>}
            cell={<TextCellName data={rows} col="data" col2="name"/>}
            width={600}
            fixed={true}
            align={'center'}
          />
          <Column
            header={<Cell>{"leer"}</Cell>}
            cell={({rowIndex, ...props}) => (
              <Button id={rows[rowIndex]["name"]} onClick={this.handleSubmit}>Read</Button>
            )}
            width={600}
            fixed={true}
            align={'center'}
          />
        </Table>
      );
    }
    else 
      return(<div>"Enter search..."</div>);
  }

Esta función muestra la tabla de resultados en caso de que los haya (if(this.rows)) si no simplemente mostrará un texto indicando al usuario que introduzca una nueva búsqueda.

⚠️ **GitHub.com Fallback** ⚠️