Style & Content

Table

For basic styling — light padding and only horizontal dividers — add the base class .table to a <table>.

Member	Organisation	Role	Action
John Johnson	Receptionist at Bastion Hotels	Member	Manage Edit Remove
Jenny Baker	Head of Communications at Freshminds	Member	Manage Edit Remove
Henry Bond	Drupal progammer at Go Bananans!	Member	Manage Edit Remove
Getrud van Assen	Social worker at Greenvalley	Member	Manage Edit Remove
Mary-Lou Wallace	Personal trainer at My Personal Fitness Factory	Member	Manage Edit Remove

  

    

      
Member
      
Organisation
      
Role
      
Action
    
  

  

    

      

        

          

          
John Johnson
        
      
      
Receptionist at Bastion Hotels
      
Member
      

        

          Manage
          

            
Edit
            
Remove
          
        
      
    
  

Table scroll/swipe

To allow smooth interaction with bigger and more complex tables we make use of theTablesaw library.

Add classes .table and .tablesaw to the table element. To allow the user to use the swipe gesture (or use the left and right buttons) to navigate the columns you need to add the following attribute <table data-tablesaw-mode="swipe">.

To lock (prevent from scrolling) the first column you can use data-tablesaw-priority="persist" attribute on the <th> element like <data-tablesaw-priority="persist">. It is not recommended to use this on other columns or multiple columns as this will cause problems on small devices.

To a add a mini map use <table data-tablesaw-mode="swipe" data-tablesaw-minimap>.

Member	Organisation	Role	Action
John Johnson	Receptionist at Bastion Hotels	Member	Edit Toggle Dropdown Delete
Jenny Baker	Head of Communications at Freshminds	Member	Edit Toggle Dropdown Delete
Henry Bond	Drupal progammer at Go Bananans!	Member	Edit Toggle Dropdown Delete
Getrud van Assen	Social worker at Greenvalley	Member	Edit Toggle Dropdown Delete
Mary-Lou Wallace	Personal trainer at My Personal Fitness Factory	Member	Edit Toggle Dropdown Delete
John Johnson	Receptionist at Bastion Hotels	Member	Edit Toggle Dropdown Delete
Jenny Baker	Head of Communications at Freshminds	Member	Edit Toggle Dropdown Delete
Henry Bond	Drupal progammer at Go Bananans!	Member	Edit Toggle Dropdown Delete
Getrud van Assen	Social worker at Greenvalley	Member	Edit Toggle Dropdown Delete
Mary-Lou Wallace	Personal trainer at My Personal Fitness Factory	Member	Edit Toggle Dropdown Delete

  

    

      
Member
      
Organisation
      
Role
      
Action
    
  
  

    

      

        

          

          
John Johnson
        
      
      
Receptionist at Bastion Hotels
      
Member
      

        

          Manage
          

            
Edit
            
Remove