DataTable (с пагинацией)

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

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

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

paginated-data-table-fi

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

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

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

Откройте Widget Palette и найдите виджет DataTable на вкладке Layout Elements. Вы можете перетащить его в нужное место или добавить напрямую из дерева виджетов или области холста.
Он добавляет два типа предопределенных виджетов:
1. DataTableHeader: Это верхняя строка таблицы, которая отображает названия столбцов. Чтобы изменить текст, щелкните на виджете DataTableHeader > Text, перейдите в панель свойств и укажите имя.
2. DataTableCell: Это отображает фактические данные. По умолчанию он содержит виджет Text. Однако вы можете заменить его на любой другой виджет в зависимости от ваших требований.
По умолчанию отображается три столбца. Чтобы показать больше, выберите виджет DataTable, перейдите в панель свойств > Paginated Data Table Properties > и укажите Number of Columns, которое вы хотите.
Для демонстрации отобразим данные из Firestore:
1. Сначала убедитесь, что вы создали коллекцию.
2. Важно отметить, что в отличие от других виджетов, вы не можете напрямую выполнить запрос к серверу на виджете DataTable. Потому что в этом случае у вас не будет доступа к результату запроса (списку сотрудников) для дальнейшего использования, например, для сортировки и поиска. Поэтому рекомендуется получать результат запроса к серверу на родительском виджете, а затем использовать этот результат для заполнения DataTable.
3. В этом примере при загрузке страницы мы добавим действие Query Collection и сохраним результат в переменную состояния страницы.
4. На виджете DataTable сгенерируйте динамические дочерние элементы с использованием переменной состояния страницы (которая содержит список сотрудников).
5. Отобразите данные в DataTableCell > Text.

Сортировка

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

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

к сведению

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

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

Чтобы включить сортировку:

Выберите DataTableHeader, перейдите в Properties Panel и включите переключатель Sortable. Примените это к каждому столбцу, который вы хотите сортировать.
Выберите виджет DataTable, выберите Actions в панели свойств и откройте Action Flow Editor.
Выберите On Sort Changed. Действия, добавленные под этим, будут срабатывать каждый раз, когда пользователь нажимает на заголовок столбца с включенной сортировкой.
В этом примере мы обновляем ту же переменную состояния страницы (которая заполняет 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 с помощью нашей функции Simple Search. Однако для этого конкретного виджета вместо виджета Conditional Builder вы можете напрямую использовать Conditional Value, чтобы определить, какой результат отображать на основе переменной IsShowFullList.

searching-through-table

Выбор строк

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

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

Вот точные шаги:

Сначала создайте page state переменную, которая будет содержать список выбранных строк.
Выберите DataTable, перейдите в Properties Panel > Paginated Data Table Properties > и включите переключатель Selectable.
При нажатии кнопки обновите переменную состояния страницы выбранными строками. При добавлении этого действия используйте следующую пользовательскую функцию, чтобы получить выбранные элементы на основе индексов. Вы можете получить список индексов выбранных строк через Widget State > DataTable Selected Rows.
Опционально, вы можете передать эту переменную на новую страницу для отображения выбора.

Custom function:

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 для получения данных для следующей страницы.

Для этого:

Выберите виджет DataTable.
Выберите Actions в панели свойств и откройте Action Flow Editor.
Выберите On Page Changed. Этот обратный вызов дает вам Current Row Index, который является индексом первой строки новой страницы. Например, если на текущей странице 25 элементов (0–24), значение Current Row Index будет 25. Это полезно для API, которые извлекают фиксированный набор данных, указывая начальную позицию (offset).
Теперь добавьте действие для вызова пагинированного API (который возвращает результат порциями). См. как добавить вызов пагинированного API, добавив параметры запроса. В этом примере мы используем этот API: https://reqres.in/api/users?per_page=7&page=1. Примечание: этот API использует пагинацию на основе страниц, а не смещения, поэтому требуется ручная корректировка переменной страницы.
При успешном выполнении вызова 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
}

Получение уведомления при смене количества строк на странице

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

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

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

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

Настройка

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

Настройка пагинированного DataTable

Чтобы настроить пагинированный DataTable, перейдите в Properties Panel > Paginated Data Table Properties и затем:

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

к сведению

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

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

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

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

Настройка цвета DataTable

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

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

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

Чтобы добавить скругленные углы к DataTable, перейдите в Properties Panel > Style Properties > Border Radius и затем:

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

adjust-row-border

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

Чтобы добавить горизонтальные и вертикальные разделители внутри DataTable, перейдите в Properties Panel > Style Properties > и включите Horizontal и Vertical Dividers.

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

add-dividers

Настройка цветов флажков

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

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

DataTable (с пагинацией)

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

Сортировка​

Поиск​

Выбор строк​

Получение уведомления при смене страницы​

Получение уведомления при смене количества строк на странице​

Настройка​

Настройка пагинированного DataTable​

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

Настройка цвета DataTable​

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

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

Настройка цветов флажков​