Table

ty-table

The ty-table component serves as a container for table rows and columns, offering flexible layout and styling options.

Usage

Live Editor

<ty-table>
    <ty-table-head>                            
        <ty-table-head-cell width="30%">Column 1</ty-table-head-cell>
        <ty-table-head-cell width="30%">Column 2</ty-table-head-cell>
        <ty-table-head-cell width="39%" align="center">Column 3</ty-table-head-cell>
        <ty-table-head-cell width="1%"> Actions </ty-table-head-cell>
    </ty-table-head>
    <ty-table-body>
    <ty-table-row>                
        <ty-table-cell>Row 1, Cell 1</ty-table-cell>
        <ty-table-cell>Row 1, Cell 2</ty-table-cell>
        <ty-table-cell>Row 1, Cell 3</ty-table-cell>
        <ty-table-cell>  
            <ty-button variant="icon">
            <span class="material-icons md-18">more_vert</span>
            </ty-button>
        </ty-table-cell>
    </ty-table-row>
    <ty-table-row>                
        <ty-table-cell>Row 2, Cell 1</ty-table-cell>
        <ty-table-cell>Row 2, Cell 2</ty-table-cell>
        <ty-table-cell>Row 2, Cell 3</ty-table-cell>
        <ty-table-cell>  
            <ty-button variant="icon">
            <span class="material-icons md-18">more_vert</span>
            </ty-button>
        </ty-table-cell>
    </ty-table-row>                   
    </ty-table-body>
</ty-table>

Result

Loading...

Children Components

Component	Description
ty-table-head-cell	Represents individual header cells in the table.
ty-table-body	Represents the body of the table, containing data rows.
ty-table-row	Represents individual rows in the table.
ty-table-cell	Represents individual cells within a row.

Properties

Name	Description	Type	Default
align	Sets the text alignment.	'left' | 'center' | 'right'	'left'
width	Defines the cell width.	String (px, %, etc.)	'auto'