Таблица

​

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

​

Загрузить данные в таблице

При перетаскивании компонента таблицы в Frame, он автоматически отображает тестовые данные в формате JSON. Вы можете изменить отображенные данные в таблице, изменив свойство Data source. Для выбора действия используйте формат {{ actionName.data }}.

Также можно задать источник данных, введя массив.

​

Настройки столбцов

Установите псевдонимы для столбцов данных

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

Изменить типы столбцов

Когда вы устанавливаете источник данных таблиц, столбцы имеют значение Text. Вы можете вручную задать типы столбцов, нажав на столбец на вкладке Инспекция и выбрав тип из выпадающего списка Столбцы.

Типы столбцов включают:

1. Текст
2. Дата, вы можете задать формат отображения даты в типе даты.
3. Число можно задать десятичные дроби в типе числа.
4. Процент можно задать десятичные дроби в процентном типе.
5. Ссылка
6. Кнопка, вы можете добавить обработчики событий в тип кнопки.

Сопоставлено значение пользовательских столбцов

Вы можете добавить пользовательские столбцы в таблицы, используя кнопку + Add во вкладке Inspect. Пользовательские колонки часто используются для вычисления данных на основе других значений в вашем приложении. Например, если у вас есть колонки revenue и user_num и вы хотите вычислить столбец ARPU, вы можете использовать {{ currentRow.revenue/currentRow.user_num }}

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

​

Доступ к данным таблицы

Используйте {{ table1.selectedRow[i].columnName }}, чтобы получить доступ к данным выбранных строк в других компонентах. Если вы не включили Multi-Row Selection, i всегда будет 0.

Обновите данные таблицы

1. Используйте компонент ввода или другие cpmponents для показа {{ table1.selectedRow[i].columnName }}.
2. Используйте {{ input1.value }} в действиях для обновления, чтобы получить выбранные значения и обновленные значения.
3. Добавить обработчик событий к кнопке “Обновить”, чтобы запустить действие обновления при нажатии.
4. Обновите данные выбранной строки, изменив значение ввода и нажав на кнопку Обновить.

Вставить новую строку в таблицу

1. Используйте {{ input1.value }} в действиях получения значений.
2. Добавьте обработчик событий для вставки кнопки, чтобы запустить Вставить Действие при нажатии.
3. Вставьте новые данные путем ввода значений в входные компоненты и нажмите кнопку Вставить.