To make tables responsive, wrap the <table></table> inside a <div></div> with class .ae-table-responsive

'Data tables require a <thead> at all times. When possible, clicking the <thead> should sort the table. Tables should optionally be given a title.

User Birthday Mobile
Anna 01-01-1990 +63 917 0000000
Bryan 02-01-1990 +63 918 0000000
Carol 03-01-1990 +63 919 0000000

Use .ae-table-unstyled class for unstyled tables. This class disables row background colors.

Use .ae-table-fixed-width to set equal widths to cells

Table with Actions

Created At Address Contract Effective Date Closing Date Owner Creation Step Paid Actions
January 07, 2016 658 NW 9th Ct, Boca Raton, FL 33486, USA January 07, 2016 January 29, 2016 step_2 false
January 07, 2016 2714 Southern Parkway West January 07, 2016 January 29, 2016 step_2 false View
Small Office Top Producer $1,299.00

Table with Filtering

There is an option to filter through a table.

<%= render "express_ui/molecules/table_with_filtering" %>

Recommended reading on designing tables: Design better data tables