Skip to content

Commit

Permalink
Add example of table with long text
Browse files Browse the repository at this point in the history
  • Loading branch information
frankieroberto committed Oct 25, 2024
1 parent 8e0369d commit f6b201e
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 1 deletion.
70 changes: 70 additions & 0 deletions app/components/tables/table-with-more-columns.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
{% set html_style = 'background-color: #f0f4f5;' %}
{% set title = 'Tables' %}
{% from 'components/tables/macro.njk' import table %}
{% extends 'layout.njk' %}

{% block body %}

<div class="nhsuk-width-container">
<main class="nhsuk-main-wrapper" id="maincontent">

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
{{ table({
panel: false,
caption: "Users",
firstCellIsHeader: false,
head: [
{
text: "Name"
},
{
text: "Email address"
},
{
text: "Status"
},
{
html: "<span class=\"nhsuk-u-visually-hidden\">Actions</span>"
}
],
rows: [
[
{
text: "Stephanie Meyer"
},
{
text: "[email protected]",
classes: "nhsuk-table__cell--break-word"
},
{
text: "Active"
},
{
html: "<a href=\"#\">Change <span class=\"nhsuk-u-visually-hidden\">status for Stephanie Meyer</span></a>"
}
],
[
{
text: "Aleksandrina Featherstonehaugh-Whitehead"
},
{
text: "aleksandrina.featherstonehaughwhitehead23@folkestonepharmacy.test.com",
classes: "nhsuk-table__cell--break-word"
},
{
text: "Inactive"
},
{
html: "<a href=\"#\">Change <span class=\"nhsuk-u-visually-hidden\">status for Aleksandrina Featherstonehaugh-Whitehead</span></a>"
}
]
]
}) }}
</div>
</div>

</main>
</div>

{% endblock %}
3 changes: 2 additions & 1 deletion app/pages/examples.njk
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@
<li><a href="../components/summary-list/without-border.html">Summary list without border</a></li>
<li><a href="../components/tables/index.html">Table</a></li>
<li><a href="../components/tables/responsive-table.html">Responsive table</a></li>
<li><a href="../components/tables/table-with-more-columns.html">Non-responsive table with more columns</a></li>
<li><a href="../components/tables/tables-panel.html">Table as a panel</a></li>
<li><a href="../components/tabs/index.html">Tabs</a> <strong class="nhsuk-tag nhsuk-tag--yellow">Experimental</strong></li>
<li><a href="../components/tag/index.html">Tag</a></li>
Expand All @@ -131,7 +132,7 @@
<li><a href="../components/warning-callout/index.html">Warning callout</a></li>
<li><a href="../components/warning-callout/custom-heading.html">Warning callout with custom heading</a></li>
</ul>

{% endblock %}

{% block footer %}
Expand Down

0 comments on commit f6b201e

Please sign in to comment.