Перейти к основному содержимому

DataTable (Пагинация)

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

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

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

paginated-data-table-fi

Добавление виджета DataTable​

Рассмотрим, как добавить виджет DataTable, создав пример отображения списка всех сотрудников в компании. Вот как это выглядит:

Шаги по добавлению DataTable и отображению данных о сотрудниках:

  1. Откройте Палитру виджетов и найдите виджет DataTable во вкладке Элементы макета. Вы можете перетащить его на нужное место или добавить напрямую из дерева виджетов или области холста.
  2. Он содержит два типа предопределенных виджетов:
    1. DataTableHeader: Это верхняя строка таблицы, отображающая названия столбцов. Чтобы изменить текст, щелкните по виджету DataTableHeader > Text, перейдите на панель свойств и дайте ему имя.
    2. DataTableCell: Здесь отображаются фактические данные. По умолчанию он поставляется с виджетом Text. Однако вы можете его заменить на любой другой виджет в зависимости от ваших требований. data-table-header
  3. По умолчанию он показывает три столбца. Чтобы показать больше, выберите виджет DataTable, перейдите к Свойствам > Свойства пагинированной таблицы > введите количество Столбцов, которое вы хотите.
  4. Для демонстрации давайте отобразим данные из Firestore:
    1. Сначала убедитесь, что вы создали коллекцию.
    2. Важно отметить, что в отличие от других виджетов, вы не можете напрямую делать запрос на бэкенд в виджет DataTable. Потому что если вы это сделаете, у вас не будет доступа к результату запроса (список сотрудников) для последующего использования, такого как сортировка и поиск. Поэтому рекомендуется получать результат запроса на бэкенд на родительском виджете и затем использовать этот результат для заполнения DataTable.*
    3. В этом примере, при загрузке страницы мы добавим действие Запроса Коллекции и сохраним результат в переменной состояния страницы.
    4. На виджете DataTable генерируйте динамические дочерние виджеты, используя переменную состояния страницы (которая содержит список сотрудников).
    5. Отобразите данные в DataTableCell > Text.

Сортировка​

Порядок сортировки в DataTable следующий: сначала вы выбираете столбец для сортировки. Затем, когда пользователь щелкает по заголовку, вы получаете обратный вызов OnSortChanged с двумя свойствами: Sorted Column Index и Is Ascending. Вы используете оба свойства в специальной функции для написания логики сортировки.

  • Sorted Column Index указывает столбец, по которому нужно отсортировать данные (0 - для первого столбца, 1 - для второго и так далее).
  • Is Ascending определяет направление сортировки (true - по возрастанию, false - по убыванию).
к сведению

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

Рассмотрим расширение предыдущего примера и проиллюстрируем, как включить сортировку по столбцам. Вот как это выглядит:

Для включения сортировки:

  1. Выберите DataTableHeader, перейдите в Панель свойств и включите переключатель Sortable. Примените это к каждому столбцу, который вы хотите отсортировать.
  2. Выберите виджет DataTable, выберите Действия из панели свойств и откройте Редактор Потока Действий.
  3. Выберите On Sort Changed. Действия, добавленные здесь, будут запускаться при каждом щелчке пользователя по заголовку столбца, у которого включена сортировка.
  4. В этом примере мы обновляем ту же переменную состояния страницы (которая заполняет DataTable) отсортированными данными с помощью следующей специальной функции.
List<EmployeesRecord> sortMyData(
  List<EmployeesRecord> listToSort,
  bool isAsc,
  int sortColumIndex,
) {
  /// MODIFY CODE ONLY BELOW THIS LINE

  // Sort by 'name' for 0, 'age' for 1, 'position' for 2 in code.
  switch (sortColumIndex) {
    case 0:
      listToSort.sort((a, b) => a.name.compareTo(b.name));
      break;
    case 1:
      listToSort.sort((a, b) => a.age.compareTo(b.age));
      break;
    case 2:
      listToSort.sort((a, b) => a.position.compareTo(b.position));
      break;
    default:
      break;
  }
  if (!isAsc) {
    listToSort = listToSort.reversed.toList();
  }
  return listToSort;

  /// MODIFY CODE ONLY ABOVE THIS LINE
}

Поиск​

Вы можете добавить функционал поиска в виджет DataTable, используя нашу функцию Простого поиска. Однако для этого виджета вместо использования виджета Условный конструктор вы можете напрямую использовать Условное значение, чтобы определить, какой результат отобразить на основе переменной IsShowFullList.

поиск-по-таблице

Выбор строк​

Возможно, вы захотите предоставить пользователям возможность выбирать одну или несколько строк для выполнения таких задач, как редактирование, удаление или выполнение определенных действий с выбранными данными. Например, подготовка списка продвинутых сотрудников из общего списка сотрудников.

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

Следуйте следующим шагам:

  1. Сначала создайте переменную состояния страницы, которая будет содержать список выбранных строк.
  2. Выберите DataTable, перейдите в Панель свойств > Свойства страницы данных с пагинацией и включите переключатель Selectable.
  3. При нажатии на кнопку обновите состояние страницы, добавив в него выбранные строки. При добавлении этого действия используйте следующую пользовательскую функцию для извлечения выбранных элементов на основе индексов. Вы можете получить список индексов выбранных строк через Состояние виджета > Выбранные строки DataTable.
  4. При необходимости вы можете передать эту переменную на новую страницу для отображения выбранных элементов.

Пользовательская функция:

List<EmployeesRecord> findPromotedEmps(
  List<EmployeesRecord> allEmps,
  List<int> selecteEmpsIndex,
) {
  // MODIFY CODE ONLY BELOW THIS LINE
  // return allEmps based on selecteEmpsIndex
  List<EmployeesRecord> promotedEmps = [];
  for (int i = 0; i < selecteEmpsIndex.length; i++) {
    int index = selecteEmpsIndex[i];
    if (index >= 0 && index < allEmps.length) {
      EmployeesRecord emp = allEmps[index];
      promotedEmps.add(emp);
    }
  }
  return promotedEmps;
  /// MODIFY CODE ONLY ABOVE THIS LINE
 }

Уведомление при изменении страницы​

Возможно, вам нужно получать обратный вызов каждый раз, когда пользователь переходит на следующую страницу в DataTable. Например, для выполнения API-запроса для получения данных для следующей страницы.

тобы сделать это:

  1. Выберите виджет DataTable.
  2. В Панели свойств выберите Actions и откройте Action Flow Editor.
  3. Выберите On Page Changed. Этот обратный вызов дает вам Current Row Index (текущий индекс строки), который является индексом первой строки новой страницы. Например, если на текущей странице 25 элементов (0–24), то значение Current Row Index будет 25. Это полезно для API, которые загружают данные с фиксированного начального положения (смещение).
  4. Теперь добавьте действие для вызова API с пагинацией (который возвращает результаты частями). См. как добавить API с пагинацией с добавлением параметров запроса. Для этого примера используем API: https://reqres.in/api/users?per_page=7&page=1. Примечание: этот API использует пагинацию на основе страниц, а не смещения, поэтому переменную страницы необходимо настроить вручную.
  5. При успешном вызове API вы можете добавить действие для добавления новых данных в текущий список. Для этого можно использовать следующую пользовательскую функцию для добавления новых результатов к существующим данным.
List<UserStruct> addAlldatatoList(
  List<UserStruct> currentUsersList,
  List<UserStruct> newUsersList,
) {
  /// MODIFY CODE ONLY BELOW THIS LINE

  // add all newUsersList to currentUsersList
  currentUsersList.addAll(newUsersList);
  return currentUsersList;

  /// MODIFY CODE ONLY ABOVE THIS LINE
}

Уведомление при изменении количества строк на странице​

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

Вот как это сделать:

  1. Выберите виджет DataTable.
  2. В Панели свойств выберите Actions и откройте Action Flow Editor.
  3. Выберите On Rows Per Page Changed. Все действия, добавленные здесь, будут выполняться при изменении числа отображаемых строк.
  4. Теперь вы можете добавить любое действие.

get-notified-on-row-changed-per-page

Настройка​

Вы можете изменить внешний вид и поведение этого виджета, используя различные свойства в панели свойств.

Настройка таблицы данных с пагинацией​

Чтобы настроить таблицу данных с пагинацией, перейдите в Панель свойств > Свойства таблицы данных с пагинацией и затем:

  • Чтобы скрыть пагинацию, включите переключатель Hide Paginator.
  • Чтобы отображать кнопки для навигации к первой и последней страницам таблицы, включите Show First And Last Buttons.
  • Чтобы использовать обычную таблицу данных без пагинации, отключите переключатель Paginated.

к сведению

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

Настройка расстояния между строками и колонками​

Чтобы изменить расстояние между строками и колонками, перейдите в Панель свойств > Свойства макета и настройте следующие параметры:

  • Header Row Height: Изменяет высоту строки заголовка.
  • Data Row Height: Изменяет высоту всех строк.
  • Column Spacing: Изменяет расстояние между колонками.

Настройка цвета таблицы данных​

Чтобы изменить цвет таблицы данных, перейдите в Панель свойств > Свойства стиля, где вы можете установить цвета для различных элементов:

  • Header Row Color: Изменяет цвет фона строки заголовка.
  • Row Color: Устанавливает цвет фона для всех строк.
  • Alternate Row Color: Позволяет установить другой цвет фона для чередующихся строк.
  • Sort Icon Color: Изменяет цвет значка сортировки, используемого в сортируемых колонках.

Настройка радиуса границы​

Чтобы добавить закругленные углы к таблице данных, перейдите в Панель свойств > Свойства стиля > Border Radius и затем:

  1. Введите значения для TL (верхний левый), TR (верхний правый), BL (нижний левый) и BR (нижний правый).
  2. Чтобы применить одинаковый радиус ко всем сторонам, переключитесь на параметр Uniform Radius. Затем вы можете настроить радиус, перемещая ползунок или вводя нужное значение напрямую.

adjust-row-border

Добавление разделителей​

Чтобы добавить горизонтальные и вертикальные разделители внутри таблицы данных, перейдите в Панель свойств > Свойства стиля > и включите Horizontal и Vertical Dividers.

После включения вы также можете изменить их Color и Thickness.

add-dividers

Настройка цветов флажков (чекбоксов)​

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

  • Selected Fill Color: Устанавливает цвет фона флажка при его выборе.
  • Unselected Fill Color: Устанавливает цвет фона флажка, когда он не выбран.
  • Unselected Border Color: Изменяет цвет границы флажка, когда он не выбран.
  • Selected Border Color: Изменяет цвет границы флажка, когда он выбран.
  • Check Color: Изменяет цвет самой отметки флажка при его выборе, что обеспечивает визуальную обратную связь для пользователей о состоянии их выбора.