The List Row component helps group overview information. The information presented should be scannable and actionable.
bulleted and numbered can be found in the Typography section.
<tk-list class="demo">
<tk-list-columns class="mb-3x" sort-enabled>
<tk-list-column>1</tk-list-column>
<tk-list-column>2</tk-list-column>
<tk-list-column>3</tk-list-column>
<tk-list-column>4</tk-list-column>
<tk-list-column>5</tk-list-column>
<tk-list-column>6</tk-list-column>
<tk-list-column>7</tk-list-column>
<tk-list-column>8</tk-list-column>
<tk-list-column>9</tk-list-column>
<tk-list-column>10</tk-list-column>
<tk-list-column>11</tk-list-column>
</tk-list-columns>
<tk-list-row>
<tk-row-selector slot="row-selector" size="medium"></tk-row-selector>
<tk-icon class="demo-pre" slot="row-icon" name="idea" size="large" muted></tk-icon>
<div class="demo-body" slot="row-body">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<tk-dropdown class="demo-actions" slot="row-actions" trigger-type="action">
<tk-dropdown-item>
<button class="dropdown__link" type="button">Add Elixir</button>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" type="button">Add Potion</button>
</tk-dropdown-item>
</tk-dropdown>
</tk-list-row>
</tk-list>
<tk-list class="demo">
<tk-list-columns class="mb-3x" sort-enabled>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Actions</tk-list-column>
</tk-list-columns>
<tk-list-row>
<div class="demo-body" slot="row-body">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<tk-dropdown class="demo-actions" slot="row-actions" trigger-type="action">
<tk-dropdown-item>
<button class="dropdown__link" type="button">Add Elixir</button>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" type="button">Add Potion</button>
</tk-dropdown-item>
</tk-dropdown>
</tk-list-row>
</tk-list>
<tk-list class="demo">
<tk-list-columns class="mb-3x">
<tk-list-column></tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Body</tk-list-column>
</tk-list-columns>
<tk-list-row>
<tk-row-selector slot="row-selector" size="medium"></tk-row-selector>
<div class="demo-body" slot="row-body">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</tk-list-row>
</tk-list>The List Row component has four areas for content: row-selector, row-icon, row-body, and row-actions.
The row-selector will always appear as the first element in the row. It should be used for bulk actions.
The row-icon will always appear as the second element in the row.
The row-body holds the main content of the List Row.
The row-actions will always appear last in the row. Most likely, you’ll want to use our tk-dropdown here.
Column headers are useful for giving the user context about the List Row content. If using tk-list-columns, the next element sibling must be tk-list-row, and its descendants must be the slotted areas. Any wrappers between these elements will mess up the grid alignment of the headers.
<tk-list class="demo">
<tk-list-columns class="mb-3x">
<tk-list-column span="2" start="2">span 2, start 2</tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column span="3">span 3</tk-list-column>
<tk-list-column>Body</tk-list-column>
<tk-list-column>Actions</tk-list-column>
</tk-list-columns>
<tk-list-row>
<tk-icon class="demo-pre" slot="row-icon" name="idea" size="large" muted></tk-icon>
<div class="demo-body" slot="row-body">
<div span="2">span="2"</div>
<div>3</div>
<div>4</div>
<div span="3">span="3"</div>
<div>8</div>
</div>
<tk-dropdown class="demo-actions" slot="row-actions" trigger-type="action">
<tk-dropdown-item>
<button class="dropdown__link" type="button">Button</button>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" type="button">Button #2</button>
</tk-dropdown-item>
</tk-dropdown>
</tk-list-row>
</tk-list>
<tk-list class="demo">
<tk-list-columns class="mb-3x">
<tk-list-column span="2" start="4">span 2, start 4</tk-list-column>
<tk-list-column span="2">span 2</tk-list-column>
<tk-list-column start="9">start 9</tk-list-column>
</tk-list-columns>
<tk-list-row>
<tk-icon class="demo-pre" slot="row-icon" name="idea" size="large" muted></tk-icon>
<div class="demo-body" slot="row-body">
<div start="3" span="2">start="3" span="2"</div>
<div span="2">span="2"</div>
<div>7</div>
<div>8</div>
</div>
</tk-list-row>
</tk-list>
<tk-list class="demo">
<tk-list-columns class="mb-3x">
<tk-list-column span="4">span 4</tk-list-column>
<tk-list-column span="3">span 3</tk-list-column>
<tk-list-column>8</tk-list-column>
<tk-list-column>Actions</tk-list-column>
</tk-list-columns>
<tk-list-row>
<div class="demo-body" slot="row-body">
<div span="4">span="4"</div>
<div span="3">span="3"</div>
<div>8</div>
</div>
<tk-dropdown class="demo-actions" slot="row-actions" trigger-type="action">
<tk-dropdown-item>
<button class="dropdown__link" type="button">Add Elixir</button>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" type="button">Add Potion</button>
</tk-dropdown-item>
</tk-dropdown>
</tk-list-row>
</tk-list>The row-body can be split into 8 columns. The default for each element is to span 1 column. To control how many columns an element spans, use span="x". To offset an element, add start="x".
Column headers can also accept span and start. Start is dependent on how many items are in the row: 8 for row-body, 1 for row-selector, 1 for row-icon, and 1 for row-actions. This means there’s a max of 11.
<tk-list class="demo">
<tk-list-columns class="mb-3x" id="custom-columns">
<tk-list-column>icon</tk-list-column>
<tk-list-column>1</tk-list-column>
<tk-list-column>1</tk-list-column>
<tk-list-column>3</tk-list-column>
<tk-list-column span="3">1 span 3</tk-list-column>
<tk-list-column>4</tk-list-column>
<tk-list-column>actions</tk-list-column>
</tk-list-columns>
<tk-list-row id="custom-columns-row">
<tk-icon class="demo-pre" slot="row-icon" name="idea" size="large" muted></tk-icon>
<div class="demo-body" slot="row-body">
<div>1</div>
<div>1</div>
<div>3</div>
<div span="3">1 span 3</div>
<div>4</div>
</div>
<tk-dropdown class="demo-actions" slot="row-actions" trigger-type="action">
<tk-dropdown-item>
<button class="dropdown__link" type="button">Button</button>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" type="button">Button #2</button>
</tk-dropdown-item>
</tk-dropdown>
</tk-list-row>
</tk-list>
<!-- only required for use outside of a framework -->
<script>
const columnWidths = [1, 1, 3, 1, 1, 1, 4];
document.getElementById('custom-columns').columnWidths = columnWidths;
document.getElementById('custom-columns-row').columnWidths = columnWidths;
</script>The row-body can have a custom number of columns with custom width. The default is 8 columns. To control how many columns and their sizes, use the column-widths prop.
Column headers can also accept column-widths. The default is also 8 columns.
Click a column title to see the output.
<tk-list>
<tk-list-columns id="sortExample" sort-enabled>
<tk-list-column span="3">First</tk-list-column>
<tk-list-column span="3">Second</tk-list-column>
<tk-list-column>Third</tk-list-column>
</tk-list-columns>
<tk-list-row class="mt-2x">
<div slot="row-body">
<div span="3">The first column.</div>
<div span="3">The second column.</div>
<div span="2">The third column.</div>
</div>
</tk-list-row>
</tk-list>
<p id="sortExampleText">Click a column title to see the output.</p>
<script>
const exampleText = document.getElementById('sortExampleText');
const columns = Array.from(document.getElementById('sortExample').children);
columns.forEach((column, i) => {
column.addEventListener('sortSelected', ev => {
exampleText.innerText = `Column ${i + 1}, Sort: ${ev.detail.sort}`;
});
})
</script>When sort is enabled (sort-enabled), the column headers are buttons that emit an event (sortSelected) when clicked.
The event emits the direction (event.detail.sort) that provides if it’s ASC or DESC.
To set a column as the initial sort, set the attribute sort="asc" or sort="desc" on tk-list-column. If an initial sort is not provided, the component will default to the first tk-list-column being sort="asc".
<tk-list-column (sortEnabled)="myMethod($event)">Column 2</tk-list-column>
N.E.W.T. requirement
Most wizards found this course to be difficult.
May 28, 1993
N.E.W.T. requirement
Most wizards found this course to be enjoyable.
May 27, 1993
<tk-list flush>
<tk-list-columns class="mb-3x" light>
<tk-list-column>Type</tk-list-column>
<tk-list-column span="3">Subject</tk-list-column>
<tk-list-column start="6" span="3">Review</tk-list-column>
<tk-list-column>Start Date</tk-list-column>
</tk-list-columns>
<tk-list-row>
<tk-icon slot="row-icon" name="idea" size="large" muted></tk-icon>
<div slot="row-body">
<div span="3">
<h2><a class="row-title" href="#">COURSE 3500: Study of Ancient Runes</a></h2>
<p class="t-small">N.E.W.T. requirement</p>
</div>
<p start="5" span="3">Most wizards found this course to be <strong>difficult</strong>.</p>
<p>May 28, 1993</p>
</div>
</tk-list-row>
<tk-list-row>
<tk-icon slot="row-icon" name="idea" size="large" muted></tk-icon>
<div slot="row-body">
<div span="3">
<h2><a class="row-title" href="#">COURSE 3300: Care of Magical Creatures</a></h2>
<p class="t-small">N.E.W.T. requirement</p>
</div>
<p start="5" span="3">Most wizards found this course to be <strong>enjoyable</strong>.</p>
<p>May 27, 1993</p>
</div>
</tk-list-row>
</tk-list>To remove the margin between the List Rows, add flush to tk-list. To use inverse the colors of the column headers, add light to tk-list-columns.
<tk-list>
<tk-list-columns class="mb-3x">
<tk-list-column>Type</tk-list-column>
<tk-list-column span="5" start="3">Subject</tk-list-column>
<tk-list-column>Status</tk-list-column>
<tk-list-column>Instructor</tk-list-column>
<tk-list-column>Start Date</tk-list-column>
</tk-list-columns>
<tk-list-row>
<tk-row-selector slot="row-selector" size="medium"></tk-row-selector>
<tk-icon class="sm-hide" slot="row-icon" name="usability" muted size="large"></tk-icon>
<div slot="row-body">
<div span="5">
<h2><a class="row-title" href="#">COURSE 3300: Care of Magical Creatures</a></h2>
<p class="row-subtitle">N.E.W.T. requirement</p>
</div>
<tk-indicator type="approved">Enrolled</tk-indicator>
<p>Prof. Hagrid</p>
<p>May 27, 1993</p>
</div>
<tk-dropdown slot="row-actions" trigger-type="action">
<tk-dropdown-item>
<button class="dropdown__link" type="button">Drop Course</button>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" type="button">Email Professor</button>
</tk-dropdown-item>
</tk-dropdown>
</tk-list-row>
</tk-list>The List Row component listens for the select event to fire. It then updates with the appropriate styles and aria attributes.
Enrollment approval is at the Professor's discretion and will be allotted to students considered to be in good standing.
Learn how to properly care for the wizarding world's most enchanting creatures with a world-renowned expert. In this course you'll gain experience with flobberworms, dragons, hippogriffs, nifflers…and so many more.
<tk-list flush>
<tk-list-header>
<h2 slot="title">Available Subjects</h2>
<p slot="subtitle">Enrollment approval is at the Professor's discretion and will be allotted to students considered to be in good standing.</p>
<button class="btn t-link ml-auto" type="button">Contact</button>
</tk-list-header>
<tk-list-row>
<tk-stamp slot="row-icon" icon="info--filled"></tk-stamp>
<div slot="row-body">
<div span="8">
<h2>Care of Magical Creatures</h2>
<p>Learn how to properly care for the wizarding world's most enchanting creatures with a world-renowned expert. In this course you'll gain experience with flobberworms, dragons, hippogriffs, nifflers…and so many more.</p>
</div>
</div>
</tk-list-row>
</tk-list>The List Row component listens for the select event to fire. It then updates with the appropriate styles and aria attributes.
<tk-list>
<tk-list-row status="error">
<tk-row-selector slot="row-selector" size="medium"></tk-row-selector>
<tk-icon class="sm-hide" slot="row-icon" name="usability" muted size="large"></tk-icon>
<div slot="row-body">
<div span="5">
<h2><a class="row-title" href="#">COURSE 3300: Care of Magical Creatures</a></h2>
<p class="row-subtitle">N.E.W.T. requirement</p>
</div>
<tk-indicator type="approved">Enrolled</tk-indicator>
<p>Prof. Hagrid</p>
<p>May 27, 1993</p>
</div>
<tk-dropdown slot="row-actions" trigger-type="action">
<tk-dropdown-item>
<button class="dropdown__link" type="button">Drop Course</button>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" type="button">Email Professor</button>
</tk-dropdown-item>
</tk-dropdown>
</tk-list-row>
<tk-list-row status="success">
<tk-row-selector slot="row-selector" size="medium"></tk-row-selector>
<tk-icon class="sm-hide" slot="row-icon" name="usability" muted size="large"></tk-icon>
<div slot="row-body">
<div span="5">
<h2><a class="row-title" href="#">COURSE 3300: Care of Magical Creatures</a></h2>
<p class="row-subtitle">N.E.W.T. requirement</p>
</div>
<tk-indicator type="approved">Enrolled</tk-indicator>
<p>Prof. Hagrid</p>
<p>May 27, 1993</p>
</div>
<tk-dropdown slot="row-actions" trigger-type="action">
<tk-dropdown-item>
<button class="dropdown__link" type="button">Drop Course</button>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" type="button">Email Professor</button>
</tk-dropdown-item>
</tk-dropdown>
</tk-list-row>
<tk-list-row status="pending">
<tk-row-selector slot="row-selector" size="medium"></tk-row-selector>
<tk-icon class="sm-hide" slot="row-icon" name="usability" muted size="large"></tk-icon>
<div slot="row-body">
<div span="5">
<h2><a class="row-title" href="#">COURSE 3300: Care of Magical Creatures</a></h2>
<p class="row-subtitle">N.E.W.T. requirement</p>
</div>
<tk-indicator type="approved">Enrolled</tk-indicator>
<p>Prof. Hagrid</p>
<p>May 27, 1993</p>
</div>
<tk-dropdown slot="row-actions" trigger-type="action">
<tk-dropdown-item>
<button class="dropdown__link" type="button">Drop Course</button>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" type="button">Email Professor</button>
</tk-dropdown-item>
</tk-dropdown>
</tk-list-row>
</tk-list>This pattern can be found on the main dashboard. To output rows that have a status, add status to tk-list-row.
| Property | Type | Default | Description |
|---|---|---|---|
flush |
boolean |
false |
Removes margin and adds border between tk-list-row elements. |
| Property | Type | Default | Description |
|---|---|---|---|
status |
string |
success pending error |
Adds a status border to the List Row. |
compact |
boolean |
false |
Decreases the padding of the List Row. |
isSelected |
boolean |
true |
Selection state of the List Row. |
column-widths |
number[] |
[1, 1, 1, 1, 1, 1, 1, 1] |
Set the column width ratios for the row cells. |
| Property | Type | Default | Description |
|---|---|---|---|
compact |
boolean |
false |
Decreases the padding of the List Header. |
| Property | Type | Default | Description |
|---|---|---|---|
light |
boolean |
false |
Sets the List Column text to light. |
sort-enabled |
boolean |
false |
Sets whether sort should apply to the columns. Our UX states that it should be applied to all columns for a consistent experience. |
show-columns |
boolean |
true |
Hides the columns. Once enabled, it recalculates the column width based on tk-list-row. Useful if tk-list-row takes longer than expected to load. |
column-widths |
number[] |
[1, 1, 1, 1, 1, 1, 1, 1] |
Set the column width ratios for the column headers. |
| Property | Type | Default | Description |
|---|---|---|---|
sort |
`ASC | DESC` | - |
| Name | Description |
|---|---|
sortSelected |
Emits the direction (event.detail.sort) and provides if it’s ASC or DESC. |
light columns on a light background