title: How do I create select filters for my material-ui table in a reusable way?
body: <p>I am creating my own filterable table in React using Material UI.</p>
  
  <p>I created a table which I pass the following props:</p>
  
  <pre><code>      createObject('BlueTree','05-02-2015','ativo', 'Vinhedo', 'São Paulo'),
        createObject('Inner','07-08-2016','inativo', 'Belo Horizonte', 'Minas Gerais'),
        createObject('Teste','05-02-2017','ativo', 'Teresina', 'Piauí'),
        createObject('hello','05-02-2015','ativo', 'Osasco', 'São Paulo'),
        createObject('Inner','07-08-2016','inativo', 'Lavras', 'Minas Gerais'),
        createObject('Teste','05-02-2017','inativo', 'Barras', 'Piauí'),
        createObject('xiaomi','05-02-2015','inativo', 'Indaiatuba', 'São Paulo'),
        createObject('Inner','07-08-2016','ativo', 'Pedrinhas', 'Minas Gerais'),
        createObject('Teste','05-02-2017','ativo', 'Esperantina', 'Piauí'), 
  </code></pre>
  
  <p>and select tag such as "State, City..."</p>
  
  <pre><code>selectFilter: [
        { Name: 'estado'},
        { Name: 'cidade'},
        { Name: 'status'},
        { Name: 'pms'},
      ],
  </code></pre>
  
  <p>And this is where I call the table</p>
  
  <pre><code>&lt;Table listHotels={listHotels} selectFilter={selectFilter}&gt;&lt;/Table&gt;
  </code></pre>
  
  <p>Inside Table component I am able to create material UI selects that will represent the data. </p>
  
  <p>However, I am not sure how to filter these arrays based on the select option since, if I have 4 select tags filters I would have to filter the array based on the option selected. And the logic would change if I add one more selects to it, and that's not reusable at all. </p>
  
  <p>Is this really a front-end task or should I leave it with the back end? In my opinion it makes more sense to just execute a select on a table on the back end and return the filtered data.</p>