Таблица

Базовое использование

Компонент Table можно использовать с минимальной конфигурацией для отображения набора данных. В своей основе он требует свойство data-source для предоставления данных для рендеринга. По умолчанию он автоматически генерирует столбцы на основе ключей объектов в источнике данных.

<script setup lang="ts">
  const tableData = [
    { id: 1, name: 'Джон Доу', age: 30 },
    { id: 2, name: 'Джейн Смит', age: 25 },
    { id: 3, name: 'Боб Джонсон', age: 45 },
  ];
</script>
<template>
  <Table :data-source="tableData" />
</template>

В этом примере компонент Table рендерит простую таблицу, используя массив tableData. Свойство data-source принимает массив объектов, где каждый объект представляет строку, а его ключи (id, name, age) используются для автоматического создания столбцов. Компонент отображает данные в базовом формате без необходимости дополнительной конфигурации. Этот подход идеально подходит для быстрой визуализации данных без настройки.

Конфигурация столбцов

Свойство columns позволяет определять структуру и поведение каждого столбца в компоненте Table. Оно принимает массив объектов IColumn, где каждый объект настраивает отдельный столбец.

Поле данных

Свойство dataField указывает ключ в объекте data-source, который соответствует данным этого столбца. Если оно не указано, столбец может не отображать данные, если они не выведены из ключей источника данных.

<template>
  <Table 
    :data-source="tableData" 
    :columns="[
      { dataField: 'name' }, 
      { dataField: 'color' }, 
      { dataField: 'weightGrams' }
    ]">
  </Table>
</template>

Имя

Свойство name предоставляет внутренний идентификатор для столбца, полезный для ссылок в шаблонах или логике.

<template>
  <Table :data-source="tableData" :columns="columns"/>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, name: 'Джон Доу'}];
  const columns = [{dataField: 'name', name: 'userName'}];
</script>

Тип

Свойство type определяет тип данных столбца. Это свойство задаёт структуру и поведение столбца, включая то, как он обрабатывает фильтрацию и редактирование.

Строка или число

Когда свойство type установлено в "string" или "number", столбец настраивается для обработки текстовых или числовых данных соответственно.

<template>
  <Table :data-source="tableData" :columns="columns"/>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, name: 'Джон Доу', age: 30}];
  const columns = [
    {dataField: 'name', type: 'string'},
    {dataField: 'age', type: 'number', isFilter: true}
  ];
</script>

Выбор

Когда свойство type установлено в "select", столбец настраивается для обработки выпадающих списков.

<template>
  <Table :data-source="tableData" :columns="columns"/>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, country: 'США'}];
  const columns = [{
    dataField: 'country',
    type: 'select',
    isFilter: true
  }];
</script>

Дата

Когда свойство type установлено в "date", столбец настраивается для обработки значений дат.

<template>
  <Table :data-source="tableData" :columns="columns"/>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, birthdate: '1990-01-01'}];
  const columns = [{
    dataField: 'birthdate',
    type: 'date',
    isFilter: true
  }];
</script>

Заголовок

Свойство caption настраивает текст, отображаемый в заголовке столбца, для улучшения читаемости или локализации. Если не указано, по умолчанию используется dataField с заглавной буквы.

<template>
  <Table :data-source="tableData" :columns="columns"/>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, name: 'Джон Доу'}];
  const columns = [{dataField: 'name', caption: 'Полное имя'}];
</script>

Видимость

Свойство visible управляет отображением столбца, позволяя скрывать или показывать столбец без удаления его из конфигурации.

<template>
  <Table :data-source="tableData" :columns="columns"/>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, name: 'Джон Доу'}];
  const columns = [{dataField: 'id', visible: false}, {dataField: 'name'}];
</script>

Фильтрация

Свойство isFilter включает фильтрацию для столбца, позволяя пользователям фильтровать данные в этом столбце.

<template>
  <Table :data-source="tableData" :columns="columns"/>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, name: 'Джон Доу'}];
  const columns = [{dataField: 'name', isFilter: true}];
</script>

Сортировка

Свойство isSort включает сортировку для столбца, позволяя пользователям сортировать данные по этому столбцу.

<template>
  <Table :data-source="tableData" :columns="columns"/>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, name: 'Джон Доу'}];
  const columns = [{dataField: 'name', isSort: true}];
</script>

Изменение размера

Свойство isResized позволяет вручную изменять размер столбца путём перетаскивания, давая пользователям возможность интерактивно настраивать ширину столбца.

