Таблиця даних

Навігація

Макет таблиці даних
Нижній колонтитул сторінки
Вибір рядків
Вхідні дані в заголовку таблиці
Заголовок/заголовок таблиці
Альтернативний заголовок із діями рядків
Сортування
Таблиці що згортаються
Методи застосунку Таблиці даних
Параметри таблиці даних
Події таблиці даних
Події DOM
Події екземплярів застосунку та таблиці даних
Змінні CSS

Таблиця данних

Таблиці даних відображають набори необроблених даних. Зазвичай вони використовуються в настільних застосунках.

Макет таблиці даних

Макет таблиці загальних даних можна розглядати так:

<div class="data-table">
  <table>
    <thead>
      <tr>
        <th class="label-cell">Dessert (100g serving)</th>
        <th class="numeric-cell">Calories</th>
        ...
        <th class="medium-only">Comment</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="label-cell">Frozen yogurt</td>
        <td class="numeric-cell">159</td>
        ...
        <td class="medium-only">I like it!</td>
      </tr>
      ...
    </tbody>
  </table>
</div>

У межах картки:

<div class="data-table card">
  <table>
    <thead>
    ...
    </thead>
    <tbody>
    ...
    </tbody>
  </table>
</div>

data-table — коренева обгортка таблиці даних. Обов'язковий CSS-клас для контейнера.
table — власне HTML-таблиця (<table>). Обов'язковий елемент.
- thead — заголовок таблиці (head).
- tbody — тіло таблиці, обов'язковий контейнер рядків.
- label-cell — основна клітинка мітки (тільки одна така клітинка на рядок, зазвичай перша клітинка).
- numeric-cell — комірка для відображення числових даних (вирівняна за правим краєм).
- medium-only — адаптивний клас для показу цієї комірки або стовпця лише при ширині вікна >= 768px. Повний набір адаптивних класів див. у документації Grid / Layout Grid (.xsmall-only, .small-only, .medium-only, .large-only, .xlarge-only).

Нижній колонтитул сторінки

<div class="card data-table">
  <table>
    <thead>
      <tr>
        <th class="label-cell">Dessert (100g serving)</th>
        <th class="numeric-cell">Calories</th>
        <th class="numeric-cell">Fat (g)</th>
        <th class="numeric-cell">Carbs</th>
        <th class="numeric-cell">Protein (g)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="label-cell">Frozen yogurt</td>
        <td class="numeric-cell">159</td>
        <td class="numeric-cell">6.0</td>
        <td class="numeric-cell">24</td>
        <td class="numeric-cell">4.0</td>
      </tr>
      ...
    </tbody>
  </table>
  <div class="data-table-footer">
    <div class="data-table-rows-select">
      Per page:
      <div class="input input-dropdown">
        <select>
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="25">25</option>
          <option value="all">All</option>
        </select>
      </div>
    </div>
    <div class="data-table-pagination">
      <span class="data-table-pagination-label">1-5 of 10</span>
      <a href="#" class="link disabled">
        <i class="icon icon-prev color-gray"></i>
      </a>
      <a href="#" class="link">
        <i class="icon icon-next color-gray"></i>
      </a>
    </div>
  </div>
</div>

data-table-footer — основний елемент колонтитула таблиці даних
- data-table-rows-select — виберіть контейнер із кількістю рядків
- data-table-pagination — контейнер з інформацією про поточну сторінку та кнопками навігації «попередня/наступна».
- data-table-pagination-label — поточна мітка сторінкового перегляду

Рядки, які можна вибрати

<div class="data-table data-table-init card">
  <table>
    <thead>
      <tr>
        <th class="checkbox-cell">
          <label class="checkbox">
            <input type="checkbox"/>
            <i class="icon-checkbox"></i>
          </label>
        </th>
        <th class="label-cell">Dessert (100g serving)</th>
        <th class="numeric-cell">Calories</th>
        ...
        <th class="numeric-cell">Protein (g)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="checkbox-cell">
          <label class="checkbox">
            <input type="checkbox"/>
            <i class="icon-checkbox"></i>
          </label>
        </td>
        <td class="label-cell">Frozen yogurt</td>
        <td class="numeric-cell">159</td>
        ...
        <td class="numeric-cell">4.0</td>
      </tr>
      ...
    </tbody>
  </table>
