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.

• Outlined Table: Adds borders around the table and cells for clear separation.

• Zebra-striped Table: Alternating row backgrounds for better readability.

• Responsive Table: Adapts layout for smaller screens, showing headers as labels.

Examples and Classes #

Basic Example

            

                

                    

                        

                            
ID
                            
Name
                            
Profession
                        
                    
                    

                        

                            
Id1
                            
Name1
                            
Profession1
                        
                        

                            
Id2
                            
Name2
                            
Profession2
                        
                    
                
            
            

                
                
HTML
                
            
            <table class="table w-100" style="--table-space:7px;">
    <thead>
        <tr class="bg-primary-color">
            <th>ID</th>
            <th>Name</th>
            <th>Profession</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Id1</td>
            <td>Name1</td>
            <td>Profession1</td>
        </tr>
        <tr>
            <td>Id2</td>
            <td>Name2</td>
            <td>Profession2</td>
        </tr>
    </tbody>
</table>
        

Table with Images and Buttons

            

                

                    

                        

                            
ID
                            
Name
                            
Profession
                        
                    
                    

                        

                            

                            
Name1
                            
Primary
                        
                    
                
            
            

                
                
HTML
                
            
            <table class="table w-100" style="--table-space:7px;">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Profession</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><img src="../../assets/media/images/2669ac63cf122930dc8980e08c3c917c.jpg" alt="Image"></td>
            <td>Name1</td>
            <td><button type="button" class="btn btn-primary btn-round">Primary</button></td>
        </tr>
    </tbody>
</table>
        

Zebra-striped Table

            

                

                    

                        

                            
ID
                            
Name
                            
Profession
                        
                    
                    

                        

                            
Id1
                            
Name1
                            
Profession1
                        
                        

                            
Id2
                            
Name2
                            
Profession2
                        
                    
                
            
            

                
                
HTML
                
            
            <table class="table w-100" style="--table-space:7px;">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Profession</th>
        </tr>
    </thead>
    <tbody class="zebra-mode">
        <tr>
            <td>Id1</td>
            <td>Name1</td>
            <td>Profession1</td>
        </tr>
        <tr>
            <td>Id2</td>
            <td>Name2</td>
            <td>Profession2</td>
        </tr>
    </tbody>
</table>
        

Outlined Table

            

                

                    

                        

                            
ID
                            
Name
                            
Profession
                        
                    
                    

                        

                            
Id1
                            
Name1
                            
Profession1
                        
                    
                
            
            

                
                
HTML
                
            
            <table class="table outline w-100" style="--table-space:7px;">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Profession</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Id1</td>
            <td>Name1</td>
            <td>Profession1</td>
        </tr>
    </tbody>
</table>
        

Responsive Table

            

                

                    

                        

                            
Lorem
                            
Name
                            
Profession
                        
                    
                    

                        

                            
Id1
                            
Name1
                            
Profession1
                        
                    
                
            
            

                
                
HTML
                
            
            <table class="table responsive-table w-100" style="--table-space:7px;">
    <thead>
        <tr>
            <th>Lorem</th>
            <th>Name</th>
            <th>Profession</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-thead-title="Lorem">Id1</td>
            <td data-thead-title="Name">Name1</td>
            <td data-thead-title="Profession">Profession1</td>
        </tr>
    </tbody>
</table>
        

Available Classes

Class	Description
.table	Main table element. Applies base table styles and layout.
.outline	Adds borders around the table and cells for a clear outline.
.zebra-mode	Applies alternating background color to even rows for readability.
.responsive-table	Makes the table responsive, showing headers as labels on small screens.

Layout Variations

The Table component supports different layout variations:

• Outlined Table: Adds borders around the table and cells.
• Zebra-striped Table: Alternating row backgrounds for readability.
• Responsive Table: Adapts to small screens with header labels.
• Table with Images/Buttons: Allows custom content in table cells.

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 #

            

                
                
SCSS
                
            
            $table-not-noline: ".bw-1, .bb-style-solid, .border-color";
$table-outline: ".bw-1, .border-style-solid, .border-color";
$table-defulte-py: ".py-1";
$table-td-custom-classes: ".on-primary-color, .align-center";
$table-th-custom-classes: ".on-primary-color, .align-center";
$table-td-zebra-mode-custom-classes: ".bg-primary-color";
$table-reponsive-break-point-value: "lg";
$table-responsive-tbody-custom-classes: ".d-lg-flex, .flex-lg-column, .gap-lg-2";
$table-responsive-tr-custom-classes: ".d-lg-flex, .flex-lg-column, .justify-content-lg-end, .align-items-lg-start";
$table-responsive-tr-radius: "medium";
$table-responsive-tr-bg-color: "primary";

        

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
                
            
            // No JavaScript required for basic table functionality.