Компонент NrsTableFilter

Компонент NrsTableFilter — это универсальное решение для отображения таблиц с фильтрацией, поиском, сортировкой и пагинацией. Он обеспечивает гибкую настройку отображаемых колонок, а также возможность управления фильтрами, поиском и отображением данных через пропсы и события.

📦 Установка и подключение

Убедитесь, что вы импортировали компонент:

import {NrsTableFilter} from "nrs"

И используйте его в родительском компоненте:

<NrsTableFilter
  :columns="columns"
  :items="list"
  :pagination="pagination"
  :sort="sort"
  :countFilters="countFilters"
  :setPage="setPage"
  :setSort="setSort"
  :setFilter="setFilter"
  :search="search"
  :setSearch="setSearch"
  :searchHint="searchHint"
  :searchSelect="searchSelect"
  :setSearchVariants="setSearchVariants"
  :detailsTo="detailsTo"
  :fullMode="true"
  :showAll="showAll"
  @clear-all-settings="handleClearAllSettings"
  @show-all-fields="handleShowAllFields"
>
    <template #header-buttons>
        // Свои кнопки
        <v-btn @click="createUser" min-width="46" width="46" height="46" variant="flat" title="Создать" class="table-head-icon">
        <v-icon class="color-primary" size="x-large" icon="mdi-plus"></v-icon>
        </v-btn>
    </template>
</NrsTableFilter>

⚙️ Пропсы

| Название | Тип | Обязательно | Описание | |-------------------|---------------|:--------:|----------| | columns | Array | ✅ | Список колонок таблицы, с параметрами фильтрации и сортировки | | items | Array | ✅ | Список данных для отображения | | pagination | Object | ✅ | Объект с параметрами пагинации (страницы, количество и т.д.) | | sort | Array | ✅ | Массив объектов сортировки | | search | String | ❌ | Значение строки поиска | | searchHint | String | ❌ | Подсказка к полю поиска | | searchSelect | Array | ❌ | Список полей, по которым можно осуществлять поиск | | countFilters | Number | ✅ | Количество активных фильтров | | detailsTo | String | ❌ | URL для перехода по клику на строку | | fullMode | Boolean | ❌ | Показывать ли кнопку переключения отображения всех полей | | showAll | Boolean | ❌ | Состояние отображения всех полей | | setPage | Function | ✅ | Установка текущей страницы | | setSort | Function | ✅ | Установка сортировки | | setFilter | Function | ✅ | Установка фильтров | | setSearch | Function | ✅ | Установка строки поиска | | setSearchVariants | Function | ❌ | Установка параметров поиска по полям | | handleClickRow | Function | ❌ | Обработка клика по строке |

📤 События

| Название | Описание | |----------------------|----------| | clear-all-settings | Сброс всех фильтров, сортировок и поиска | | show-all-fields | Переключение между полным и кратким набором колонок |

🧩 Слоты

| Название | Описание | |--------------------|----------| | header-buttons | Дополнительные кнопки, размещаемые справа от фильтров |

✅ Пример описания колонок

const columns = [
  {
    heading: 'ФИО',
    value: 'fio',
    sortOptions: {
      sortable: true,
      sortByValue: 'fio',
    },
    filterOptions: {
      filterByValue: 'fio',
      filterType: 'like',
    }
  },
  {
    heading: 'Статус',
    value: 'enabled',
    sortOptions: {
      sortable: true,
      sortByValue: 'enabled',
    },
    filterOptions: {
      filterByValue: 'enabled',
      filterType: 'eq-check',
      filterValues: [
        { title: 'Активен', value: true },
        { title: 'Неактивен', value: false }
      ],
    }
  },
  {
    heading: 'Специалист',
    // -------------------------
    // ВАЖНО: Поле type для отдельного тип отображения таблицы
    // -------------------------
    type: 'employee',
    value: 'operator',
    subValue: 'shortFio',
    valueSecond: 'internalNumber',
    sortOptions: {
      sortable: true,
      sortByValue: 'internalNumber',
    },
    filterOptions: {
      filterByValue: 'operator',
      filterType: 'eq-by-group',
      filterApi: apiForFilter
    },
  },
]

🔍 Поиск с выбором поля

Если вы хотите, чтобы пользователь мог выбирать поля для поиска:

const searchSelect = [
  { title: "ФИО", value: "fio" },
  { title: "Email", value: "email" },
  { title: "Логин", value: "username" },
];

💡 Полезные замечания

• Компонент Chip.vue визуализирует активные фильтры, которые можно закрывать.

• Кнопка "Очистить" сбрасывает всё: фильтры, сортировки, поиск.

• FilterType по умолчанию определяет сразу тип отображания данных таблицы и тип фильтра. Но если хотите отработать какое-то другое отображение данных таблицы, которое не определено в компоненте, можно указать type и дополнительно его отработать в компонете TableColumns.vue.

• Для отключения сортировки достаточно указать sortOptions: { sortable: false }, но для отключения фильтра нужно указать filterOptions: { filterByValue: '', filterType: ... }.