Error: React-Table: Could not find a column with id:

Question

I'm trying to make my columns searchable, but I keep getting an error that says there are no columns with the id '-whatever I search for- '. I've search extensively, and I can't seem to find an explanation. I'm guessing the problem is in the data I'm passing.

Here's the code so far:

const defaultColumn = React.useMemo(
    () => ({
      Filter: ColumnTableFilter
    }),
    []
  )

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state,
    preGlobalFilteredRows,
    setGlobalFilter,
  } = useTable(
    { 
      columns, 
      data,
      defaultColumn,
     },
    useFilters,
    useGlobalFilter
  );

  return (
    <div className="qtable-container" {...props}>
      {tableFilterable ?
        <div className='global-search-bar-container'>
          <GlobalTableFilter
            className='search-bar'
            preGlobalFilteredRows={preGlobalFilteredRows}
            globalFilter={state.globalFilter}
            setGlobalFilter={setGlobalFilter}
          />
        </div>
        : null
      }
      <table {...getTableProps()} className={generateClassName()}>
        <thead className='table-header'>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>
                {column.render('Header')}
                <div>{column.canFilter ? column.render('Filter') : null}</div>
                </th>
              ))}
            </tr>
          ))}
        
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()} >
                {row.cells.map((cell) => {
                  return <td {...cell.getCellProps()} className='cell'>{cell.render('Cell')}</td>;
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
    );
}

And the column filter:

  const count = column.preFilteredRows.length

  return (
    <TextInput
      value={column.filterValue || ''}
      onChange={e => {
        setFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
      }}
      placeholder={`Search ${count} records...`}
    />
  )
}

and the data:

const data = React.useMemo(
        () => [
            {
                transformationCount: '21 Transforms',
                batchName: 'Avera_name',
                id: 1
            },
            {
                transformationCount: '14 Transforms',
                batchName: 'Jenn_name',
                id: 2
            },
            {
                transformationCount: '12 Transforms',
                batchName: 'Jude_name',
                id: 3
            }
        ],
        []
    );

    const columns = React.useMemo(
        () => [
            {
                Header: 'Name',
                accessor: 'batchName', // accessor is the "key" in the data
            },
            {
                Header: 'Transformations',
                accessor: 'transformationCount'
            }
        ],
        []
  );

Answer 1

The issue is in your column filter function. The 'column' object is undefined.

I had the same exact issue and the same exact code as yours. Here's the solution:

function DefaultColumnFilter({
  column: { filterValue, preFilteredRows, setFilter },
}) {
  const count = preFilteredRows.length; //Notice here I don't use column.preFilteredRows

  return (
    <CustomInput
      formControlProps={{
        fullWidth: true,
      }}
      inputProps={{
        value: filterValue || "", //Notice here as well I don't use column.filterValue
        onChange: (e: any) => {         
          setFilter(e.target.value || undefined); 
        },
        placeholder: `Buscar ${count} registros...`,
      }}
    />
  );
}

Soo, by removing the usage of the parameter 'column' inside the function, the code should be able to work now