</div>

data-table-init — додатковий клас для ввімкнення дії JavaScript, необхідної для вибраних рядків
Комірка прапорця(checkbox). Така комірка в заголовку таблиці вибере/скасує вибір усіх рядків у тілі таблиці:

<td class="checkbox-cell">
  <label class="checkbox">
    <input type="checkbox"/>
    <i class="icon-checkbox"></i>
  </label>
	</td>

Вхідні дані в заголовку таблиці

Такі таблиці широко використовуються в інтерфейсах адміністратора для фільтрації або пошуку даних:

<div class="card data-table">
  <table>
    <thead>
      <tr>
        <th class="input-cell">
          <span class="table-head-label">ID</span>
          <div class="input" style="width: 50px">
            <input type="number" placeholder="Filter" />
          </div>
        </th>
        <th class="input-cell">
          <span class="table-head-label">Name</span>
          <div class="input">
            <input type="text" placeholder="Filter" />
          </div>
        </th>
        ...
        <th class="input-cell">
          <span class="table-head-label">Gender</span>
          <div class="input input-dropdown">
            <select>
              <option value="All">All</option>
              <option value="Male">Male</option>
              <option value="Female">Female</option>
            </select>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Doe</td>
        <td>Ця електронна адреса захищена від спам-ботів. Вам необхідно увімкнути JavaScript, щоб побачити її.</td>
        <td>Male</td>
      </tr>
      ...
    </tbody>
  </table>
</div>

input-cell — додатковий клас у комірці таблиці, необхідний для відображення введення
<span class="table-head-label"> — вхідна мітка
— <div class="input"> — вхідний контейнер

Заголовок таблиці Header

Коли таблиця даних використовується в картці, можна використовувати додатковий заголовок таблиці даних із діями в заголовку картки.

З назвою та діями

<div class="data-table data-table-init card">
  <!-- Card Header -->
  <div class="card-header">
    <!-- Table title -->
    <div class="data-table-title">Nutrition</div>
    <!-- Table actions -->
    <div class="data-table-actions">
      <a class="link icon-only">
        <i class="icon t4-icons if-not-md">line_horizontal_3_decrease</i>
        <i class="icon material-icons md-only">sort</i>
      </a>
      <a class="link icon-only">
        <i class="icon t4-icons if-not-md">ellipsis_vertical_circle</i>
        <i class="icon material-icons md-only">more_vert</i>
      </a>
    </div>
  </div>
  <!-- Card Content -->
  <div class="card-content">
    <table>
      <thead>
        <tr>
          <th class="checkbox-cell">
            <label class="checkbox">
              <input type="checkbox" />
              <i class="icon-checkbox"></i>
            </label>
          </th>
          <th class="label-cell">Dessert (100g serving)</th>
          <th class="numeric-cell">Calories</th>
          ...
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="checkbox-cell">
            <label class="checkbox">
              <input type="checkbox" />
              <i class="icon-checkbox"></i>
            </label>
          </td>
          <td class="label-cell">Frozen yogurt</td>
          <td class="numeric-cell">159</td>
          ...
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

data-table-title — заголовок таблиці
— data-table-actions — основні дії таблиці

Різні дії на вибір

