Таблиця даних
Навігація
- Макет таблиці даних
- Нижній колонтитул сторінки
- Вибір рядків
- Вхідні дані в заголовку таблиці
-
Заголовок/заголовок таблиціАльтернативний заголовок із діями рядків
- Сортування
- Таблиці що згортаються
- Методи застосунку Таблиці даних
- Параметри таблиці даних
-
Події таблиці данихПодії 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
- обгортка основної таблиці даних.є обов'язковим
○ 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
Подія | Об'єкт | Опис |
---|---|---|
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
: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
- Get Started
- Introduction
- Kitchen Sink
- 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