Table

Tables for displaying dynamic data

There is some complex template stuff that requires following the examples quite closely to function. Make sure you include everything, especially the #cell ref.

Contents

Allow only one row to be expanded at once

Non-responsive table

Date	Project Name	Status	Amount
16/08/1973	Build a website	Released	200
Transaction ID 12345123434 Transaction Date 16/08/1973 Project Name Build a website Project Description This is a description that will only show up on expand
16/08/1973	Design a website abc	Released	10
Transaction ID 34534534534 Transaction Date 16/08/1973 Project Name Design a website abc Project Description This is a description that will only show up on expand
16/08/1973	Project for freelancer	Released	30
Transaction ID 675756756756 Transaction Date 16/08/1973 Project Name Project for freelancer Project Description This is a description that will only show up on expand

Responsive table

Date	Project Name	Status	Amount
Date 16/08/1973	Project Name Build a website	Status Released	Amount 200
Transaction ID 12345123434 Transaction Date 16/08/1973 Project Name Build a website Project Description This is a description that will only show up on expand
Date 16/08/1973	Project Name Design a website abc	Status Released	Amount 10
Transaction ID 34534534534 Transaction Date 16/08/1973 Project Name Design a website abc Project Description This is a description that will only show up on expand
Date 16/08/1973	Project Name Project for freelancer	Status Released	Amount 30
Transaction ID 675756756756 Transaction Date 16/08/1973 Project Name Project for freelancer Project Description This is a description that will only show up on expand

enableAutoExpandOnSingleItem = true.

This allows the table to automatically expand on initial load when there is only one item in the row.

Date	Project Name	Status	Amount
16/08/1973	Build a website	Released	200
Transaction ID 12345123434 Transaction Date 16/08/1973 Project Name Build a website Project Description This is a description that will only show up on expand

enableAutoExpandOnSingleItem = false

Date	Project Name	Status	Amount
16/08/1973	Build a website	Released	200
Transaction ID 12345123434 Transaction Date 16/08/1973 Project Name Build a website Project Description This is a description that will only show up on expand

Alerts & notifications

Buttons & actions

Cards

Forms

Icons / images / media

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

Table