Eventival Styleguide / Components / Tables

Tables

Tables are used to display static data in a tabular format.

Basic structure of responsive tables

We decided to not use the standard table structure anymore since this structure is not flexible and causes a lot of problems, especially when it comes to design on mobile devices. Instead we create tables with <div> containers for table and rows and by adding the specific styling classes. This approach allows us to create pretty flexible responsive tables and apply the grid to them.

Use the js-table class to automatically set the mobile or desktop view based on parent's available width. Make sure not to mix it with the table--big, table--small, table--force-mobile classes, since the required width measurement depends on the table initally being in desktop mode.

  <div class="table js-table">
    <div class="row row--header">
      <div class="cell">Edition</div>
      <div class="cell">Owner</div>
      <div class="cell">Hotel</div>
    </div>
    <div class="row">
      <div class="cell" data-title="Edition">2019</div>
      <div class="cell" data-title="Owner">Kasia Sycz</div>
      <div class="cell" data-title="Hotel">Radisson</div>
    </div>
    <div class="row">
      <div class="cell" data-title="Edition">2019</div>
      <div class="cell" data-title="Owner">John Doe</div>
      <div class="cell cell--empty" data-title="Hotel">—</div>
    </div>
 </div>

Examples

Dynamic responsive table

To create this kind of table, add the .js-table class to the main container with the .table class.

Edition
Owner
Hotel
Room type
2019
Kasia Sycz
Radisson
—
2019
John Doe
—
For 1
  <div class="table js-table">
    <div class="row row--header">
      <div class="cell">Edition</div>
      <div class="cell">Owner</div>
      <div class="cell">Hotel</div>
      <div class="cell">Room type</div>
    </div>
    <div class="row">
      <div class="cell" data-title="Edition">2019</div>
      <div class="cell" data-title="Owner">Kasia Sycz</div>
      <div class="cell" data-title="Hotel">Radisson</div>
      <div class="cell" data-title="Room">For 2</div>
    </div>
    <div class="row">
      <div class="cell" data-title="Edition">2019</div>
      <div class="cell" data-title="Owner">John Doe</div>
      <div class="cell" data-title="Hotel">Hilton</div>
      <div class="cell" data-title="Room">For 1</div>
    </div>
  </div>

Media Query responsive table with a small number of columns

To create this kind of table, add the .table--small to the main container with the .table class.

Edition
Owner
Hotel
Room type
2019
Kasia Sycz
Radisson
—
2019
John Doe
—
For 1
  <div class="table table--small">
    <div class="row row--header">
      <div class="cell">Edition</div>
      <div class="cell">Owner</div>
      <div class="cell">Hotel</div>
      <div class="cell">Room type</div>
    </div>
    <div class="row">
      <div class="cell" data-title="Edition">2019</div>
      <div class="cell" data-title="Owner">Kasia Sycz</div>
      <div class="cell" data-title="Hotel">Radisson</div>
      <div class="cell" data-title="Room">For 2</div>
    </div>
    <div class="row">
      <div class="cell" data-title="Edition">2019</div>
      <div class="cell" data-title="Owner">John Doe</div>
      <div class="cell" data-title="Hotel">Hilton</div>
      <div class="cell" data-title="Room">For 1</div>
    </div>
  </div>

Media Query responsive table with a big number of columns

To create this kind of table, add the .table--big to the main container with the .table class.

