safe-amethyst

Common filter for all my table instance

Use-case : I have different data base on country but columns remain same.
For example : data1 is data from india with columns : personName, age , gender, data2 is data from USA with same columns : personName, age and gender.
I want to display all table in one view with one common column filter for personName

I have created two instance of table, : indiaTable and americaTable using same column Defs (since columns are same) using useReactTable

I have created column filter for personName for both table. on click on filter button it set indiaTable.getColumn("personName").setFilterValue(FILTER_VALUE) and americaTable.getColumn("personName").setFilterValue(FILTER_VALUE)

But problem with this approuch is if more and more table comes into the picture, I have to create new instance on table in my component and do .getColumn("personName").setFilterValue(FILTER_VALUE) hence making my component bigger and bigger.

Is there is better way to do it?

Below is pseudo code.

const AllCountryTable = () = {

  inputRef = useRef(null)
  indiaTable = useReactTable()
  americaTable = useReactTable()
  
  const handleSubmit = () => {
    FILTER_VALUE = inputRef.current.value
    indiaTable.getColumn("personName").setFilterValue(FILTER_VALUE) 
    americaTable.getColumn("personName").setFilterValue(FILTER_VALUE) 
    // MORE table comes more lines to add
  }

  return(
  <div> 
    <div>Filter by person name</div>
    <input type="text" ref={inputRef} > </input>
    <button onClick={} >Filter</button>
    
    // code to display the tables
    // more table comes more view code needs to add
    {...}
  </div>
)

}

const AllCountryTable = () = {

  inputRef = useRef(null)
  indiaTable = useReactTable()
  americaTable = useReactTable()
  
  const handleSubmit = () => {
    FILTER_VALUE = inputRef.current.value
    indiaTable.getColumn("personName").setFilterValue(FILTER_VALUE) 
    americaTable.getColumn("personName").setFilterValue(FILTER_VALUE) 
    // MORE table comes more lines to add
  }

  return(
  <div> 
    <div>Filter by person name</div>
    <input type="text" ref={inputRef} > </input>
    <button onClick={} >Filter</button>
    
    // code to display the tables
    // more table comes more view code needs to add
    {...}
  </div>
)

}

TanStack•3y ago

safe-amethyst

Common filter for all my table instance

const AllCountryTable = () = {

  inputRef = useRef(null)
  indiaTable = useReactTable()
  americaTable = useReactTable()
  
  const handleSubmit = () => {
    FILTER_VALUE = inputRef.current.value
    indiaTable.getColumn("personName").setFilterValue(FILTER_VALUE) 
    americaTable.getColumn("personName").setFilterValue(FILTER_VALUE) 
    // MORE table comes more lines to add
  }

  return(
  <div> 
    <div>Filter by person name</div>
    <input type="text" ref={inputRef} > </input>
    <button onClick={} >Filter</button>
    
    // code to display the tables
    // more table comes more view code needs to add
    {...}
  </div>
)

}

const AllCountryTable = () = {

  inputRef = useRef(null)
  indiaTable = useReactTable()
  americaTable = useReactTable()
  
  const handleSubmit = () => {
    FILTER_VALUE = inputRef.current.value
    indiaTable.getColumn("personName").setFilterValue(FILTER_VALUE) 
    americaTable.getColumn("personName").setFilterValue(FILTER_VALUE) 
    // MORE table comes more lines to add
  }

  return(
  <div> 
    <div>Filter by person name</div>
    <input type="text" ref={inputRef} > </input>
    <button onClick={} >Filter</button>
    
    // code to display the tables
    // more table comes more view code needs to add
    {...}
  </div>
)

}

Common filter for all my table instance

Similar Threads

Common filter for all my table instance

Similar Threads

Similar Threads

Similar Threads