<template>
  <Table :data-source="tableData" :columns="columns"/>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, name: 'Джон Доу'}];
  const columns = [{dataField: 'name', isResized: true}];
</script>

Ширина

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

<template>
  <Table :data-source="tableData" :columns="columns"/>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, name: 'Джон Доу'}];
  const columns = [{dataField: 'name', width: 200}];
</script>

Минимальная ширина

Свойство minWidth задаёт минимальную ширину столбца в пикселях, гарантируя, что столбец не станет меньше определённого размера, что полезно при изменении размера.

<template>
  <Table :data-source="tableData" :columns="columns" is-resized/>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, name: 'Джон Доу'}];
  const columns = [{dataField: 'name', minWidth: 100}];
</script>

Максимальная ширина

Свойство maxWidth задаёт максимальную ширину столбца в пикселях, ограничивая, насколько широким может стать столбец при изменении размера.

<template>
  <Table :data-source="tableData" :columns="columns" is-resized/>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, name: 'Джон Доу'}];
  const columns = [{dataField: 'name', maxWidth: 300}];
</script>

Фильтр по умолчанию

Свойство defaultFilter задаёт начальное значение фильтра для столбца, предварительно применяя фильтр при загрузке таблицы.

<template>
  <Table :data-source="tableData" :columns="columns"/>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, name: 'Джон Доу'}, {id: 2, name: 'Джейн Смит'}];
  const columns = [{dataField: 'name', isFilter: true, defaultFilter: 'Джон'}];
</script>

Сортировка по умолчанию

Свойство defaultSort задаёт начальный порядок сортировки для столбца, предварительно сортируя таблицу по этому столбцу при загрузке.

<template>
  <Table :data-source="tableData" :columns="columns"/>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, name: 'Джон'}, {id: 2, name: 'Джейн'}];
  const columns = [{dataField: 'name', isSort: true, defaultSort: 'asc'}];
</script>

Маска

Свойство mask применяет маску ввода к значениям столбца для отображения или редактирования, форматируя значения ( например, номера телефонов, цены) единообразно.

<template>
  <Table :data-source="tableData" :columns="columns"/>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, price: 1234.56}];
  const columns = [{dataField: 'price', mask: 'price'}];
</script>

Шаблон ячейки

Свойство cellTemplate указывает имя слота для пользовательского рендеринга содержимого ячейки, позволяя использовать пользовательский HTML или компоненты для отображения ячейки.

<template>
  <Table :data-source="tableData" :columns="columns">
    <template #customName="{ value }">
      <strong>{{ value }}</strong>
    </template>
  </Table>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, name: 'Джон Доу'}];
  const columns = [{dataField: 'name', cellTemplate: 'customName'}];
</script>

Установка значения ячейки

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

<template>
  <Table :data-source="tableData" :columns="columns"/>
</template>

<script setup lang="ts">
  const tableData = [{id: 1, age: 30}];
  const columns = [{
    dataField: 'age',
    setCellValue: (column, value) => `${value} лет`
  }];
</script>

Параметры фильтра

Свойство paramsFilter позволяет предоставить частичные опции для фильтрации в зависимости от типа данных, указанного в свойстве type. В зависимости от type вы можете настроить поведение и внешний вид фильтра, используя соответствующие свойства.

• Для типов "string" или "number": Используйте опции, специфичные для полей ввода.
• Для типа "select": Используйте опции, специфичные для полей выбора.
• Для типа "date": Используйте опции, специфичные для полей дат.

Обратитесь к соответствующей документации для получения дополнительной информации:

Класс

Свойство class позволяет применять пользовательские CSS-классы к различным частям столбца, включая заголовок, фильтр и содержимое ячеек.

Работа с данными

Настройте функциональность таблицы, такую как toolbar, sorting, filtering, search и grouping, для эффективного управления данными.

Панель инструментов таблицы

Свойство toolbar настраивает панель инструментов для таблицы. Её можно включить/выключить или настроить с помощью объекта с конкретными опциями.

<Table
    :data-source="tableData"
    :toolbar="{ visible: true }">
</Table>

• visible: Определяет, отображается ли панель инструментов.
• search: Включает поле поиска на панели инструментов.

Установка toolbar в true включает панель инструментов с настройками по умолчанию. Предоставление объекта позволяет выполнить детальную настройку.

Сортировка

Свойство sort включает и настраивает сортировку для таблицы. Вы можете активировать её с поведением по умолчанию или настроить внешний вид и функциональность.

<Table
    :data-source="tableData"
    :sort="{ 
        visible: true, 
        icon: 'Bars' 
    }">