<div class="data-table data-table-init card">
  <!-- Card header -->
  <div class="card-header">
    <!-- Default table header -->
    <div class="data-table-header">
      <!-- Default table title -->
      <div class="data-table-title">Nutrition</div>
      <!-- Default table actions -->
      <div class="data-table-actions">
        <a class="link icon-only">
          <i class="icon t4-icons if-not-md">line_horizontal_3_decrease</i>
          <i class="icon material-icons md-only">sort</i>
        </a>
        <a class="link icon-only">
          <i class="icon t4-icons if-not-md">ellipsis_vertical_circle</i>
          <i class="icon material-icons md-only">more_vert</i>
        </a>
      </div>
    </div>
    <!-- Selected table header -->
    <div class="data-table-header-selected">
      <!-- Selected table title -->
      <div class="data-table-title-selected"><span class="data-table-selected-count"></span> items selected</div>
      <!-- Selected table actions -->
      <div class="data-table-actions">
        <a class="link icon-only">
          <i class="icon t4-icons if-not-md">trash</i>
          <i class="icon material-icons md-only">delete</i>
        </a>
        <a class="link icon-only">
          <i class="icon t4-icons if-not-md">ellipsis_vertical_circle</i>
          <i class="icon material-icons md-only">more_vert</i>
        </a>
      </div>
    </div>
  </div>
  <div class="card-content">
    <table>
      <thead>
        <tr>
          <th class="checkbox-cell">
            <label class="checkbox">
              <input type="checkbox" />
              <i class="icon-checkbox"></i>
            </label>
          </th>
          <th class="label-cell">Dessert (100g serving)</th>
          <th class="numeric-cell">Calories</th>
          ...
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="checkbox-cell">
            <label class="checkbox">
              <input type="checkbox" />
              <i class="icon-checkbox"></i>
            </label>
          </td>
          <td class="label-cell">Frozen yogurt</td>
          <td class="numeric-cell">159</td>
          ...
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

data-table-header — заголовок таблиці за замовчуванням. Відображається, якщо немає вибраних рядків
data-table-header-selected — вибраний заголовок таблиці. Видно, коли є вибрані рядки
— data-table-selected-count — кількість вибраних рядків таблиці. Номер буде розміщено тут за допомогою JavaScript

Альтернативний заголовок із діями рядків

<div class="data-table data-table-init card">
  <div class="card-header">
    <!-- Table links/actions -->
    <div class="data-table-links">
      <a class="link">Add</a>
      <a class="link">Remove</a>
    </div>
    <!-- Table actions -->
    <div class="data-table-actions">
      <a class="link icon-only">
        <i class="icon t4-icons if-not-md">line_horizontal_3_decrease</i>
        <i class="icon material-icons md-only">sort</i>
      </a>
      <a class="link icon-only">
        <i class="icon t4-icons if-not-md">ellipsis_vertical_circle</i>
        <i class="icon material-icons md-only">more_vert</i>
      </a>
    </div>
  </div>
  <div class="card-content">
    <table>
      <thead>
        <tr>
          <th class="checkbox-cell">
            <label class="checkbox">
              <input type="checkbox" />
              <i class="icon-checkbox"></i>
            </label>
          </th>
          <th class="label-cell">Dessert (100g serving)</th>
          <th class="numeric-cell">Calories</th>
          ...
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="checkbox-cell">
            <label class="checkbox">
              <input type="checkbox" />
              <i class="icon-checkbox"></i>
            </label>
          </td>
          <td class="label-cell">Frozen yogurt</td>
          <td class="numeric-cell">159</td>
          ...
          <td class="actions-cell">
            <a class="link icon-only">
              <i class="icon t4-icons if-not-md">square_pencil</i>
              <i class="icon material-icons md-only">edit</i>
            </a>
            <a class="link icon-only">
              <i class="icon t4-icons if-not-md">trash</i>
              <i class="icon material-icons md-only">delete</i>
            </a>
          </td>
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

data-table-links — альтернативні/додаткові дії таблиці
actions-cell — клітинка посилань/піктограм дій

Сортування

