T
TanStack•3y ago
ugly-tan

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

}
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?