How to search multiple columns using REACT

How to search multiple columns using REACT

aChinchillaaChinchilla Posts: 9Questions: 3Answers: 0
edited December 2023 in General

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • aChinchillaaChinchilla Posts: 9Questions: 3Answers: 0

    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?

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • aChinchillaaChinchilla Posts: 9Questions: 3Answers: 0

    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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin
    Answer ✓

    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

  • aChinchillaaChinchilla Posts: 9Questions: 3Answers: 0

    Hi @allan ,

    thanks for the code!

    -Abel

Sign In or Register to comment.