<div class="data-table data-table-init card">
  <div class="card-header">
    <div class="data-table-title">Nutrition</div>
    <div class="data-table-actions">
      <a class="link icon-only">
        <i class="icon t4-icons if-not-md">line_horizontal_3_decrease</i>
        <i class="icon material-icons md-only">sort</i>
      </a>
      <a class="link icon-only">
        <i class="icon t4-icons if-not-md">ellipsis_vertical_circle</i>
        <i class="icon material-icons md-only">more_vert</i>
      </a>
    </div>
  </div>
  <div class="card-content">
    <table>
      <thead>
        <tr>
          <th class="checkbox-cell">
            <label class="checkbox">
              <input type="checkbox" />
              <i class="icon-checkbox"></i>
            </label>
          </th>
          <th class="label-cell sortable-cell sortable-cell-active">Dessert (100g serving)</th>
          <th class="numeric-cell sortable-cell">Calories</th>
          <th class="numeric-cell sortable-cell">Fat (g)</th>
          <th class="numeric-cell sortable-cell">Carbs</th>
          <th class="numeric-cell sortable-cell">Protein (g)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="checkbox-cell">
            <label class="checkbox">
              <input type="checkbox" />
              <i class="icon-checkbox"></i>
            </label>
          </td>
          <td class="label-cell">Frozen yogurt</td>
          <td class="numeric-cell">159</td>
          <td class="numeric-cell">6.0</td>
          <td class="numeric-cell">24</td>
          <td class="numeric-cell">4.0</td>
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

sortable-cell — додатковий клас для того, щоб клітинка/стовпець була сортованою
sortable-cell-active — додатковий клас для визначення активної/за замовчуванням клітинки/стовпця, які можна сортувати
sortable-asc — додатковий клас для визначення поточного сортування за зростанням (за замовчуванням)
sortable-desc — додатковий клас для вказівки поточного сортування за спаданням

Зауважте, що фреймворк не забезпечує фактичної логіки сортування. Реальна логіка сортування повинна бути реалізована вручну.

Таблиця, що згортається

Наступну таблицю буде згорнуто до вигляду списку на маленьких екранах:

<div class="card data-table data-table-collapsible data-table-init">
  <div class="card-header">
    <div class="data-table-title">Nutrition</div>
    <div class="data-table-actions">
      <a class="link icon-only">
        <i class="icon t4-icons if-not-md">line_horizontal_3_decrease</i>
        <i class="icon material-icons md-only">sort</i>
      </a>
      <a class="link icon-only">
        <i class="icon t4-icons if-not-md">ellipsis_vertical_circle</i>
        <i class="icon material-icons md-only">more_vert</i>
      </a>
    </div>
  </div>
  <div class="card-content">
    <table>
      <thead>
        <tr>
          <th class="label-cell">Dessert (100g serving)</th>
          <th class="numeric-cell">Calories</th>
          ...
          <th class="numeric-cell">Protein (g)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="label-cell" data-collapsible-title="Dessert (100g serving)">Frozen yogurt</td>
          <td class="numeric-cell" data-collapsible-title="Calories">159</td>
          ...
          <td class="numeric-cell" data-collapsible-title="Protein (g)">4.0</td>
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

data-table-collapsible — додатковий клас таблиці для включення логіки, що згортається. Зверніть увагу, що для цього також потрібен клас "data-table-init".

Методи застосунку таблиці даних

Якщо ви додаєте таблицю даних динамічно і вам потрібна така логіка вибору рядків або перемикання заголовків, вам потрібно ініціалізувати це вручну. Давайте розглянемо пов’язані методи роботи програми з таблицею даних:

Створення екземпляра: app.dataTable.create(parameters)

— parameters: object — об'єкт із параметрами таблиці даних.
Метод повертає створений екземпляр DataTable
Знищення екземпляра: app.dataTable.destroy(el)

— el: HTMLElement | CSSSelector — елемент або екземпляр для знищення.
Отримання екземпляра: app.dataTable.get(el)

— el: HTMLElement | CSSSelector — HTML-елемент таблиці даних.
Метод повертає екземпляр DataTable

Параметри таблиці даних

Тепер давайте розглянемо список доступних параметрів, необхідних для створення таблиці даних:

Параметр	Опис	Тип
el	Елемент таблиці даних. Може бути корисним, якщо у вашому HTML-коді вже є елемент Data Table і ви хочете створити новий екземпляр за допомогою цього елемента	string

