Table

processed with Commons Bootstrap 4.3 + Material Kit
Documentation / Table

# Default (condensed + hover)


# Firstnane Lastnane Age
1 John Doe 54
2 Tess Asher 34
3 Todd OBrien 34
    <@table>
        <@tr>
            <@th>#</@th>
            <@th>Firstnane</@th>
            <@th>Lastnane</@th>
            <@th>Age</@th>
        </@tr>
        <@tr>
            <@td>1</@td>
            <@td>John</@td>
            <@td>Doe</@td>
            <@td>54</@td>
        </@tr>
        <@tr>
            <@td>2</@td>
            <@td>Tess</@td>
            <@td>Asher</@td>
            <@td>34</@td>
        </@tr>
        <@tr>
            <@td>3</@td>
            <@td>Todd</@td>
            <@td>OBrien</@td>
            <@td>34</@td>
        </@tr>
    </@table>
    

# Striped


# Firstnane Lastnane Age
1 John Doe 54
2 Tess Asher 34
3 Todd OBrien 34
    <@table condensed=false hover=false striped=true>
    

# Bordered


# Firstnane Lastnane Age
1 John Doe 54
2 Tess Asher 34
3 Todd OBrien 34
    <@table condensed=false hover=false bordered=true>
    

# Condensed


# Firstnane Lastnane Age
1 John Doe 54
2 Tess Asher 34
3 Todd OBrien 34
    <@table condensed=true hover=false>
    

# Responsive


Some columns can be hidden according the size of the screen. In the following example, the firstname and age are not displayed for small screens.

# Firstnane Lastnane Age
1 John Doe 54
2 Tess Asher 34
3 Todd OBrien 34
        <@table>
            <@tr><@th>#</@th><@th hide=['xs','sm'] >Firstnane</@th><@th>Lastnane</@th><@th hide=['xs'] >Age</@th></@tr>
            <@tr><@td>1</@td><@td hide=['xs','sm']>John</@td><@td>Doe</@td><@td hide=['xs']>54</@td></@tr>
            <@tr><@td>2</@td><@td hide=['xs','sm']>Tess</@td><@td>Asher</@td><@td hide=['xs']>34</@td></@tr>
            <@tr><@td>3</@td><@td hide=['xs','sm']>Todd</@td><@td>OBrien</@td><@td hide=['xs']>34</@td></@tr>
        </@table>
    

# Parameters documentation


Parameter Value Default
id string none
class string none
responsive boolean true
condensed boolean true
hover boolean true
striped boolean false
bordered boolean false
narrow boolean false
params string none