Browse docs
- Introduction
- Install
- Contents
- RTL
Getting started
- Color
- Paths
- Reset
- Dims
- Responsive
Customize
- Border
- Icon
- Layouts
- Typography
- theme build
Structure
- Code Editor
- Demos
Examples and Test
- What We Think
- About Us
- FAQ
- License
About
Table
The Table component provides a flexible and customizable way to display tabular data, supporting features like outlined tables, zebra-striping, responsive layouts, and cell customization with images or buttons.
Description #
The Table component is designed to present data in a structured format. It supports multiple styles and modes:
Default Table: Standard table layout with customizable spacing and borders.
striped Table: Alternating row backgrounds for better readability.
Scroll Table: You can use scroll table for more content.
Paginated Table: You can use the Pagination component to paginate the table.
Examples and Classes #
Basic Table
NAME
ROLE
STATUS
Tony Reichert
CEO
Active
Zoey Lang
Technical Lead
Paused
Jane Fisher
Senior Developer
Active
William Howard
Community Manager
Vacation
<table class="table">
<thead>
<tr>
<th>NAME</th>
<th>ROLE</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tony Reichert</td>
<td>CEO</td>
<td>Active</td>
</tr>
<tr>
<td>Zoey Lang</td>
<td>Technical Lead</td>
<td>Paused</td>
</tr>
<tr>
<td>Jane Fisher</td>
<td>Senior Developer</td>
<td>Active</td>
</tr>
<tr>
<td>William Howard</td>
<td>Community Manager</td>
<td>Vacation</td>
</tr>
</tbody>
</table>
Striped Table
NAME
ROLE
STATUS
Tony Reichert
CEO
Active
Zoey Lang
Technical Lead
Paused
Jane Fisher
Senior Developer
Active
William Howard
Community Manager
Vacation
<table class="table striped-table">
<thead>
<tr>
<th>NAME</th>
<th>ROLE</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tony Reichert</td>
<td>CEO</td>
<td>Active</td>
</tr>
<tr>
<td>Zoey Lang</td>
<td>Technical Lead</td>
<td>Paused</td>
</tr>
<tr>
<td>Jane Fisher</td>
<td>Senior Developer</td>
<td>Active</td>
</tr>
<tr>
<td>William Howard</td>
<td>Community Manager</td>
<td>Vacation</td>
</tr>
</tbody>
</table>
Scroll Table
NAME
ROLE
STATUS
Tony Reichert
CEO
Active
Zoey Lang
Technical Lead
Paused
Jane Fisher
Senior Developer
Active
William Howard
Community Manager
Vacation
Tony Reichert
CEO
Active
Zoey Lang
Technical Lead
Paused
Jane Fisher
Senior Developer
Active
William Howard
Community Manager
Vacation
Tony Reichert
CEO
Active
Zoey Lang
Technical Lead
Paused
Jane Fisher
Senior Developer
Active
William Howard
Community Manager
Vacation
Tony Reichert
CEO
Active
Zoey Lang
Technical Lead
Paused
Jane Fisher
Senior Developer
Active
William Howard
Community Manager
Vacation
<div class="scroll-table">
<table class="table ">
<thead>
<tr>
<th>NAME</th>
<th>ROLE</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tony Reichert</td>
<td>CEO</td>
<td>Active</td>
</tr>
<tr>
<td>Zoey Lang</td>
<td>Technical Lead</td>
<td>Paused</td>
</tr>
<tr>
<td>Jane Fisher</td>
<td>Senior Developer</td>
<td>Active</td>
</tr>
<tr>
<td>William Howard</td>
<td>Community Manager</td>
<td>Vacation</td>
</tr>
<tr>
<td>Tony Reichert</td>
<td>CEO</td>
<td>Active</td>
</tr>
<tr>
<td>Zoey Lang</td>
<td>Technical Lead</td>
<td>Paused</td>
</tr>
<tr>
<td>Jane Fisher</td>
<td>Senior Developer</td>
<td>Active</td>
</tr>
<tr>
<td>William Howard</td>
<td>Community Manager</td>
<td>Vacation</td>
</tr>
<tr>
<td>Tony Reichert</td>
<td>CEO</td>
<td>Active</td>
</tr>
<tr>
<td>Zoey Lang</td>
<td>Technical Lead</td>
<td>Paused</td>
</tr>
<tr>
<td>Jane Fisher</td>
<td>Senior Developer</td>
<td>Active</td>
</tr>
<tr>
<td>William Howard</td>
<td>Community Manager</td>
<td>Vacation</td>
</tr>
<tr>
<td>Tony Reichert</td>
<td>CEO</td>
<td>Active</td>
</tr>
<tr>
<td>Zoey Lang</td>
<td>Technical Lead</td>
<td>Paused</td>
</tr>
<tr>
<td>Jane Fisher</td>
<td>Senior Developer</td>
<td>Active</td>
</tr>
<tr>
<td>William Howard</td>
<td>Community Manager</td>
<td>Vacation</td>
</tr>
</tbody>
</table>
</div>
Pagination Table
NAME
ROLE
STATUS
Jane Fisher
Senior Developer
Active
Tony Reichert
CEO
Active
Zoey Lang
Technical Lead
Paused
Tony Reichert
CEO
Active
William Howard
Community Manager
Vacation
Zoey Lang
Technical Lead
Paused
William Howard
Community Manager
Vacation
Jane Fisher
Senior Developer
Active
Tony Reichert
CEO
Active
Zoey Lang
Technical Lead
Paused
Jane Fisher
Senior Developer
Active
William Howard
Community Manager
Vacation
Jane Fisher
Senior Developer
Active
William Howard
Community Manager
Vacation
Tony Reichert
CEO
Active
William Howard
Community Manager
Vacation
Jane Fisher
Senior Developer
Active
Zoey Lang
Technical Lead
Paused
<div class="pagination-table w-lg-90">
<table class="table " data-item-per-page="3">
<thead>
<tr>
<th>NAME</th>
<th>ROLE</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jane Fisher</td>
<td>Senior Developer</td>
<td>Active</td>
</tr>
<tr>
<td>Tony Reichert</td>
<td>CEO</td>
<td>Active</td>
</tr>
<tr>
<td>Zoey Lang</td>
<td>Technical Lead</td>
<td>Paused</td>
</tr>
<tr>
<td>Tony Reichert</td>
<td>CEO</td>
<td>Active</td>
</tr>
<tr>
<td>William Howard</td>
<td>Community Manager</td>
<td>Vacation</td>
</tr>
<tr>
<td>Zoey Lang</td>
<td>Technical Lead</td>
<td>Paused</td>
</tr>
<tr>
<td>William Howard</td>
<td>Community Manager</td>
<td>Vacation</td>
</tr>
<tr>
<td>Jane Fisher</td>
<td>Senior Developer</td>
<td>Active</td>
</tr>
<tr>
<td>Tony Reichert</td>
<td>CEO</td>
<td>Active</td>
</tr>
<tr>
<td>Zoey Lang</td>
<td>Technical Lead</td>
<td>Paused</td>
</tr>
<tr>
<td>Jane Fisher</td>
<td>Senior Developer</td>
<td>Active</td>
</tr>
<tr>
<td>William Howard</td>
<td>Community Manager</td>
<td>Vacation</td>
</tr>
<tr>
<td>Jane Fisher</td>
<td>Senior Developer</td>
<td>Active</td>
</tr>
<tr>
<td>William Howard</td>
<td>Community Manager</td>
<td>Vacation</td>
</tr>
<tr>
<td>Tony Reichert</td>
<td>CEO</td>
<td>Active</td>
</tr>
<tr>
<td>William Howard</td>
<td>Community Manager</td>
<td>Vacation</td>
</tr>
<tr>
<td>Jane Fisher</td>
<td>Senior Developer</td>
<td>Active</td>
</tr>
<tr>
<td>Zoey Lang</td>
<td>Technical Lead</td>
<td>Paused</td>
</tr>
</tbody>
</table>
<div class="pagination gap-1 w-100 d-flex justify-content-center py-3" style="--size:40px">
<div class="previous-button btn"><i class="fa-solid fa-angle-left"></i></div>
<div class="next-button btn"><i class="fa-solid fa-angle-right"></i></div>
</div>
</div>
Available Classes
| Class | Description |
|---|---|
| .table | Main table element. Applies base table styles and layout. |
| .striped-table | Applies alternating background color to even rows for readability. |
| .scroll-table (for parent div) | Make table scroll for logn content |
| .pagination-table (for parent div) | Make table pagination for content you want show on low high |
Layout Variations
The Table component supports different layout variations:
- striped Table: Alternating row backgrounds for readability.
- Scroll Table: Adapts to long content.
- Pageination: Adds pageination .
File Locations #
| File | Path | Description |
|---|---|---|
| index.html | miz/themes/mizoon/components/table/index.html | Example implementation and documentation |
| _index.scss | miz/themes/mizoon/components/table/_index.scss | SCSS styles and variables |
| script.js | miz/themes/mizoon/components/table/script.js | JavaScript functionality (if needed) |
SCSS Variables #
$table-custom-classes : ".bg-section-color, .w-50, .radius-all-normal, .p-3";
$table-head-th-custom-classes : ".bg-on-secondary-color, .text-color, .py-2, .px-2, .txt-normal";
$table-head-border-radius : 12px;
$table-body-td-custom-classes : " .title-text-color, .py-2, .pl-2, .txt-normal";
$table-striped-custom-classes : ".bg-on-secondary-color";
$table-striped-on : even;
JavaScript Implementation #
Class Structure
| Method/Property | Type | Description |
|---|---|---|
| N/A | N/A | The Table component does not require JavaScript for its core functionality. All features are handled via HTML and CSS. |
Implementation Example
// JavaScript required for Pageination Table
class TablePaginator {
constructor() {
this.tables = document.querySelectorAll('.table[data-item-per-page]');
this.init();
}
init() {
this.tables.forEach(table => this.setupTable(table));
}
setupTable(table) {
const rows = Array.from(table.querySelectorAll('tbody tr'));
const perPage = parseInt(table.getAttribute('data-item-per-page'), 10) || 5;
const totalPages = Math.max(1, Math.ceil(rows.length / perPage));
const pagination = table.parentElement.querySelector('.pagination');
if (!pagination) {
rows.forEach((r, i) => {
r.style.display = i < perPage ? '' : 'none';
});
return;
}
const existingPages = pagination.querySelectorAll('.page');
if (existingPages.length === 0) {
for (let i = 1; i <= totalPages; i++) {
const p = document.createElement('div');
p.className = 'page';
p.textContent = i;
pagination.insertBefore(p, pagination.querySelector('.next-button'));
}
}
const pages = Array.from(pagination.querySelectorAll('.page'));
const prev = pagination.querySelector('.previous-button');
const next = pagination.querySelector('.next-button');
console.log("firpagest");
const showPage = (pageNumber) => {
const start = (pageNumber - 1) * perPage;
const end = start + perPage;
rows.forEach((r, i) => {
r.style.display = i >= start && i < end ? '' : 'none';
});
pages.forEach((p, i) => p.classList.toggle('active', i + 1 === pageNumber));
};
pages.forEach((p, i) => p.addEventListener('click', () => showPage(i + 1)));
prev?.addEventListener('click', () => {
const active = pages.findIndex(p => p.classList.contains('active'));
if (active > 0) showPage(active);
});
next?.addEventListener('click', () => {
const active = pages.findIndex(p => p.classList.contains('active'));
if (active < pages.length - 1) showPage(active + 2);
});
showPage(1);
}
}
document.addEventListener('DOMContentLoaded', () => new TablePaginator());
To use this component, you only need to include the MIZ CSS file in your page. No JavaScript is required for basic table features.