Tables

Available Sass Variables and default values

$table-background-color: $wt
$table-border: 1px solid $gallery
$table-border-radius: $base-border-radius
$table-font-size: $font-size
$table-shadow: $base-shadow

$table-row-border-bottom: 1px solid $gallery
$table-row-background-color-hover: darken($table-background-color, 5%)

$table-extended-row-border-bottom: 1px solid #f0f0f0

$table-cell-top-bottom-padding: 14px
$table-cell-left-right-padding: 10px
$table-row-left-right-padding: 10px

$table-action-width: 70px
$table-action-text-align: center

$table-header-padding: $table-cell-top-bottom-padding $table-cell-left-right-padding
$table-header-color: $text-color
$table-header-font-size: $table-font-size
$table-header-font-weight: $font-semibold

$table-header-background-color: $gallery
$table-header-sorted-color: $brand-primary
$table-header-sorted-caret-height: 5px
$table-header-sorted-caret-width: 12px
$table-header-sorted-caret-distance-from-text: 10px

$table-header-title-padding: $table-cell-top-bottom-padding $table-cell-left-right-padding
$table-header-title-color: $text-color
$table-header-title-font-size: $table-font-size
$table-header-title-background-color: $alto
$table-header-title-text-align: left
$table-header-title-font-weight: $font-semibold

$table-footer-padding: $table-cell-top-bottom-padding $table-cell-left-right-padding
$table-footer-color: $text-color-light
$table-footer-font-size: $table-font-size
$table-footer-background-color: $gallery

$table-compact-font-size: $font-size-small
$table-compact-cell-padding: 7px

Examples

Basic Table

Basic tables come with a lot of functionality. They are paginated, are sortable by column headings, and the page size can be changed.

The front-end of a basic table consists of three main parts:

  • A form with an action pointing to an endpoint that will handle searching, sorting, pagination, etc. The form needs to have remote: true and an attribute of data-table='true'
  • A page-unique ID for the table
  • A partial that will render the collection. This partial will be rendered as the response from the server

These pieces go together like this:

= form_tag '/search_path', method: :get, remote: true, data: {table: true}
  #results
    = render partial: 'gaudi/components/partials/table', locals:{collection: @table_data, table_params: @table_params}

The partial looks something like this:

.v-table
  header
    = sortable_header "Contact", 'phone', table_params
    = sortable_header "Phone Number", 'phone', table_params

  - collection.each do |item|
    .v-row
      .v-column = item['contact']
      .v-column = item['phone']

  = render "shared/tables/footer", {collection: collection, table_params: table_params}

This is enough code to render a table like this:

Contact
Phone Number
Samantha Carter
101-301-4003
Rodney McKay
106-306-4018
Daniel Jackson
111-311-4033
Amanda Tapping
116-316-4048
Jack O'Neil
121-321-4063
Michael Shanks
126-326-4078
John Sheppard
131-331-4093
Richard Dean Anderson
136-336-4108
Samantha Carter
141-341-4123
Rodney McKay
146-346-4138
Rows:
1 - 10 of 144

Search Table

Often tables need to be searched. Simply add a search field (type='search') inside the form and it will automatically send throttled requests to the server as the user is typing.

= form_tag '/search_path', method: :get, remote: true, data: {table: true}
  = search_field_tag 'search', @search_term, placeholder: 'Search', id: nil

  #results
    = render partial: 'gaudi/components/partials/table', locals:{collection: @table_data, table_params: @table_params}
Name
Contact
Phone Number
Created
Action
CVS
Samantha Carter
101-301-4003
12/04/18
• • •
CVS
Rodney McKay
106-306-4018
11/09/18
• • •
CVS
Daniel Jackson
111-311-4033
10/15/18
• • •
CVS
Amanda Tapping
116-316-4048
09/20/18
• • •
CVS
Jack O'Neil
121-321-4063
08/26/18
• • •
CVS
Michael Shanks
126-326-4078
08/01/18
• • •
CVS
John Sheppard
131-331-4093
07/07/18
• • •
CVS
Richard Dean Anderson
136-336-4108
06/12/18
• • •
CVS
Samantha Carter
141-341-4123
05/18/18
• • •
CVS
Rodney McKay
146-346-4138
04/23/18
• • •
Rows:
1 - 10 of 144

Filter Table

To add live filtering of data, add select boxes with data-submit-on-change='true' as an attribute. Their values will be submitted to the server whenever their values change.

= form_tag '/search_path', method: :get, remote: true, data: {table: true}
  = select_tag 'pharmacy_name', options_for_select(options), data: {submit_on_change: true}

  #results
    = render partial: 'gaudi/components/partials/table', locals:{collection: @table_data, table_params: @table_params}
Name
Contact
Phone Number
Created
Action
CVS
Samantha Carter
101-301-4003
12/04/18
• • •
CVS
Rodney McKay
106-306-4018
11/09/18
• • •
CVS
Daniel Jackson
111-311-4033
10/15/18
• • •
CVS
Amanda Tapping
116-316-4048
09/20/18
• • •
CVS
Jack O'Neil
121-321-4063
08/26/18
• • •
CVS
Michael Shanks
126-326-4078
08/01/18
• • •
CVS
John Sheppard
131-331-4093
07/07/18
• • •
CVS
Richard Dean Anderson
136-336-4108
06/12/18
• • •
CVS
Samantha Carter
141-341-4123
05/18/18
• • •
CVS
Rodney McKay
146-346-4138
04/23/18
• • •
Rows:
1 - 10 of 144

Double-header Table

To add a table title row, add a header with .title

.v-table
  header.title ALL CONTACTS
  header
    = sortable_header "Contact", 'phone', table_params
    = sortable_header "Phone Number", 'phone', table_params

  - collection.each do |item|
    .v-row
      .v-column = item['contact']
      .v-column = item['phone']

= render "shared/tables/footer", {collection: collection, table_params: table_params}
ALL CONTACTS
Contact
Phone Number
Samantha Carter
101-301-4003
Rodney McKay
106-306-4018
Daniel Jackson
111-311-4033
Amanda Tapping
116-316-4048
Jack O'Neil
121-321-4063
Michael Shanks
126-326-4078
John Sheppard
131-331-4093
Richard Dean Anderson
136-336-4108
Samantha Carter
141-341-4123
Rodney McKay
146-346-4138
Rows:
1 - 10 of 144