module.exports = { id: 'tables', title: 'Tables', keywords: [`table`, `caption`, `thead`, `tbody`, `tr`, `th`, `td`, `horizontal`, `striped`, `hoverable`], description: `

Tables are styled in a minimal, modern and responsive manner, allowing users on all devices to easily browse tabular data, taking advantage of the Flexbox layout's capabilities. To make tabular data properly display on mobile devices, remember to specify a data-label attribute for each <> element (usually same as the heading of the column).

`, example: `
Desktop view
People
NameSurnameAlias
ChadWilbertsMrOne
AdamSmithTheSmith
SophiaCandersonCandee
NickThomsonNickThom
MarkGerkisMarkie
JohnFergussonFergujohn
SylviaPouleauSylver
NormanJonesNormalJones
TrevorHeidelHeidi

Mobile view
People
NameSurnameAlias
ChadWilbertsMrOne
AdamSmithTheSmith
SophiaCandersonCandee
`, samples: [`
<table>
  <caption>People</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Alias</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">Chad</td>
      <td data-label="Surname">Wilberts</td>
      <td data-label="Alias">MrOne</td>
    </tr>
    <tr>
      <td data-label="Name">Adam</td>
      <td data-label="Surname">Smith</td>
      <td data-label="Alias">TheSmith</td>
    </tr>
    <tr>
      <td data-label="Name">Sophia</td>
      <td data-label="Surname">Canderson</td>
      <td data-label="Alias">Candee</td>
    </tr>
  </tbody>
</table>
`], notes: [`Remember to always specify a data-label attribute for all of your <td> elements, otherwise they will not display properly on mobile.`, `Due to the way tables are displayed, the <tfoot> element is not supported.`, `Tables are vertically scrollable by default, with a max-height property of 400px.`], customization: [ `Text color for <th> and <td> elements can be changed by changing the values of the --table-head-fore-color and --table-body-fore-color variables respectively.`, `Background color for <th> and <td> elements can be changed by changing the values of the --table-head-back-color and --table-body-back-color variables respectively.`, `Border color for tables can be changed by changing the value of the --table-border-color variable.`, `Border color for the separator between a table's heading and a table's body can be changed by changing the value of the --table-border-separator-color variable.`, `Alternative background color for <td> elements in striped tables can be changed by changing the value of the --table-body-alt-back-color variable.`, `Hover background color for <tr> elements in hoverable tables can be changed by changing the value of the --table-body-hover-back-color variable.`, `Universal margin for elements can be changed globally by changing the value of the --universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`, `Universal padding for elements can be changed globally by changing the value of the --universal-padding variable.`, `Universal border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.` ], modifiers: [ { title : 'Horizontal tables', description: `

You can create horizontal tables (.horizontal), by applying the appropriate class.

`, example: `
People
NameSurnameAlias
ChadWilbertsMrOne
AdamSmithTheSmith
SophiaCandersonCandee
`, samples: [`
<table class="horizontal">
  <caption>People</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Alias</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">Chad</td>
      <td data-label="Surname">Wilberts</td>
      <td data-label="Alias">MrOne</td>
    </tr>
    <tr>
      <td data-label="Name">Adam</td>
      <td data-label="Surname">Smith</td>
      <td data-label="Alias">TheSmith</td>
    </tr>
    <tr>
      <td data-label="Name">Sophia</td>
      <td data-label="Surname">Canderson</td>
      <td data-label="Alias">Candee</td>
    </tr>
  </tbody>
</table>
`] }, { title : 'Striped tables', description: `

You can create striped tables (.striped), by applying the appropriate class.

`, example: `
People
NameSurnameAlias
ChadWilbertsMrOne
AdamSmithTheSmith
SophiaCandersonCandee
`, samples: [`
<table class="striped">
  <caption>People</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Alias</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">Chad</td>
      <td data-label="Surname">Wilberts</td>
      <td data-label="Alias">MrOne</td>
    </tr>
    <tr>
      <td data-label="Name">Adam</td>
      <td data-label="Surname">Smith</td>
      <td data-label="Alias">TheSmith</td>
    </tr>
    <tr>
      <td data-label="Name">Sophia</td>
      <td data-label="Surname">Canderson</td>
      <td data-label="Alias">Candee</td>
    </tr>
  </tbody>
</table>
`] }, { title : 'Hoverable tables', description: `

You can create hoverable tables (.hoverable), by applying the appropriate class.

`, example: `
People
NameSurnameAlias
ChadWilbertsMrOne
AdamSmithTheSmith
SophiaCandersonCandee
`, samples: [`
<table class="hoverable">
  <caption>People</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Alias</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">Chad</td>
      <td data-label="Surname">Wilberts</td>
      <td data-label="Alias">MrOne</td>
    </tr>
    <tr>
      <td data-label="Name">Adam</td>
      <td data-label="Surname">Smith</td>
      <td data-label="Alias">TheSmith</td>
    </tr>
    <tr>
      <td data-label="Name">Sophia</td>
      <td data-label="Surname">Canderson</td>
      <td data-label="Alias">Candee</td>
    </tr>
  </tbody>
</table>
`] } ], dos: [], donts: [ { description: `Avoid placing <td> elements in the <thead> of your tables, as well as placing <th> elements in the <tbody>.`, sample: `
<table>
  <caption>People</caption>
  <thead>
    <tr>
      <td>Bad idea</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th data-label="Bad">Also bad idea</th>
    </tr>
  </tbody>
</table>
` } ] }