Davidson Styleguide

Table: Columnize 

<div class="table-wrapper editorial table-wrapper--columnize">

    <table class="table--content">
        <caption>This is the table caption. It should be included, even if it is not visible, for accessibility purposes.</caption>
        <thead>
            <tr>
                <th scope="col">Row Labels</th>
                <th class="align-right" scope="col">Some Numbers</th>
                <th class="align-center" scope="col">Tag</th>
                <th scope="col">Too Much Text</th>
                <th scope="col">Yet More Text</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Row Label One</th>
                <td class="align-right">10,000</td>
                <td class="align-center">Lorem</td>
                <td>Suspendisse mollis nunc et magna laoreet, vitae egestas metus faucibus. Vivamus sed efficitur odio, eu ultricies odio. Aenean blandit auctor.</td>
                <td>Sed vestibulum aliquam orci, nec.</td>
            </tr>
            <tr>
                <th scope="row">Row Label Two</th>
                <td class="align-right">50¢</td>
                <td class="align-center">Ipsum</td>
                <td>Vivamus a pellentesque libero. Maecenas consequat mollis metus in gravida. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.</td>
                <td>In dui libero, tempus quis.</td>
            </tr>
            <tr>
                <th scope="row">Row Label Three</th>
                <td class="align-right">14.67</td>
                <td class="align-center">Dolor</td>
                <td>Aliquam eget dolor cursus, suscipit massa id, lobortis eros. Cras ac hendrerit est, eu mattis mi. Donec posuere, nisl in.</td>
                <td>Praesent libero mauris, laoreet id.</td>
            </tr>
            <tr>
                <th scope="row">Row Label Four</th>
                <td class="align-right">22</td>
                <td class="align-center">Sit</td>
                <td>Integer auctor posuere porta. Sed nibh odio, maximus ut justo sed, dignissim fringilla lacus. Praesent in dignissim urna, ac venenatis.</td>
                <td>In hac habitasse platea dictumst.</td>
            </tr>
            <tr>
                <th scope="row">Row Label Five</th>
                <td class="align-right">12,345,678</td>
                <td class="align-center">Amet</td>
                <td>Vestibulum eleifend rutrum sapien, id eleifend lorem scelerisque sit amet. Maecenas ultrices sem ut purus imperdiet vulputate. Aliquam at tortor.</td>
                <td>Curabitur et sem quam. Aliquam.</td>
            </tr>
        </tbody>
    </table>
</div>
 
{% if table is empty or block('table_body') is empty %}
<div class="table-wrapper editorial {{ table.responsive_strategy }}">
	{% for instance in 1 .. table.count|default(1) %}
		
	<table class="{{ table.variant }}" {% if 'tablesaw' in table.variant %}data-tablesaw-mode="stack"{% endif %}>
		<caption>{{ table.caption }}</caption>
		{% block table_head %}
			<thead>
				<tr>
					<th scope="col">Row Labels</th>
					<th class="align-right" scope="col">Some Numbers</th>
					<th class="align-center" scope="col">Tag</th>
					<th scope="col">Too Much Text</th>
					<th scope="col">Yet More Text</th>
				</tr>
			</thead>
		{% endblock %}
		{% block table_body %}
			<tbody>
				<tr>
					<th scope="row">Row Label One</th>
					<td class="align-right">10,000</td>
					<td class="align-center">Lorem</td>
					<td>Suspendisse mollis nunc et magna laoreet, vitae egestas metus faucibus. Vivamus sed efficitur odio, eu ultricies odio. Aenean blandit auctor.</td>
					<td>Sed vestibulum aliquam orci, nec.</td>
				</tr>
				<tr>
					<th scope="row">Row Label Two</th>
					<td class="align-right">50¢</td>
					<td class="align-center">Ipsum</td>
					<td>Vivamus a pellentesque libero. Maecenas consequat mollis metus in gravida. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.</td>
					<td>In dui libero, tempus quis.</td>
				</tr>
				<tr>
					<th scope="row">Row Label Three</th>
					<td class="align-right">14.67</td>
					<td class="align-center">Dolor</td>
					<td>Aliquam eget dolor cursus, suscipit massa id, lobortis eros. Cras ac hendrerit est, eu mattis mi. Donec posuere, nisl in.</td>
					<td>Praesent libero mauris, laoreet id.</td>
				</tr>
				<tr>
					<th scope="row">Row Label Four</th>
					<td class="align-right">22</td>
					<td class="align-center">Sit</td>
					<td>Integer auctor posuere porta. Sed nibh odio, maximus ut justo sed, dignissim fringilla lacus. Praesent in dignissim urna, ac venenatis.</td>
					<td>In hac habitasse platea dictumst.</td>
				</tr>
				<tr>
					<th scope="row">Row Label Five</th>
					<td class="align-right">12,345,678</td>
					<td class="align-center">Amet</td>
					<td>Vestibulum eleifend rutrum sapien, id eleifend lorem scelerisque sit amet. Maecenas ultrices sem ut purus imperdiet vulputate. Aliquam at tortor.</td>
					<td>Curabitur et sem quam. Aliquam.</td>
				</tr>																
			</tbody>
		{% endblock %}
	</table>
	{% endfor %}