</Table>

• visible: Переключает видимость функции сортировки.
• icon: Указывает стиль иконки сортировки ("Bars" или "Arrow").

Установите sort в true для сортировки по умолчанию или предоставьте объект для большего контроля.

Фильтрация

Свойство filter включает фильтрацию строк в таблице. Её можно включить или настроить с расширенными опциями.

<Table
    :data-source="tableData"
    :filter="{ 
        visible: true, 
        noFilter: 'Фильтры не применены', 
        isClearAllFilter: true 
    }">
</Table>

• visible: Переключает функцию фильтрации.
• noFilter: Сообщение, отображаемое, когда фильтры не применены.
• isClearAllFilter: Включает опцию "Очистить все фильтры".

Установка filter в true активирует базовую фильтрацию, а предоставление объекта позволяет использовать расширенные конфигурации.

Поиск

Свойство search включает функцию глобального поиска по данным таблицы.

<Table
    :data-source="tableData"
    :search="true">
</Table>

Установите search в true, чтобы позволить пользователям выполнять поиск по всему содержимому таблицы.

Группировка

Свойство grouping включает группировку данных в таблице. Вы можете указать поле группировки или предоставить объект конфигурации.

<Table
    :data-source="tableData"
    :grouping="{ visible: true, groupField: 'category' }">
</Table>

• visible: Переключает функцию группировки.
• groupField: Указывает поле, используемое для группировки.

Установка grouping в имя поля (например, "category") группирует строки по этому полю. Использование объекта предоставляет дополнительные возможности настройки.

Количество видимых строк

Свойство countVisibleRows определяет количество строк, видимых в таблице. Это полезно для ограничения числа отображаемых строк одновременно.

<Table
    :data-source="tableData"
    :countVisibleRows="10">
</Table>

Установите countVisibleRows в желаемое число, чтобы контролировать, сколько строк видно одновременно.

Изменение размера столбцов

Свойство resizedColumns включает или отключает изменение размера столбцов в таблице. Когда оно включено, пользователи могут регулировать ширину столбцов путём перетаскивания.

<Table
    :data-source="tableData"
    :resizedColumns="true">
</Table>

Установите resizedColumns в true, чтобы разрешить изменение размера столбцов.

Количество данных при загрузке

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

Предопределённые значения включают 100, 1000 и 10000.

<Table
    :search="true"
    :data-source="tableData"
    :countDataOnLoading="1000">
</Table>

Установите countDataOnLoading, чтобы определить количество строк, при котором должен появляться индикатор загрузки. Например, во время поиска или фильтрации, если набор данных превышает этот порог, будет показан индикатор загрузки для улучшения пользовательского опыта.

Итоги

Свойство summary позволяет определять и отображать итоговые строки в таблице. Эта функция позволяет выполнять вычисления (например, сумму, минимум, максимум) над указанными полями и настраивать, как результаты отображаются.

Поле данных

Свойство dataField указывает поле данных, для которого рассчитывается итог.

<Table
    :data-source="tableData"
    :summary="{ dataField: 'price' }">
</Table>

Указав dataField, вы определяете столбец, который будет использоваться для итоговых вычислений.

Имя

Свойство name предоставляет пользовательское имя для итога. Это полезно при отображении нескольких итогов.

<Table
    :data-source="tableData"
    :summary="{ 
        dataField: 'price', 
        name: 'totalPrice' 
    }">
</Table>

Установите name, чтобы присвоить итогу значимое название.

Тип данных

Свойство dataType определяет тип данных для итога. Оно гарантирует, что значения итогов форматируются корректно в зависимости от их типа. Доступные варианты:

• "string": Для текстовых данных.
• "number": Для числовых данных.
• "select": Для данных на основе выпадающего списка.
• "date": Для данных на основе дат.

<Table
    :data-source="tableData"
    :summary="{ 
        dataField: 'price',  
        dataType: 'number' 
    }">
</Table>

Установите dataType в соответствии с типом данных в указанном dataField. Например, используйте "number" для числовых значений или "date" для полей дат.

Тип

Свойство type определяет тип вычисления, выполняемого для итога. Доступные варианты:

• "sum": Вычисляет сумму всех значений.
• "min": Находит минимальное значение.
• "max": Находит максимальное значение.
• "avg": Вычисляет среднее значение всех значений.
• "count": Подсчитывает количество строк.

<Table
    :data-source="tableData"
    :summary="{ 
        dataField: 'price',
        dataType: 'number',
        type: 'sum' 
    }">
