Skip to main content

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

Навігація

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

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

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

Макет таблиці загальних даних можна розглядати так:
<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 - обгортка основної таблиці даних.є обов'язковим

○ table - власне таблиця. Є обов'язковим

■ thead -заголовок таблиці head

■ tbody - тіло таблиці, є обов'язковим

■ label-cell - основна клітинка мітки (тільки одна така клітинка на рядок, зазвичай перша клітинка)

■ numeric-cell - комірка для відображення числових даних (вирівняна за правим краєм)

■ medium-only - додатковий клас для відображення цієї комірки/стовпця лише тоді, коли ширина програми >= 768 пікселів. Щоб отримати повний набір таких адаптивних класів, перегляньте документи 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. Об'єкт з параметрами таблиці даних.

Метод повертає створений екземпляр таблиці даних

app.dataTable.destroy(el) - знищити екземпляр таблиці даних

● el - HTMLElement or string (за допомогою селектора CSS) або об’єкта. . Елемент таблиці даних або екземпляр таблиці даних для знищення.

app.dataTable.get(el) - отримати примірник таблиці даних за елементом HTML

● el - HTMLElement or string(за допомогою селектора CSS). Елемент таблиці даних.

Метод повертає екземпляр таблиці даних

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

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

string

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

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

Події DOM

ПодіяОб'єктОпис
datatable:sort
Data Table Element

<div class="data-table">

Подію буде викликано зміною сортування таблиці даних
datatable:beforedestroy
Data Table Element

<div class="data-table">

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

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

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

Змінні 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 Framework