1
resposta

Estou utilizando react-table-filter , consigo montar a tabela e aparecem os icones de filtro. Mas quando seleciono uma opcao do filtro ele retorna a tabela vazia

O codigo esta montando a tabela e mostrando os icones de filtro. Mas quando seleciono um filtro ele retorna a tabela vazia

import React, { Component } from 'react';
import TableFilter from 'react-table-filter';
import "react-table-filter/lib/styles.css";
import "react-table-filter/lib/bundle.js";

class Tabela extends Component {
  constructor(props) {
    super(props);
    var documentos = this.createTable();
    this.state = {
      'documentos': { documentos },
    };
    this._filterUpdated = this._filterUpdated.bind(this);
  }

  _filterUpdated(newData, filtersObject) {
     this.setState({
      'documentos': newData,
    });
  }

  render() {
    const documentos = this.state.documentos.documentos;
    console.log(documentos) ;
    const elementsHtml = documentos && documentos.map((item, index) => {
      return (
        <tr key={'row_' + index}>
          <td className="cell">
            {item.cod}
          </td>
          <td className="cell">
            {item.titulo}
          </td>
          <td className="cell">
            {item.revisao}
          </td>
          <td className="cell">
            {item.data}
          </td>
          <td className="cell">
            {item.status}
          </td>
        </tr>
      );
    });

    return (
      <main className="conteudoPrincipal">
        <div className="container">
          <div className="col-12">
            <h3>Documentos da Gestão Integrada</h3>
            <table id="doc" className="table table-striped table-hover">
              <thead className="thead-dark">
                <TableFilter
                  rows={documentos}
                  onFilterUpdate={this._filterUpdated}>
                  <th filterkey="cod" casesensitive={'true'} showsearch={'true'}>Codigo</th>
                  <th filterkey="titulo" bgcolor="#E6E8FA">Titulo do Documento</th>
                  <th filterkey="revisao" bgcolor="#E6E8FA">Revisão</th>
                  <th filterkey="data" bgcolor="#E6E8FA">Dt. Aprovação</th>
                  <th filterkey="status" bgcolor="#E6E8FA">Status</th>
                </TableFilter>
              </thead>
              <tbody> {elementsHtml}</tbody>
            </table>
          </div>

        </div>
      </main>

    );
  }

  createTable = () => {
    let table = []

    // Outer loop to create parent
    for (let j = 0; j < 60; j++) {
      let documento = new Object();
      documento.cod = 'Cod' + j;
      documento.titulo = 'titulo' + j;
      documento.revisao = 'Revisão' + j;
      documento.data = 'Dt.Aprov' + j;
      documento.status = 'Status' + j;
      table.push(documento);
    }

    return table
  }


}
1 resposta

Fala ai Claudio, tudo bem? Posso te pedir um favor? Compartilha o projeto completo, assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software