Как настроить фильтрацию столбца таблицы, используя чекбоксы?

1. Настройка фильтрации столбца таблицы с использованием чекбоксов может быть выполнена следующим образом:

- Создайте компонент, который будет содержать чекбоксы для каждого значения, которое может быть отфильтровано.
- Установите состояние для каждого чекбокса. Например, используйте useState Hook:

```jsx
const [filters, setFilters] = useState({
  value1: true,
  value2: false,
  value3: false,
});
```

- Для каждого чекбокса добавьте обработчик onChange, который будет обновлять состояние выбранного фильтра:

```jsx
const handleFilterChange = (e) => {
  const { name, checked } = e.target;
  setFilters((prevFilters) => ({
    ...prevFilters,
    [name]: checked,
  }));
};
```

- В функции отображения таблицы примените фильтрацию к столбцу, используя метод .filter(). Например:

```jsx
const filteredData = data.filter((row) => {
  return (
    (filters.value1 && row.value === 'value1') ||
    (filters.value2 && row.value === 'value2') ||
    (filters.value3 && row.value === 'value3')
  );
});
```

- Отобразите отфильтрованные данные в таблице.

2. Реализация фильтрации столбцов с использованием нескольких условий вместо одного в массиве при помощи функции .filter() на React может выглядеть следующим образом:

```jsx
const filteredData = data.filter((row) => {
  return (
    (filters.value1.includes(row.value1) || filters.value1.length === 0) &&
    (filters.value2.includes(row.value2) || filters.value2.length === 0) &&
    (filters.value3.includes(row.value3) || filters.value3.length === 0)
  );
});
```

В этом примере используется состояние `filters`, которое содержит массивы значений для каждого столбца, которые необходимо отфильтровать. Если массив фильтра пустой (длина равна 0), то соответствующий столбец не фильтруется. При использовании `.includes()`, фильтр будет применяться, только если значение строки содержится в массиве фильтра.

Не забудьте обновить состояние `filters` при выборе или отмене выбора фильтра.

// создаем состояние для выбранных языков
const [checkedLanguages, setCheckedLanguages] = useState([]);

// создаем состояние для отображаемых данных
const [displayData, setDisplayData] = useState([]);

// данные о языках
const languagesData = [
    { id: "1", name: "Javascript" },
    { id: "2", name: "Python" },
    { id: "3", name: "Java" },
    { id: "4", name: "Kotlin" },
    { id: "5", name: "Dart" },
    { id: "6", name: "C#" }
];

// фильтруем выбранные языки и обновляем отображаемые данные
useEffect(() => {
    if (checkedLanguages.length > 0) {
        const newData = languagesData.filter(language => checkedLanguages.includes(language.name));
        setDisplayData(newData);
    } else {
        setDisplayData(languagesData);
    }
}, [checkedLanguages]);

// обработчик изменения флажка
function handleCheckboxChange(event) {
    const languageName = event.target.value;
    if (event.target.checked) {
        setCheckedLanguages([...checkedLanguages, languageName]);
    } else {
        const newCheckedLanguages = checkedLanguages.filter(language => language !== languageName);
        setCheckedLanguages(newCheckedLanguages);
    }
}

// отображаем выбранные языки
{checkedLanguages.map(language => (
    

        
{language}
    
))}

// отображаем флажки для языков
{languagesData.map(language => (
    

        
        {language.name}
    
))}

// отображаем отфильтрованные данные

    {displayData.map(language => (
        

            {language.name}
        
    ))}