Фиксация колонок

Фиксация колонок — это механизм, позволяющий закреплять определённые столбцы таблицы так, чтобы они оставались видимыми при горизонтальной прокрутке. В библиотеке Naive UI этот функционал реализуется через свойство fixed у объекта колонки в компоненте <n-data-table>.

Свойство fixed

Свойство fixed может принимать значения:

  • "left" — колонка фиксируется слева;
  • "right" — колонка фиксируется справа;
  • undefined или false — колонка не фиксирована.

Пример объявления колонки с фиксацией:

const columns = [
  {
    title: 'ID',
    key: 'id',
    fixed: 'left',
    width: 80
  },
  {
    title: 'Имя',
    key: 'name',
    width: 200
  },
  {
    title: 'Возраст',
    key: 'age',
    width: 100
  },
  {
    title: 'Действия',
    key: 'actions',
    fixed: 'right',
    width: 150
  }
];

В данном примере колонка ID закреплена слева, а колонка Действия — справа. Все остальные колонки остаются прокручиваемыми.

Ширина фиксированных колонок

Фиксированные колонки в Naive UI требуют явного указания ширины (width). Если ширина не задана, фиксация может работать некорректно или вызывать смещение остальных колонок при прокрутке.

Рекомендуется использовать числовое значение в пикселях:

width: 120

или строковое с указанием единицы измерения:

width: '120px'

Особенности визуального поведения

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

Комбинация с сортировкой и фильтрацией

Фиксированные колонки поддерживают все стандартные функциональности Naive UI:

  • сортировка через sortable: true
  • фильтрация через filters и filterMultiple
  • рендеринг кастомного контента через render

Пример комбинированного использования:

const columns = [
  {
    title: 'ID',
    key: 'id',
    fixed: 'left',
    width: 80,
    sortable: true
  },
  {
    title: 'Имя',
    key: 'name',
    width: 200,
    filters: [
      { label: 'Алиса', value: 'Alice' },
      { label: 'Боб', value: 'Bob' }
    ],
    filterMultiple: false
  },
  {
    title: 'Действия',
    key: 'actions',
    fixed: 'right',
    width: 150,
    render(row) {
      return h('button', { onClick: () => alert(row.id) }, 'Показать ID')
    }
  }
];

Множественные фиксированные колонки

В одной таблице можно фиксировать несколько колонок с одной стороны. В этом случае Naive UI корректно выстраивает порядок:

  • Колонки фиксированные слева выстраиваются от левого края в порядке объявления.
  • Колонки фиксированные справа выстраиваются от правого края к центру таблицы в обратном порядке объявления.

Ограничения

  1. Производительность при большом количестве колонок — большое количество фиксированных колонок может немного замедлить рендер таблицы из-за необходимости расчёта позиционирования.
  2. Адаптивность — фиксированные колонки не меняют ширину автоматически при изменении размера окна. Для адаптивного поведения нужно самостоятельно использовать медиазапросы или динамически менять width.
  3. Совместимость с виртуализацией — при использовании виртуализации фиксированные колонки должны быть включены в область рендера, иначе появятся визуальные артефакты.

Практические рекомендации

  • Всегда указывать width для фиксированных колонок.
  • Использовать фиксацию только для ключевых колонок (например, идентификаторы, действия).
  • Проверять поведение таблицы при разных размерах экрана, особенно если фиксировано несколько колонок с обеих сторон.
  • Для динамических таблиц, где количество колонок изменяется, пересоздавать массив колонок с корректными fixed и width.

Фиксация колонок в Naive UI позволяет создавать удобные таблицы с высокой читаемостью данных и сохраняет доступ к ключевым полям даже при горизонтальной прокрутке. Она органично сочетается с остальными возможностями таблицы, такими как сортировка, фильтрация и кастомный рендер, обеспечивая гибкость интерфейса.

Оглавление