How to search multiple columns using REACT

aChinchilla

I am trying to accomplish these lines of code but with REACT

  $.fn.dataTable.ext.search.push(
    function( settings, searchData, index, rowData, counter ) {})

so basically inside here:

    const ctReadyHandler = function (e) {
      let datasetId = e.datasetId;
      let domId = e.domId;
      let editor = e.editor;
      let table = e.table;

   //CUSTOM SEARCH HERE
     table.ext.search.push ?????
}

allan

Hi,

$.fn.dataTable.ext.search is global - i.e. it applies to all tables on the page, so you would use the same $.fn.dataTable.ext.search array.

However, it looks like you are using CloudTables. I would encourage you not to modify it like that. Use the built in SearchBuilder or SearchPane control.

Allan

aChinchilla

Hi @allan ,

Thanks for the reponse, I think a searchbuilder is also good. To give context here is what I'm trying to accomplish. It's very simple.

In this demo, you will see a table and simply I want to create a predefined search/filter that filters/searches the table upon loading to say where item = chairs or tables.

https://prod.d314z4ftewc4me.amplifyapp.com/

below is my code so far.

import React, { useState, useEffect } from 'react';
import '@aws-amplify/ui-react/styles.css';
import './App.css';
import { CloudTables } from '@cloudtables/react';

function App() {
  useEffect(() => {

const itemOne = 'chairs'
const itemTwo = 'tables'

const ctReadyHandler = function (e) {
  let datasetId = e.datasetId;
  let domId = e.domId;
  let editor = e.editor;
  let table = e.table;

  // add search builder with predefined search with OR operator to find itemOne or itemTwo in the item column

}

document.addEventListener('ct-ready', ctReadyHandler);

return () => {
  document.removeEventListener('ct-ready', ctReadyHandler);
}

  }, []);

  return (
    <div className="App">

      <CloudTables
        src="https://pe5lg5it79.cloudtables.io/loader/7a0cf73c-9b5f-11ee-b957-eff473c55a31/table/bs5"
        apiKey="xxxxxxxxxxxxxxxxxxxxxxx"
      />

    </div>
  );
}
export default App;

As you see in the code, on line 18 I want to begin the init of a searchbuilder with predefined search/filter. My biggest obstacle is I can't seem to figure out how to access the searchBuilder API?

allan

Yup - with DataTables, that's straightforward. However, not so much with CloudTables which is not designed for that kind of customisation I'm afraid. There is no way to specify customised configuration options for the DataTable when using CloudTables - it is entirely managed via the UI.

What you can do is limit the data in the data set completely, which might do what you want. That's called conditional data access and effectively filters the table.

Allan

aChinchilla

Hi @allan ,

I like server side filtering better and I can probably figure this out. However I have to ask, are there any code examples out there showing a very simple case/example of this?

Thank you in advance.
-Abel

allan

Basically this but with server-side processing enabled? I don't think there are actually, but I've knocked this together to show it working.

Allan

aChinchilla

Hi @allan ,

thanks for the code!

-Abel