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
}
}