Tables

Documentation and examples for tables with Siftal.

Examples

Just add the base class .tbl to any <table>, then extend with custom styles or our various included modifier classes.

Simple table

# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer
Git Repository
node_modules Initial commit 10 hours ago
test Initial commit 10 hours ago
build Initial commit 10 hours ago
package.json Initial commit 10 hours ago
Gruntfile.js Initial commit 10 hours ago

Colored

A table's colors can be changed

# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer
# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer
# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer
# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer
# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer
# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer
# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer
# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer

Table head options

Similar to colored tables, use one of modifier classes to make rows appear colored.

# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer

No Zebra!

Use .dead to add zebra-striping to any table row within the <tbody>.

# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer
# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer

Custom cell

A cell or row may let a user know whether a value is good or bad.

you can add .positive, .negative, .active, .warning and .disabled to create custom design on cell or rows

# First Name Last Name Username
1JavadEvazzadeh@evazzadeh
2RezaMohiti@biqarar
3HasanSalehi@baravak
1JavadEvazzadeh@evazzadeh
2RezaMohiti@biqarar
3HasanSalehi@baravak
3HasanSalehi@baravak
- Footer

Bordered table

Add .bordered for borders on all sides of the table and cells.

# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer
# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer

Responsive table

Only add .responsive to table.

# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer

Sizes

Compact

A table may sometimes need to be more compact to make more rows visible at a time

# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer

Normal

# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer

Padded

A table may sometimes need to be more padded for legibility

# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer

Small

A table may sometimes need to be small

# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer

Large

A table may sometimes need to be large

# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer

Sortable heading

Add data-sort=desc|asc to table header for add icon of sorting

# First Name Last Name Username
1 Javad Evazzadeh @evazzadeh
2 Reza Mohiti @biqarar
3 Hasan Salehi @baravak
- Footer