Події таблиці даних

Таблиця даних запускатиме такі події DOM в елементі таблиці даних і події в екземплярі застосунку та таблиці даних:

Події DOM

Подія	Об'єкт	Опис	Тип
datatable:sort	Data Table Element <div class="data-table">	Подію буде викликано зміною сортування таблиці даних	string
datatable:beforedestroy	Data Table Element <div class="data-table">	Подія буде ініційована безпосередньо перед тим, як екземпляр таблиці даних буде знищено	string

Події екземплярів застосунку та таблиці даних

Подія	Аргумент	Опис	Тип
sort	dataTable, sort	Подію буде викликано зміною сортування таблиці даних	null
dataTableSort	dataTable, sort	Подію буде викликано зміною сортування таблиці даних	null
beforeDestroy	dataTable	Подія буде ініційована безпосередньо перед тим, як екземпляр таблиці даних буде знищено	null
dataTableBeforeDestroy	dataTable	Подія буде ініційована безпосередньо перед тим, як екземпляр таблиці даних буде знищено	null

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).

Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень

:root {
  --t4-table-head-font-size: 12px;
  --t4-table-body-font-size: 14px;
  --t4-table-footer-font-size: 12px;
  --t4-table-input-height: 24px;
  --t4-table-input-font-size: 14px;
  --t4-table-collapsible-cell-padding: 16px;
  --t4-table-link-icon-only-icon-size: 20px;
  --t4-table-head-bg-color: transparent;
  --t4-table-card-header-bg-color: transparent;
  --t4-table-card-header-height: 64px;
  --t4-table-cell-padding-vertical: 0px;
  --t4-table-sortable-icon-color: #000;
}
:root .dark,
:root.dark {
  --t4-table-cell-border-color: rgba(255, 255, 255, 0.15);
  --t4-table-sortable-icon-color: #fff;
  --t4-table-input-text-color: #fff;
}
.ios {
  --t4-table-head-font-weight: 600;
  --t4-table-head-cell-height: 44px;
  --t4-table-head-icon-size: 18px;
  --t4-table-body-cell-height: 44px;
  --t4-table-cell-padding-horizontal: 16px;
  --t4-table-edge-cell-padding-horizontal: 16px;
  --t4-table-label-cell-padding-horizontal: 16px;
  --t4-table-checkbox-cell-width: 22px;
  /* --t4-table-actions-cell-link-color: var(--t4-theme-color); */
  /* --t4-table-actions-link-color: var(--t4-theme-color); */
  --t4-table-title-font-size: 17px;
  --t4-table-title-font-weight: 600;
  --t4-table-footer-height: 44px;
  --t4-table-head-text-color: rgba(0, 0, 0, 0.45);
  --t4-table-cell-border-color: rgba(0, 0, 0, 0.22);
  --t4-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
  --t4-table-footer-text-color: rgba(0, 0, 0, 0.45);
  --t4-table-input-text-color: #000;
}
.ios .dark,
.ios.dark {
  --t4-table-head-text-color: rgba(255, 255, 255, 0.55);
  --t4-table-footer-text-color: rgba(255, 255, 255, 0.55);
  --t4-table-selected-row-bg-color: rgba(255, 255, 255, 0.08);
}
.md {
  --t4-table-head-font-weight: 500;
  --t4-table-head-cell-height: 56px;
  --t4-table-head-icon-size: 16px;
  --t4-table-body-cell-height: 48px;
  --t4-table-cell-padding-horizontal: 28px;
  --t4-table-edge-cell-padding-horizontal: 24px;
  --t4-table-label-cell-padding-horizontal: 24px;
  --t4-table-checkbox-cell-width: 18px;
  --t4-table-title-font-size: 20px;
  --t4-table-title-font-weight: 400;
  --t4-table-footer-height: 56px;
  --t4-table-head-text-color: rgba(0, 0, 0, 0.54);
  --t4-table-cell-border-color: rgba(0, 0, 0, 0.12);
  --t4-table-actions-cell-link-color: rgba(0, 0, 0, 0.54);
  --t4-table-selected-row-bg-color: #f5f5f5;
  --t4-table-actions-link-color: rgba(0, 0, 0, 0.54);
  --t4-table-footer-text-color: rgba(0, 0, 0, 0.54);
  --t4-table-input-text-color: #212121;
}
.md .dark,
.md.dark {
  --t4-table-head-text-color: rgba(255, 255, 255, 0.54);
  --t4-table-footer-text-color: rgba(255, 255, 255, 0.54);
  --t4-table-selected-row-bg-color: rgba(255, 255, 255, 0.05);
  --t4-table-actions-cell-link-color: rgba(255, 255, 255, 0.54);
  --t4-table-actions-link-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --t4-table-input-height: 32px;
  --t4-table-head-font-weight: 600;
  --t4-table-head-cell-height: 56px;
  --t4-table-head-icon-size: 18px;
  --t4-table-body-cell-height: 48px;
  --t4-table-cell-padding-horizontal: 16px;
  --t4-table-edge-cell-padding-horizontal: 16px;
  --t4-table-label-cell-padding-horizontal: 16px;
  --t4-table-checkbox-cell-width: 22px;
  /* --t4-table-actions-cell-link-color: var(--t4-theme-color); */
  /* --t4-table-actions-link-color: var(--t4-theme-color); */
  --t4-table-title-font-size: 20px;
  --t4-table-title-font-weight: 600;
  --t4-table-footer-height: 56px;
  --t4-table-head-text-color: rgba(0, 0, 0, 0.6);
  --t4-table-cell-border-color: rgba(0, 0, 0, 0.12);
  --t4-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
  --t4-table-footer-text-color: rgba(0, 0, 0, 0.5);
  --t4-table-input-text-color: #000;
  --t4-table-head-bg-color: #f6f6f7;
  --t4-table-card-header-bg-color: #f6f6f7;
}
.aurora .dark,
.aurora.dark {
  --t4-table-selected-row-bg-color: rgba(255, 255, 255, 0.03);
  --t4-table-head-text-color: rgba(255, 255, 255, 0.54);
  --t4-table-footer-text-color: rgba(255, 255, 255, 0.54);
  --t4-table-head-bg-color: rgba(255, 255, 255, 0.05);
  --t4-table-card-header-bg-color: rgba(255, 255, 255, 0.05);
}