</div>
{% endif %}
 
{
  "table": {
    "caption": "This is the table caption. It should be included, even if it is not visible, for accessibility purposes.",
    "variant": "table--content",
    "responsive_strategy": "table-wrapper--columnize"
  }
}
  • Content: 
    table {
  margin-bottom: 2rem;
}

.editorial {
  table: {
    // margin-bottom: 1rem;
  }
}

.table-wrapper,
.editorial {

  table {
    border-collapse: collapse;
    
    th,
    td {
      padding: rr-gridbase(2);
    }
  
    th {
      &:first-child {
        text-align: left;
      }
    }
  
    thead {
      tr {
        &:last-child {
          th {
            border-bottom: 3px color(gray-light) double;
          }
        }
      }
    }

    tbody {
      tr {
        border-bottom: 1px color(gray-lighter) solid;
      }
    }
  
    caption {
      padding: {
        top: rr-gridbase(2);
        bottom: rr-gridbase(2);
      }
      font-style: italic;
      caption-side: bottom;
    }

    &.table--stripe {
      tbody {
        tr {
          &:nth-child(odd) {
            background-color: color(gray-lightest);
          }
        }
      }
    }
  }

  &.table-wrapper--overflow {
    max-width: 100%;
    overflow: auto;
  }

  &.table-wrapper--columnize {
    table {
      width: 100%;
    }

    thead {
      display: none;
    }

    tbody tr {
      // border-bottom: 4px color(davidson-white) solid;
    }

    th,
    td {
      display: block;
      border-width: 0;

      &.align-right {
        text-align: initial;
      }
    }

    .responsive-label {
      display: inline;
      font-weight: 500;

      &::after {
        content: ': ';
      }
    }

    @supports (display: grid) {
      tr {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-gap: 4px;

        th {
          grid-column: 1 / -1;
        }
      }
    }

    @include rr-break-directive(l) {
      thead {
        display: table-header-group;
      }

      tr {
        display: table-row;
      }

      th,
      td {
        display: table-cell;
        padding-top: rr-gridbase(2);
        padding-bottom: rr-gridbase(2);
        border-width: 4px;

        &.align-right {
          text-align: right;
        }
      }

      tbody tr {
        // border-bottom-width: 0;
      }

      .responsive-label {
        display: none;
      }
    }
  }
}

.photo-table {
  td {
    vertical-align: top;

    &:first-child {
      padding-right: 1rem;

      img {
        min-width: rem(100px);
      }
    }
  }

  &.photo-table--flipped {
    td {
      &:last-child {
        padding-left: 1rem;

        img {
          min-width: rem(100px);
        }
      }
    }
  }
}
  • URL: /components/raw/table/table.scss
  • Filesystem Path: patterns/molecules/text/table/table.scss
  • Size: 2.5 KB
  • Content: 
    jQuery(document).ready( () => {
  responsive_grid_table();
});
  • URL: /components/raw/table/table-init.js
  • Filesystem Path: patterns/molecules/text/table/table-init.js
  • Size: 64 Bytes
  • Content: 
    const responsive_grid_table = () => {
  const $table_columnize = $('.table-wrapper--columnize');
  const $table_tablesaw = $('.tablesaw');

  if ($table_columnize.length < 1 && $table_tablesaw.length < 1) return;

  if ($table_columnize.length >= 1) {
    const headers = $table_columnize.find('thead th').map((i, v) => {
      return v.innerText;
    });

    const rows = $table_columnize.find('tbody tr').map((i, v) => {
      $(v).find('th,td').map((p, q) => {
        const $cell = $(q);
        if ($cell.is('td')) {
          $cell.prepend('<div class="responsive-label">' + headers[p] + '</div>');
        }
      });
    });
  }

  if ($table_tablesaw.length >= 1) {
    Tablesaw.init();
  }
};
  • URL: /components/raw/table/table.js
  • Filesystem Path: patterns/molecules/text/table/table.js
  • Size: 703 Bytes

Title: Table

Table styles. Tables in an .editorial container will get these styles automatically, otherwise the table requires the content-table class. This way default browser table styles are not affected.

To be responsive, tables require a wrapper. There are two responsive strategies:

1) For data-intensive or huge tables, the table-wrapper--overflow style lets tables maintain their row-column relationships; the whole table is visible on small screens by scrolling in two axis.

2) The table-wrapper--columnize table fits tds to a grid; columns increase based on the available space. If the browser does not support grid, each td takes up a row. The thead is hidden, but the column headers in the thead are prepended to the content of each td if the included responsive-table.js file is included. (If it is not, the table is slightly less accessible but will still work).

For best results for #2, the thead should be a single row and no th should span more than one column; the cell labeling algorithm is pretty naïve.