Кастомные фильтры

В Carbon Components Svelte кастомные фильтры представляют собой механизм динамической фильтрации данных в таблицах, списках и коллекциях компонентов. Они позволяют расширить стандартный функционал и реализовать фильтрацию под специфические требования приложения. Основная идея заключается в создании логики фильтрации на уровне Svelte-компонентов и интеграции её с компонентами Carbon, такими как DataTable и List.

Создание кастомного фильтра

Кастомный фильтр реализуется через функцию фильтрации, которая принимает набор данных и возвращает их в отфильтрованном виде. Простейший пример:

function customFilter(items, query) {
  return items.filter(item => item.name.toLowerCase().includes(query.toLowerCase()));
}

Здесь items — массив объектов, а query — строка поиска. Важно, чтобы функция была чистой, не изменяла исходные данные, а возвращала новый массив.

Интеграция фильтра с DataTable

Для подключения кастомного фильтра к DataTable необходимо:

  1. Создать переменную состояния для хранения значения фильтра:
  1. Связать значение фильтра с компонентом ввода:
  1. Отобразить отфильтрованные данные:

  
      
        Имя
        Роль
      
    
      {#each filteredRows as row}
        
          {row.name}
          {row.role}
        
      {/each}

Многоуровневая фильтрация

Для более сложных случаев можно комбинировать несколько фильтров:

function advancedFilter(items, filters) {
  return items.filter(item =>
    (!filters.name || item.name.toLowerCase().includes(filters.name.toLowerCase())) &&
    (!filters.role || item.role.toLowerCase() === filters.role.toLowerCase())
  );
}

Использование:

let filters = { name: '', role: '' };
$: filteredRows = advancedFilter(rows, filters);

Оптимизация фильтрации

  1. Использование $: для реактивности — позволяет автоматически обновлять отображаемый массив при изменении фильтра.
  2. Дебаунс ввода — для больших таблиц рекомендуется вводить задержку при обработке ввода пользователя, чтобы избежать перерендеринга при каждом нажатии клавиши.
  3. Кеширование результатов — если фильтруемый массив очень большой, можно хранить результаты фильтрации в объекте кэша по ключам фильтров.

Интеграция с компонентом List

Для компонент типа List или MultiSelect можно использовать кастомные фильтры так же, как и с таблицей:






  {#each filteredItems as item}
    {item}
  {/each}

Стилизация и UX

  • Добавление индикатора загрузки или подсветки совпадений делает фильтрацию более наглядной.
  • Использование компонентов Carbon, таких как Search или TextInput, обеспечивает единый визуальный стиль.
  • Реактивные фильтры позволяют мгновенно показывать результаты без дополнительных действий пользователя.

Поддержка сложных условий

Кастомные фильтры могут поддерживать:

  • Диапазоны чисел (например, фильтр по цене)
  • Дата и время (используя стандартные объекты Date)
  • Списки значений (множественный выбор)
  • Регулярные выражения для сложных совпадений

Пример фильтра по диапазону:

function rangeFilter(items, min, max) {
  return items.filter(item => item.value >= min && item.value <= max);
}

Примечания по производительности

  • Для больших наборов данных предпочтительно фильтровать на уровне сервера, а не на клиенте.
  • При необходимости сложных вычислений можно использовать derived store в Svelte для минимизации перерендеринга.
Оглавление