TECHNO4 FRAMEWORK2
- Get Started
- Boonker
- Installation
- Package Structure
- App HTML Layout
- RTL Layout
- Initialize App
- Events
- Router Component
- Routes
- Store
- App/Core
- Accordion/Collapsible
- Action Sheet
- Area chart
- Autocomplete
- Badge
- Block/Content Block
- Breadcrumbs
- Button
- Calendar/Date Picker
- Cards
- Checkbox
- Chips
- Color Picker
- Contact List
- Data Table
- Dialog
- Floating action button
- Form
- Gauge
- Icons
- Inputs / Form Inputs
- Grid /Layout Grid
- Link
- List Button
- List View
- List Index
- Login Screen
- Menu List
- Messagebar
- Navbar
- Messages
- Notification
- Panel/Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Segmented
- Sheet Modal
- Skeleton
- Introduction
- Page
- Infinite Scroll
- Tabs
- Swiper
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swipeout
- Text Editor
- Timeline
- Toast
- Toggle
- Toolbar & Tabbar
- Tooltip
- Touch Ripple
- Treeview
- Virtual List
- Elevation
- Apache Cordova Integration
- Hardware: Web Audio API & Synth
- Hardware: Web MIDI Inspector
- Hardware: Web Serial UART Terminal
- Threads Studio: Visual Workflows
- Techno4 CLI: Scaffolding Reference
- DOM64: Selector Engine
- Rollup & Vite Component Compiler
- Початок роботи
  - Тестовий підпункт
- Techno4 Total
- Threads Components
- Types