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