How avoid Warning: [antd: Table] `FilteredKeys` should all be controlled or not controlled

Question

When I use custom filters and native and design filters in the same problem I get next error

Warning: [antd: Table] `FilteredKeys` should all be controlled or not controlled.

I can use just custom filters on just ant design filters when create table to avoid this warning, but maybe there is a way avoid it different way, or it's just library bug.

I find topic where developer say that this is not a bug and the problem was closed, but why I get red warning in my project build and development. It's ok?

Answer 1

Since you haven't demonstrated your code I can only show how I resolved the same issue in my case.

Initially, filters for my columns were set like this:

for (let col of columns) {
  if (!filter[col.key])
    continue;

  col.filteredValue = filter[col.key].value || null;
}
  

The code triggered the same warning as you get. In documentation for the table component is only said that

Defining filteredValue or sortOrder means that it is in the controlled mode

Whereas if we go down the stack to the file that throws it, we'll find the next function:

var mergedFilterStates = React.useMemo(function () {
    var collectedStates = collectFilterStates(mergedColumns, false);
    var filteredKeysIsNotControlled = collectedStates.every(function (_ref5) {
      var filteredKeys = _ref5.filteredKeys;
      return filteredKeys === undefined;
    }); // Return if not controlled

    if (filteredKeysIsNotControlled) {
      return filterStates;
    }

    var filteredKeysIsAllControlled = collectedStates.every(function (_ref6) {
      var filteredKeys = _ref6.filteredKeys;
      return filteredKeys !== undefined;
    });
    (0, _devWarning["default"])(filteredKeysIsNotControlled || filteredKeysIsAllControlled, 'Table', '`FilteredKeys` should all be controlled or not controlled.');
    return collectedStates;
  }, [mergedColumns, filterStates]);

Simply put, there is a check whether all column filters are either controlled (column.filteredValue !== undefined) or uncontrolled (column.filteredValue === undefined).

So, to get rid of the warning I indicated that all my column filters are controlled (even if they aren't filtered at this particular moment, they aren't undefined either):

for (let col of columns) {
  col.filteredValue = (filter[col.key] || {}).value || null;
}

As of why this warning was introduced, we can see here that the change was intended to prevent some edge cases when one could accidentally use filteredValue alongside onFilter and break filters for other columns. That issue could be resolved by changing filteredValue to defaultFilteredValue, but it was decided to add the warning instead. However, in that case satisfying the warned condition wouldn't guarantee the right behaviour: setting up filteredValue for all the columns turns off the warning but don't make the problematic filter workable.

So, answering the second part of your question if this warning makes sense, it depends as in my case all the column filters worked just fine even with this warning displayed.