Tables

See examples below for how to style tables

Defaults

Tables

Tables by default will have some nice spacing and be right aligned provided the correct classes are used.

Table Classes

Class Name Impact
table-default Should be applied to the table element to get basic table styles.
table-default__thead Should be applied to the thead element to get table header styles.
table-default__cell--text Put on a table cell (td or th) to have it left align.
table-default__cell--action Use on a table cell (and column) that should contain an actionable thing like a button.
table-default__tfoot Use this on the tfoot element to get proper table footer styles.

Basic table with hover effects

Text Header Default Header Action Header
Cell data Cell data
Cell data Cell data
Cell data Cell data
Cell data Cell data
Cell data Cell data
Some Data Some other data Even more data

Complex Table with header actions

  • Total: $1,000,000.00
Included Clearing Invoice Id Pay Date DPE Amount Discount (%) Discount ($)
Yes 123asd34456dfg 2016-05-25 13 $1,000,000.00 1.00% $1,000.00
Yes 123asd34456dfg 2016-05-25 13 $1,000,000.00 1.00% $1,000.00
Yes 123asd34456dfg 2016-05-25 13 $1,000,000.00 1.00% $1,000.00 
Tables






    Tables by default will have some nice spacing and be right aligned provided the correct classes
    are used.




Table Classes




    
    

        Class Name
        Impact
    

    
    
    

        table-default
        Should be applied to the
            table element to get basic table styles.
        
    

    

        table-default__thead
        Should be applied to the
            thead element to get table header styles.
        
    

    

        table-default__cell--text
        Put on a table cell (td or
            th) to have it left align.
        
    

    

        table-default__cell--action
        Use on a table cell (and column) that should contain an actionable thing like a button.
    

    

        table-default__tfoot
        Use this on the
            tfoot element to get proper table footer styles.
        
    

    




Basic table with hover effects




    

        

            
            
Text Header
            Default Header
            Action Header
            

            
            

                Cell data
                Cell data
                
                    
                
            

            

                Cell data
                Cell data
                
                    
                
            

            

                Cell data
                Cell data
                
                    
                
            

            

                Cell data
                Cell data
                
                    
                
            

            

                Cell data
                Cell data
                
                    
                    
                
            

            
            
            

                Some Data
                Some other data
                Even more data
            

            
        

    






Complex Table with header actions




    

        

            
    
                
  • Total: $1,000,000.00
    • 
            

            
    
                
  • 
                    
                
    • 
            

        

        

            
            
    
                
  • 
                    
                
    • 
            

        

    

    

        

            
            

                
                    
                
                Included
                Clearing
                Invoice Id
                Pay Date
                DPE
                Amount
                Discount (%)
                Discount ($)
            

            

            
            

                
                
                Yes
                123asd34456dfg
                2016-05-25
                13
                $1,000,000.00
                1.00%
                $1,000.00
            

            

                
                
                Yes
                123asd34456dfg
                2016-05-25
                13
                $1,000,000.00
                1.00%
                $1,000.00
            

            

                
                
                Yes
                123asd34456dfg
                2016-05-25
                13
                $1,000,000.00
                1.00%
                $1,000.00