</Table>

Используйте type для настройки логики вычислений итога.

Формат отображения

Свойство displayFormat позволяет указать пользовательский формат для отображения результата итога. Вы можете использовать заполнители, такие как {0}, для представления вычисленного значения.

Предопределённые форматы включают:

• "Sum: {0}" : Вычисляет сумму всех значений.
• "Min: {0}" : Находит минимальное значение.
• "Max: {0}" : Находит максимальное значение.
• "Avg: {0}" : Вычисляет среднее значение всех значений.
• "Count: {0}": Подсчитывает количество строк.

<Table
    :data-source="tableData"
    :summary="{ 
        dataField: 'price', 
        type: 'sum', 
        displayFormat: 'Итого: {0}' 
    }">
</Table>

Используйте displayFormat для настройки отображения результата итога в таблице.

Пользовательский текст

Свойство customizeText предоставляет функцию для динамической настройки текста итога. Эта функция принимает конфигурацию summary и вычисленный result в качестве параметров и возвращает форматированный текст.

<Table
    :data-source="tableData"
    :summary="{ 
    dataField: 'price', 
    type: 'sum', 
    customizeText: (summary, result) => `Итого: ${result}` 
  }">
</Table>

Используйте customizeText для продвинутого форматирования текста на основе вычисленного значения итога.

Пагинация

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

Видимость

Свойство visible определяет, отображаются ли элементы управления пагинацией. Свойство pagination можно использовать двумя способами:

1. Булевый ярлык: Если установлено в true, пагинация включается с настройками по умолчанию.
2. Детальная конфигурация: Предоставление объекта позволяет настроить поведение пагинации.

<Table :data-source="tableData" pagination></Table>

Это включает пагинацию с конфигурацией по умолчанию.

<Table
    :data-source="tableData"
    :pagination="{ visible: true }">
</Table>

Использование объекта позволяет явно настроить параметры пагинации, такие как видимость, размер страницы и другие.

Установка visible в true гарантирует отображение элементов управления пагинацией, а false скрывает их.

Режим

Свойство mode определяет стиль элементов управления пагинацией. Доступные варианты:

• "filled": Стиль с заполнением по умолчанию.
• "outlined": Стиль с обводкой.
• "underlined": Стиль с подчёркиванием.

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        mode: 'outlined' 
    }">
</Table>

Установите mode для настройки внешнего вида элементов управления пагинацией.

Начальная страница

Свойство startPage задаёт начальную страницу для отображения при рендеринге таблицы.

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        startPage: 2 
    }">
</Table>

Используйте startPage для установки номера страницы по умолчанию.

Размер страницы

Свойство sizePage определяет количество элементов, отображаемых на одной странице. Предопределённые значения включают 5, 15, 20, 50, 100 и 150.

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        sizePage: 20 
    }">
</Table>

Установите sizePage для контроля количества строк, отображаемых на странице.

Селектор размеров

Свойство sizesSelector определяет доступные варианты размеров страниц, которые пользователи могут выбрать.

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        sizesSelector: [10, 25, 50] 
    }">
</Table>

Установите sizesSelector для предоставления пользовательского списка вариантов размеров страниц.

Количество видимых страниц

Свойство visibleNumberPages определяет, сколько номеров страниц отображается в элементе управления пагинацией. Допустимые значения: 5, 6, 7, 8, 9, 10 или 11.

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        visibleNumberPages: 7 
    }">
</Table>

Установите visibleNumberPages для контроля количества видимых кнопок страниц.

Информационный текст

Свойство isInfoText включает информационный текст о состоянии пагинации, например, "Страница 1 из 5".

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        isInfoText: true 
    }">
</Table>

Установите isInfoText в true для отображения информационного текста пагинации.

Селектор размера страницы

Свойство isPageSizeSelector включает выпадающий список для выбора размера страницы.

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        isPageSizeSelector: true 
    }">
</Table>

Установите isPageSizeSelector в true, чтобы позволить пользователям выбирать количество строк на странице.

Скрытие кнопок навигации

Свойство isHiddenNavigationButtons скрывает кнопки навигации пагинации (например, "Следующая" и "Предыдущая"), когда установлено в true.

<Table
    :data-source="tableData"
    :pagination="{ 
        visible: true, 
        isHiddenNavigationButtons: true 
    }">
</Table>

Установите isHiddenNavigationButtons в true для скрытия кнопок навигации.

Класс

Свойство class позволяет применять пользовательские CSS-классы к элементам управления пагинацией для стилизации.