sharkdest

Сделайте кастомный фильтр, с обработчиками onChange и onKeyPress, в которых и будет происходить переключение функции фильтрации. Например, так (поле lastName, посмотреть в деле можно вбивая короткие слова, которые являются частью более длинных - такие как war, son, comb, sign, child, work, can и т.п.).

UPD. Вынесено из комментариев:

у меня много столбцов, плюс к этому много таблиц, и логику фильтра нужно применить ко всему

Ну так сделайте компонент-обёртку для этой таблицы, который будет задавать дефолтный компонент фильтра и дефолтную же функцию фильтрации - их вы можете взять из моего примера.

UPD. https://codesandbox.io/s/nn1z53jn4l (только первые три поля, у последнего фильтр оставлен переопределённым).

Вы используете компонент HashRouter, поэтому и хэши в адресной строке. Для вашей задачи вам подойдет BrowserRouter
А для ссылок использовать компонент Link

attr()

https://developer.mozilla.org/ru/docs/Web/Guide/HT...

На вопрос ответил автор вопроса, я в свою очередь попытаюсь объяснить что произошло.

Рендер в реакте всегда идёт по наименее трудозатратному пути, а именно вычисляет дельту (разницу) между новым стейтом и предыдущим, если таковой имеется. Например:

class TodoList extends React.Component {
  state = {
    todos: [
      'Commit',
      'Push'
    ]
  }
  render() {
    return <ul>
      {this.state.todos.map(item => {
        return <li>{ todo }</li>
      }
    </ul>
  }
}

Если стейт компонента изменится, скажем при добавление элемента в начало списка todos, так что он станет таким:

const todos = [
  'Init',
  'Commit',
  'Push'
]

Реакт вычислит два древа VirtualDOM:

// Начальный стейт
<ul>
  <li>Commit</li>
  <li>Push</li>
</ul>
// Добавлен элемент
<ul>
  <li>Init</li> // <- разница начинается здесь и до конца древа
  <li>Commit</li>
  <li>Push</li>
</ul>

Здесь выполняется работа которой можно было бы избежать. К примеру если бы элемент был добавлен в конец списка:

const todos = [
  'Commit',
  'Push',
  'Merge'
]

То реакт получил бы на сравнение другие два древа элементов:

// Начальный стейт
<ul>
  <li>Commit</li>
  <li>Push</li>
</ul>
// Добавлен элемент
<ul>
  <li>Commit</li>
  <li>Push</li>
  <li>Merge</li> <- разница начинается здесь, от начала и до сих по ничего не менялось
</ul>

Дельта этих двух списков меньше, а значит и работы нужно сделать меньше.

Совершенно очевидно что <li>Commit</li> и <li>Push</li> не менялись, однако реакт недостаточно умён чтобы это понять. Чтобы помочь ему следует воспользоваться специальным пропом key={}. Он может быть значением любого типа, единственно требование — значение должно стабильно идентифицировать соответствующие данные.

Если бы компонент выглядел так:

class TodoList extends React.Component {
  state = {
    todos: [
      { id: 0, text: 'Commit' },
      { id: 1, text: 'Push' }
    ]
  }
  render() {
    return <ul>
      {this.state.todos.map(item => {
        return <li key={todo.id}>{ todo.text }</li>
      }
    </ul>
  }
}

То добавление элемента в начало массива, породило бы следующий стейт:

const todos = [
  { id: 2, text: 'Init' },
  { id: 0, text: 'Commit' },
  { id: 1, text: 'Push' }
]

И, снова, два древа элементов:

// Начальный стейт
<ul>
  <li>Commit</li> // id 0
  <li>Push</li> // id 1
</ul>
// Добавлен элемент
<ul>
  <li>Init</li> // id 2 новый элемент отобразится в начале
  <li>Commit</li> // id 0
  <li>Push</li> // id 1 
</ul>

Благодаря подсказке, реакт не учтёт в дельте элементы чьи идентификаторы не изменились, и, как следствие, не будет делать лишних действий.

Таким образом использовать индекс в массиве в качестве ключа — не лучшая идея, особенно если массив будет меняться. По той же причине не следует использовать Math.random() в качестве ключа, так вы почти гарантировано будете всегда получать нестабильные идентификаторы.

Подробнее об этом можно почитать здесь — Reconciliation.

this.setState(({ clientData }) => ({
  clientData: {
    ...clientData,
    active: !clientData.active,
  },
}));

Не вижу, чтобы где-то происходило чтение данных из localStorage. Ну и какой-то малопонятный мусорный код ещё появился, newColumns - что это, зачем? В header.ondrop сохраняете:

localStorage.setItem('reorder', JSON.stringify(this.reorder));

В конструкторе получаете:

this.reorder = JSON.parse(localStorage.getItem('reorder')) || [];

Вам нужно получить ваш объект, изменить поле и отослать обратно в setState

1) через клонирование объекта

let checkboxes= Object.assign({}, this.state.checkboxes); // Создаем копию, можно просто ссылку взять, но копию безопаснее
checkboxes[e.target.value] = false; // изменяем поле
this.setState({checkboxes}); // Сохраняем

2) через оператор spread

this.setState({
    checkboxes: {
          ...this.state.checkboxes,
          [e.target.value]: false // измененное поле объекта checkboxes
    }
})

Чтобы можно было использовать then, замени

getUserData = (userData, criteria) => {
  let key = 0;
  let items = usersData.map((number) =>
     {return {name: number[criteria]}}
   );
   for (let i of items) {
     i.key = key++;
   }
   return items
};

на

getUserData = (userData, criteria) => {
  return new Promise(resolve => {
    let key = 0;
    let items = usersData.map((number) =>
       {return {name: number[criteria]}}
     );
     for (let i of items) {
       i.key = key++;
     }
     resolve(items)
  })
};

1. Объявлять componentDidMount стрелочной функцией - маразм. В этом нет никакого смысла.

2. Если ваша функция выполняется синхронно достаточно сократить до:

const response = myFunction(1);
this.setState({ response });

3. Если асинхронно:

componentDidMount() {
  const { someValue } = this.props;
  // асинхронный вызов, возвращающий Promise
  fetchSomeData(someValue).then(response => this.setState({ response }));
}

или:

async componentDidMount() {
  const { someValue } = this.props;
  // асинхронный вызов, возвращающий Promise
  const response = await fetchSomeData(someValue);

  this.setState({ response }));
}

4. Сама функция myFunction написана очень плохо содержит ошибку. Лучше:
const myFunction = num => ++num;