(icon)
Edition
Owner
Hotel
Room type
Check-in
Check-out
Total
Covered
Nr of people
Price
Status
(Icons)
Search
2019
Kasia Sycz
Radisson
For 2
22/07/2020
25/07/2020
$500
$300
2
$1000
Confirmed
Icon Icon
Icon
2019
John Doe
Hilton
For 1
5/06/2020
10/06/2020
$200
$200
1
$200
Paid
Icon Icon
<div class="table table--big">
  <div class="row row--header">
    <div class="cell">(icon)</div>
    <div class="cell">Edition</div>
    <div class="cell">Owner</div>
    <div class="cell">Hotel</div>
    <div class="cell">Room type</div>
    <div class="cell">Check-in</div>
    <div class="cell">Check-out</div>
    <div class="cell">Total</div>
    <div class="cell">Covered</div>
    <div class="cell">Nr of people</div>
    <div class="cell">Price</div>
    <div class="cell">Status</div>
    <div class="cell">(Icons)</div>
  </div>
  <div class="row">
    <div class="cell" data-title="#">Search</div>
    <div class="cell" data-title="Edition">2019</div>
    <div class="cell" data-title="Owner">Kasia Sycz</div>
    <div class="cell" data-title="Hotel">Radisson</div>
    <div class="cell" data-title="Room">For 2</div>
    <div class="cell" data-title="Check-in">22/07/2020</div>
    <div class="cell" data-title="Check-out">25/07/2020</div>
    <div class="cell" data-title="Total">$500</div>
    <div class="cell" data-title="Covered">$300</div>
    <div class="cell" data-title="Nr-of-people-staying">2</div>
    <div class="cell" data-title="Price">$1000</div>
    <div class="cell" data-title="Status">Confirmed</div>
    <div class="cell cell--icons" data-title="Icons">Icon Icon</div>
  </div>
  <div class="row">
    <div class="cell" data-title="#">Icon</div>
    <div class="cell" data-title="Edition">2019</div>
    <div class="cell" data-title="Owner">John Doe</div>
    <div class="cell" data-title="Hotel">Hilton</div>
    <div class="cell" data-title="Room">For 1</div>
    <div class="cell" data-title="Check-in">5/06/2020</div>
    <div class="cell" data-title="Check-out">10/06/2020</div>
    <div class="cell" data-title="Total">$200</div>
    <div class="cell" data-title="Covered">$200</div>
    <div class="cell" data-title="Nr-of-people-staying">1</div>
    <div class="cell" data-title="Price">$200</div>
    <div class="cell" data-title="Status">Paid</div>
    <div class="cell cell--icons" data-title="Icons">Icon Icon</div>
  </div>
</div>

Table with summary rows

Edition
Owner
Hotel
Room type
2019
Kasia Sycz
Radisson
—
Summary tow dfffsfdfffsvfsff dfdsfdsfds ddfsfsfdfdsf
2019
John Doe
—
For 1
  <div class="table table--small">
    <div class="row row--header">
      <div class="cell">Edition</div>
      <div class="cell">Owner</div>
      <div class="cell">Hotel</div>
      <div class="cell">Room type</div>
    </div>
    <div class="row">
      <div class="cell" data-title="Edition">2019</div>
      <div class="cell" data-title="Owner">Kasia Sycz</div>
      <div class="cell" data-title="Hotel">Radisson</div>
      <div class="cell" data-title="Room">For 2</div>
    </div>
    <div class="row">
      <div class="cell" data-title="Edition">2019</div>
      <div class="cell" data-title="Owner">John Doe</div>
      <div class="cell" data-title="Hotel">Hilton</div>
      <div class="cell" data-title="Room">For 1</div>
    </div>
  </div>

Force triggers

Additionally, you can force mobile formats on tables. By clicking the buttons below, you can test it. Tables below should not have the .js-table class and their width does not adjust automatically based on the window width.

(icon)
Edition
Owner
Hotel
Room type
Check-in
Check-out
Total
Covered
Nr of people
Price
Status
(Icons)
Search
2019
Kasia Sycz
Radisson
For 2
22/07/2020
25/07/2020
$500
$300
2
$1000
Confirmed
Icon Icon
Icon
2019
John Doe
Hilton
For 1
5/06/2020
10/06/2020
$200
$200
1
$200
Paid
Icon Icon
(icon)
Edition
Owner
Hotel
Room type
Check-in
Check-out
Total
Covered
Nr of people
Price
Status
(Icons)
Search
2019
Kasia Sycz
Radisson
For 2
22/07/2020
25/07/2020
$500
$300
2
$1000
Confirmed
Icon Icon
Icon
2019
John Doe
Hilton
For 1
5/06/2020
10/06/2020
$200
$200
1
$200
Paid
Icon Icon