<div class="table-component table-component--dark table-component--durp table-component--large">
<h2 class="table-component__title table-component__title--dark " id="Table Example">
Table Example
</h2>
<p id="table-caption-" class="table-component__caption table-component__caption--dark ">
Fusce faucibus est felis, nec fermentum enim laoreet eleifend. Aliquam eget facilisis dolor. Curabitur efficitur odio non iaculis aliquet.
</p>
<div class="table-component__container">
<table class="table-component__table" aria-describedby="table-caption-">
<thead class="table-component__table-head">
<tr class="table-component__table-row">
<th class="table-component__column-header table-component__column-header--dark" scope="col">Green</th>
<th class="table-component__column-header table-component__column-header--dark" scope="col">Purple</th>
<th class="table-component__column-header table-component__column-header--dark" scope="col">Orange</th>
</tr>
</thead>
<tbody class="table-component__table-body">
<tr class="table-component__table-row">
<td class="table-component__table-data table-component__table-data--dark">
Blue
</td>
<td class="table-component__table-data table-component__table-data--dark">
Red
</td>
<td class="table-component__table-data table-component__table-data--dark">
Yellow
</td>
</tr>
<tr class="table-component__table-row">
<td class="table-component__table-data table-component__table-data--dark">
Yellow
</td>
<td class="table-component__table-data table-component__table-data--dark">
Blue
</td>
<td class="table-component__table-data table-component__table-data--dark">
Red
</td>
</tr>
</tbody>
</table>
</div>
</div>
{% set table_content %}
{% if component.table.header %}
<thead class="table-component__table-head">
<tr class="table-component__table-row">
{% for th in component.table.header %}
<th class="table-component__column-header table-component__column-header--{{ background }}" scope="col">{{ th.c }}</th>
{% endfor %}
</tr>
</thead>
{% endif %}
<tbody class="table-component__table-body">
{% for tr in component.table.body %}
<tr class="table-component__table-row">
{% for td in tr %}
{% if component.include_row_headers %}
{% if loop.index == 1 %}
<th class="table-component__row-header table-component__row-header--{{ background }}" scope="row">
{{ td.c }}
</th>
{% elseif loop.index > 1 %}
<td class="table-component__table-data table-component__table-data--{{ background }}">
{{ td.c }}
</td>
{% endif %}
{% else %}
<td class="table-component__table-data table-component__table-data--{{ background }}">
{{ td.c }}
</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
{% endset %}
<div class="table-component table-component--{{ background }} table-component--{{ siteUnit }} table-component--{{ componentSpacing }}">
{% if component.title|default and (component.title|trim) %}
<h2 class="table-component__title table-component__title--{{ background }} {{ component.hide_title ? 'table-component__title--visually-hidden' }}"
id="{{ component.title|sanitize }}">
{{ component.title }}
</h2>
{% endif %}
<p id="table-caption-{{ loop.index }}" class="table-component__caption table-component__caption--{{ background }} {{ component.hide_caption ? 'table-component__title--visually-hidden' }}">
{{ component.caption }}
</p>
<div class="table-component__container">
<table class="table-component__table" aria-describedby="table-caption-{{ loop.index }}">
{{ table_content }}
</table>
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"componentSpacing": "large",
"component": {
"type": "table",
"index": 0,
"title": "Table Example",
"hide_title": false,
"hide_caption": false,
"caption": "Fusce faucibus est felis, nec fermentum enim laoreet eleifend. Aliquam eget facilisis dolor. Curabitur efficitur odio non iaculis aliquet.",
"include_row_headers": false,
"table": {
"p": {
"o": {
"uh": 1
}
},
"header": [
{
"c": "Green"
},
{
"c": "Purple"
},
{
"c": "Orange"
}
],
"body": [
[
{
"c": "Blue"
},
{
"c": "Red"
},
{
"c": "Yellow"
}
],
[
{
"c": "Yellow"
},
{
"c": "Blue"
},
{
"c": "Red"
}
]
]
}
}
}
tableMinWidth = 620px
tableBreakpoint = 688px
.table-component
--borderColor illiniOrange
&--arch
--borderColor industrialBlue
&--art
--borderColor archesBlue
&--college
--borderColor illiniOrange
&--dance
--borderColor archesBlue
&--durp
--borderColor illiniOrange
&--landarch
--borderColor illiniOrange
&--theatre
--borderColor illiniOrange
&--music
--borderColor illiniOrange
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
&__container
overflow-x auto
+below(tableBreakpoint)
width 100vw
position relative
left 50%
right 50%
margin-left -50vw
margin-right -50vw
&__table
width 100%
border-collapse collapse
border-spacing 0
table-layout fixed
+above(tableBreakpoint)
min-width tableMinWidth
+below(tableBreakpoint)
min-width tableMinWidth
margin-left contentPaddingLarge
+below(500px)
min-width tableMinWidth
margin-left contentPaddingSmall
&__title
@extends $headline1
margin-bottom 24px
&--visually-hidden
@extends $visually-hidden
&__row-header
&__column-header
@extends $tertiaryLead
&__row-header
border-top 2px solid var(--borderColor)
padding-right 16px
&__caption
&__column-header
&__row-header
&__table-data
text-align left
&__row-header
&__column-header
font-weight 700
&--dark
color white
&__table-head
border-bottom 2px solid var(--borderColor)
&__table-row
&:not(:last-child)
border-bottom 2px solid grey
&__caption
&__table-data
@extends $primaryParagraph
&__caption
&__table-data
&--dark
color grey
&__column-header
&__table-data
padding-top 16px
padding-bottom 16px
padding-right 16px
&__caption
margin-bottom 30px
&--visually-hidden
@extends $visually-hidden
There are no notes for this item.