Data table
Data table
| Name | Protocol | Port | Rule | Attached Groups | Status |
|---|---|---|---|---|---|
| Load Balancer 1 | HTTP | 80 | Round Robin | Maureen’s VM Groups Testing a really long text here | Active |
| Load Balancer 5 | HTTP | 80 | Round Robin | Maureen’s VM Groups | Active |
| Load Balancer 5 | HTTP | 80 | Round Robin | Maureen’s VM Groups | Active |
| Load Balancer 5 | HTTP | 80 | Round Robin | Maureen’s VM Groups | Active |
| Load Balancer 5 | HTTP | 80 | Round Robin | Maureen’s VM Groups | Active |
Code:
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<!-- v10 Data Table -->
<!-- End Toolbar Content -->
<!-- Table -->
<table class="bx--data-table " >
<thead>
<tr>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<span class="bx--table-header-label">Name</span>
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<span class="bx--table-header-label">Protocol</span>
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<span class="bx--table-header-label">Port</span>
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<span class="bx--table-header-label">Rule</span>
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<span class="bx--table-header-label">Attached Groups</span>
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<span class="bx--table-header-label">Status</span>
</th>
</tr>
</thead>
<tbody>
<tr >
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Load Balancer 1
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
HTTP
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
80
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Round Robin
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Maureen’s VM Groups Testing a really long text here
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Active
</td>
</tr>
<!-- Expandable child row -->
<tr >
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Load Balancer 5
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
HTTP
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
80
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Round Robin
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Maureen’s VM Groups
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Active
</td>
</tr>
<!-- Expandable child row -->
<tr >
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Load Balancer 5
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
HTTP
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
80
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Round Robin
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Maureen’s VM Groups
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Active
</td>
</tr>
<!-- Expandable child row -->
<tr >
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Load Balancer 5
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
HTTP
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
80
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Round Robin
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Maureen’s VM Groups
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Active
</td>
</tr>
<!-- Expandable child row -->
<tr >
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Load Balancer 5
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
HTTP
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
80
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Round Robin
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Maureen’s VM Groups
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Active
</td>
</tr>
<!-- Expandable child row -->
</tbody>
</table>
<!-- Pagination -->
</div>
Expandable data table
Table title
| Load Balancer 1 | HTTP | 80 | Round Robin | Maureen’s VM Groups | Active | ||
|
A variety of content types can live here. Be sure to follow Carbon design guidelines for spacing and alignment. |
|||||||
| Load Balancer 1 | HTTP | 80 | Round Robin | Maureen’s VM Groups | Active | ||
|
A variety of content types can live here. Be sure to follow Carbon design guidelines for spacing and alignment. |
|||||||
Code:
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<!-- v10 Data Table -->
<div class="bx--data-table-container " data-table>
<div class="bx--data-table-header">
<h4 class="bx--data-table-header__title">Table title</h4>
<p class="bx--data-table-header__description"></p>
</div>
<!-- Toolbar Content -->
<section class="bx--table-toolbar ">
<!-- Batch actions -->
<div class="bx--batch-actions" aria-label="Table Action Bar">
<div class="bx--action-list">
<button class="bx--btn bx--btn--primary" type="button">
Delete
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6H7V12H6zM9 6H10V12H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zM4 14V4h8v10H4zM6 1H10V2H6z"></path></svg>
</button>
<button class="bx--btn bx--btn--primary" type="button">
Save
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9,4.6l-2.5-2.5C11.3,2.1,11.1,2,11,2H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V5 C14,4.9,13.9,4.7,13.9,4.6z M6,3h4v2H6V3z M10,13H6V9h4V13z M11,13V9c0-0.6-0.4-1-1-1H6C5.4,8,5,8.4,5,9v4H3V3h2v2c0,0.6,0.4,1,1,1 h4c0.6,0,1-0.4,1-1V3.2l2,2V13H11z"></path></svg>
</button>
<button class="bx--btn bx--btn--primary" type="button">
Download
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"></path></svg>
</button>
<button data-event="action-bar-cancel" class="bx--btn bx--btn--primary bx--batch-summary__cancel">Cancel</button>
</div>
<div class="bx--batch-summary">
<p class="bx--batch-summary__para">
<span data-items-selected>3</span> items selected
</p>
</div>
</div>
<div class="bx--toolbar-content">
<!-- Default hidden search -->
<!-- Persistent Search -->
<div class="bx--toolbar-search-container-persistent">
<div data-search class="bx--search bx--search--sm" role="search">
<div class="bx--search-magnifier">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5 C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"></path></svg>
</div>
<label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
<input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
<button class="bx--search-close bx--search-close--hidden" title="Clear search input" aria-label="Clear search input">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7L11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3 4.7 12 8 8.7 11.3 12 12 11.3 8.7 8z"></path></svg>
</button>
</div>
</div>
<!-- Toolbar Overflow Menu -->
<div class="bx--overflow-menu bx--toolbar-action" data-overflow-menu role="button" tabindex="0" aria-label="Overflow" aria-haspopup="true"
aria-expanded="false" >
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toolbar-action__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3 c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1 C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4 c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4 c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4 c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8 L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6 C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"></path><path d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8 c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"></path></svg>
<ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1" role="menu" aria-label="Overflow" data-floating-menu-direction="bottom">
<li class="bx--overflow-menu-options__option bx--overflow-menu--data-table " role="presentation">
<button class="bx--overflow-menu-options__btn" role="menuitem" data-floating-menu-primary-focus >
<div class="bx--overflow-menu-options__option-content">
Option 1
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--overflow-menu--data-table " role="presentation">
<button class="bx--overflow-menu-options__btn" role="menuitem" >
<div class="bx--overflow-menu-options__option-content">
Option 2
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--overflow-menu--data-table " role="presentation">
<button class="bx--overflow-menu-options__btn" role="menuitem" >
<div class="bx--overflow-menu-options__option-content">
Option 3
</div>
</button>
</li>
</ul>
</div>
<!-- Toolbar primary button -->
<button class="bx--btn bx--btn--sm bx--btn--primary">
Primary Button
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M17 15L17 7 15 7 15 15 7 15 7 17 15 17 15 25 17 25 17 17 25 17 25 15 17 15z"></path></svg>
</button>
</div>
</section>
<!-- End Toolbar Content -->
<!-- Table -->
<table class="bx--data-table bx--data-table--sort " >
<thead>
<tr>
<th class="bx--table-expand" data-event="expandAll">
<!-- checkbox th -->
<!-- sortable th -->
<span class="bx--table-header-label"></span>
</th>
<th class="bx--table-column-checkbox">
<!-- checkbox th -->
<input data-event="select-all" id="bx--checkbox-20" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
<label for="bx--checkbox-20" class="bx--checkbox-label" aria-label="Label name"></label>
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<button class="bx--table-sort" data-event="sort" title="Name">
<span class="bx--table-header-label">Name</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
</button>
<!-- no sort th -->
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<button class="bx--table-sort" data-event="sort" title="Protocol">
<span class="bx--table-header-label">Protocol</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
</button>
<!-- no sort th -->
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<button class="bx--table-sort" data-event="sort" title="Ports">
<span class="bx--table-header-label">Ports</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
</button>
<!-- no sort th -->
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<button class="bx--table-sort" data-event="sort" title="Rule">
<span class="bx--table-header-label">Rule</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
</button>
<!-- no sort th -->
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<button class="bx--table-sort" data-event="sort" title="Attached Groups">
<span class="bx--table-header-label">Attached Groups</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
</button>
<!-- no sort th -->
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<button class="bx--table-sort" data-event="sort" title="Status">
<span class="bx--table-header-label">Status</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
</button>
<!-- no sort th -->
</th>
</tr>
</thead>
<tbody>
<tr class="bx--parent-row" data-parent-row >
<!-- expand icon td -->
<td class="bx--table-expand" data-event="expand">
<button class="bx--table-expand__button">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-expand__svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path></svg>
</button>
</td>
<!-- checkbox td -->
<!-- expand icon td -->
<td class="bx--table-column-checkbox">
<input data-event="select" id="bx--checkbox-13" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13" >
<label for="bx--checkbox-13" class="bx--checkbox-label" aria-label="Label name"></label>
</td>
<!-- inline action td's -->
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Load Balancer 1
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
HTTP
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
80
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Round Robin
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Maureen’s VM Groups
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Active
</td>
</tr>
<!-- Expandable child row -->
<tr class="bx--expandable-row bx--expandable-row--hidden" data-child-row>
<td colspan="8">
<div class="bx--child-row-inner-container">
<p>A variety of content types can live here. Be sure to follow Carbon design guidelines for spacing and alignment.</p>
</div>
</td>
</tr>
<tr class="bx--parent-row" data-parent-row >
<!-- expand icon td -->
<td class="bx--table-expand" data-event="expand">
<button class="bx--table-expand__button">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-expand__svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path></svg>
</button>
</td>
<!-- checkbox td -->
<!-- expand icon td -->
<td class="bx--table-column-checkbox">
<input data-event="select" id="bx--checkbox-12" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12" >
<label for="bx--checkbox-12" class="bx--checkbox-label" aria-label="Label name"></label>
</td>
<!-- inline action td's -->
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Load Balancer 1
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
HTTP
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
80
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Round Robin
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Maureen’s VM Groups
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Active
</td>
</tr>
<!-- Expandable child row -->
<tr class="bx--expandable-row bx--expandable-row--hidden" data-child-row>
<td colspan="8">
<div class="bx--child-row-inner-container">
<p>A variety of content types can live here. Be sure to follow Carbon design guidelines for spacing and alignment.</p>
</div>
</td>
</tr>
</tbody>
</table>
<!-- Pagination -->
</div>
Data table with pagination
Table title
| Load Balancer 1 | HTTP | 80 | Round Robin | Maureen’s VM Groups Testing a really long text here | Active | ||
| Load Balancer 5 | HTTP | 80 | Round Robin | Maureen’s VM Groups | Active | ||
| Load Balancer 5 | HTTP | 80 | Round Robin | Maureen’s VM Groups | Active | ||
| Load Balancer 5 | HTTP | 80 | Round Robin | Maureen’s VM Groups | Active | ||
| Load Balancer 5 | HTTP | 80 | Round Robin | Maureen’s VM Groups | Active |
Code:
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<!-- v10 Data Table -->
<div class="bx--data-table-container " data-table>
<div class="bx--data-table-header">
<h4 class="bx--data-table-header__title">Table title</h4>
<p class="bx--data-table-header__description"></p>
</div>
<!-- Toolbar Content -->
<section class="bx--table-toolbar ">
<!-- Batch actions -->
<div class="bx--batch-actions" aria-label="Table Action Bar">
<div class="bx--action-list">
<button class="bx--btn bx--btn--primary" type="button">
Delete
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6H7V12H6zM9 6H10V12H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zM4 14V4h8v10H4zM6 1H10V2H6z"></path></svg>
</button>
<button class="bx--btn bx--btn--primary" type="button">
Save
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9,4.6l-2.5-2.5C11.3,2.1,11.1,2,11,2H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V5 C14,4.9,13.9,4.7,13.9,4.6z M6,3h4v2H6V3z M10,13H6V9h4V13z M11,13V9c0-0.6-0.4-1-1-1H6C5.4,8,5,8.4,5,9v4H3V3h2v2c0,0.6,0.4,1,1,1 h4c0.6,0,1-0.4,1-1V3.2l2,2V13H11z"></path></svg>
</button>
<button class="bx--btn bx--btn--primary" type="button">
Download
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"></path></svg>
</button>
<button data-event="action-bar-cancel" class="bx--btn bx--btn--primary bx--batch-summary__cancel">Cancel</button>
</div>
<div class="bx--batch-summary">
<p class="bx--batch-summary__para">
<span data-items-selected>3</span> items selected
</p>
</div>
</div>
<div class="bx--toolbar-content">
<!-- Default hidden search -->
<!-- Persistent Search -->
<div class="bx--toolbar-search-container-persistent">
<div data-search class="bx--search bx--search--sm" role="search">
<div class="bx--search-magnifier">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5 C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"></path></svg>
</div>
<label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
<input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
<button class="bx--search-close bx--search-close--hidden" title="Clear search input" aria-label="Clear search input">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7L11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3 4.7 12 8 8.7 11.3 12 12 11.3 8.7 8z"></path></svg>
</button>
</div>
</div>
<!-- Toolbar Overflow Menu -->
<div class="bx--overflow-menu bx--toolbar-action" data-overflow-menu role="button" tabindex="0" aria-label="Overflow" aria-haspopup="true"
aria-expanded="false" >
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toolbar-action__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3 c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1 C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4 c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4 c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4 c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8 L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6 C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"></path><path d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8 c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"></path></svg>
<ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1" role="menu" aria-label="Overflow" data-floating-menu-direction="bottom">
<li class="bx--overflow-menu-options__option bx--overflow-menu--data-table " role="presentation">
<button class="bx--overflow-menu-options__btn" role="menuitem" data-floating-menu-primary-focus >
<div class="bx--overflow-menu-options__option-content">
Option 1
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--overflow-menu--data-table " role="presentation">
<button class="bx--overflow-menu-options__btn" role="menuitem" >
<div class="bx--overflow-menu-options__option-content">
Option 2
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--overflow-menu--data-table " role="presentation">
<button class="bx--overflow-menu-options__btn" role="menuitem" >
<div class="bx--overflow-menu-options__option-content">
Option 3
</div>
</button>
</li>
</ul>
</div>
<!-- Toolbar primary button -->
<button class="bx--btn bx--btn--sm bx--btn--primary">
Primary Button
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M17 15L17 7 15 7 15 15 7 15 7 17 15 17 15 25 17 25 17 17 25 17 25 15 17 15z"></path></svg>
</button>
</div>
</section>
<!-- End Toolbar Content -->
<!-- Table -->
<table class="bx--data-table bx--data-table--sort " >
<thead>
<tr>
<th class="bx--table-column-checkbox">
<!-- checkbox th -->
<input data-event="select-all" id="bx--checkbox-20" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
<label for="bx--checkbox-20" class="bx--checkbox-label" aria-label="Label name"></label>
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<button class="bx--table-sort" data-event="sort" title="Name">
<span class="bx--table-header-label">Name</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
</button>
<!-- no sort th -->
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<button class="bx--table-sort" data-event="sort" title="Protocol">
<span class="bx--table-header-label">Protocol</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
</button>
<!-- no sort th -->
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<button class="bx--table-sort" data-event="sort" title="Port">
<span class="bx--table-header-label">Port</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
</button>
<!-- no sort th -->
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<button class="bx--table-sort" data-event="sort" title="Rule">
<span class="bx--table-header-label">Rule</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
</button>
<!-- no sort th -->
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<button class="bx--table-sort" data-event="sort" title="Attached Groups">
<span class="bx--table-header-label">Attached Groups</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
</button>
<!-- no sort th -->
</th>
<th >
<!-- checkbox th -->
<!-- sortable th -->
<button class="bx--table-sort" data-event="sort" title="Status">
<span class="bx--table-header-label">Status</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
</button>
<!-- no sort th -->
</th>
<th class="bx--table-column-menu">
<!-- checkbox th -->
</th>
</tr>
</thead>
<tbody>
<tr >
<!-- expand icon td -->
<td class="bx--table-column-checkbox">
<input data-event="select" id="bx--checkbox-13" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13" >
<label for="bx--checkbox-13" class="bx--checkbox-label" aria-label="Label name"></label>
</td>
<!-- inline action td's -->
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Load Balancer 1
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
HTTP
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
80
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Round Robin
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Maureen’s VM Groups Testing a really long text here
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Active
</td>
<!-- expand icon td -->
<td class="bx--table-column-menu">
<div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
<ul class="bx--overflow-menu-options bx--overflow-menu--flip">
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13H15V14H1zM12.7 4.5c.4-.4.4-1 0-1.4 0 0 0 0 0 0l-1.8-1.8c-.4-.4-1-.4-1.4 0 0 0 0 0 0 0L2 8.8V12h3.2L12.7 4.5zM10.2 2L12 3.8l-1.5 1.5L8.7 3.5 10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"></path></svg> Download
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9,4.6l-2.5-2.5C11.3,2.1,11.1,2,11,2H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V5 C14,4.9,13.9,4.7,13.9,4.6z M6,3h4v2H6V3z M10,13H6V9h4V13z M11,13V9c0-0.6-0.4-1-1-1H6C5.4,8,5,8.4,5,9v4H3V3h2v2c0,0.6,0.4,1,1,1 h4c0.6,0,1-0.4,1-1V3.2l2,2V13H11z"></path></svg> Save
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6H7V12H6zM9 6H10V12H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zM4 14V4h8v10H4zM6 1H10V2H6z"></path></svg> Delete
</div>
</button>
</li>
</ul>
</div>
</td>
<!-- inline edit tds -->
</tr>
<!-- Expandable child row -->
<tr >
<!-- expand icon td -->
<td class="bx--table-column-checkbox">
<input data-event="select" id="bx--checkbox-14" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14" >
<label for="bx--checkbox-14" class="bx--checkbox-label" aria-label="Label name"></label>
</td>
<!-- inline action td's -->
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Load Balancer 5
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
HTTP
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
80
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Round Robin
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Maureen’s VM Groups
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Active
</td>
<!-- expand icon td -->
<td class="bx--table-column-menu">
<div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
<ul class="bx--overflow-menu-options bx--overflow-menu--flip">
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13H15V14H1zM12.7 4.5c.4-.4.4-1 0-1.4 0 0 0 0 0 0l-1.8-1.8c-.4-.4-1-.4-1.4 0 0 0 0 0 0 0L2 8.8V12h3.2L12.7 4.5zM10.2 2L12 3.8l-1.5 1.5L8.7 3.5 10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"></path></svg> Download
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9,4.6l-2.5-2.5C11.3,2.1,11.1,2,11,2H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V5 C14,4.9,13.9,4.7,13.9,4.6z M6,3h4v2H6V3z M10,13H6V9h4V13z M11,13V9c0-0.6-0.4-1-1-1H6C5.4,8,5,8.4,5,9v4H3V3h2v2c0,0.6,0.4,1,1,1 h4c0.6,0,1-0.4,1-1V3.2l2,2V13H11z"></path></svg> Save
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6H7V12H6zM9 6H10V12H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zM4 14V4h8v10H4zM6 1H10V2H6z"></path></svg> Delete
</div>
</button>
</li>
</ul>
</div>
</td>
<!-- inline edit tds -->
</tr>
<!-- Expandable child row -->
<tr >
<!-- expand icon td -->
<td class="bx--table-column-checkbox">
<input data-event="select" id="bx--checkbox-15" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15" >
<label for="bx--checkbox-15" class="bx--checkbox-label" aria-label="Label name"></label>
</td>
<!-- inline action td's -->
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Load Balancer 5
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
HTTP
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
80
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Round Robin
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Maureen’s VM Groups
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Active
</td>
<!-- expand icon td -->
<td class="bx--table-column-menu">
<div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
<ul class="bx--overflow-menu-options bx--overflow-menu--flip">
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13H15V14H1zM12.7 4.5c.4-.4.4-1 0-1.4 0 0 0 0 0 0l-1.8-1.8c-.4-.4-1-.4-1.4 0 0 0 0 0 0 0L2 8.8V12h3.2L12.7 4.5zM10.2 2L12 3.8l-1.5 1.5L8.7 3.5 10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"></path></svg> Download
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9,4.6l-2.5-2.5C11.3,2.1,11.1,2,11,2H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V5 C14,4.9,13.9,4.7,13.9,4.6z M6,3h4v2H6V3z M10,13H6V9h4V13z M11,13V9c0-0.6-0.4-1-1-1H6C5.4,8,5,8.4,5,9v4H3V3h2v2c0,0.6,0.4,1,1,1 h4c0.6,0,1-0.4,1-1V3.2l2,2V13H11z"></path></svg> Save
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6H7V12H6zM9 6H10V12H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zM4 14V4h8v10H4zM6 1H10V2H6z"></path></svg> Delete
</div>
</button>
</li>
</ul>
</div>
</td>
<!-- inline edit tds -->
</tr>
<!-- Expandable child row -->
<tr >
<!-- expand icon td -->
<td class="bx--table-column-checkbox">
<input data-event="select" id="bx--checkbox-11" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11" >
<label for="bx--checkbox-11" class="bx--checkbox-label" aria-label="Label name"></label>
</td>
<!-- inline action td's -->
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Load Balancer 5
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
HTTP
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
80
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Round Robin
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Maureen’s VM Groups
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Active
</td>
<!-- expand icon td -->
<td class="bx--table-column-menu">
<div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
<ul class="bx--overflow-menu-options bx--overflow-menu--flip">
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13H15V14H1zM12.7 4.5c.4-.4.4-1 0-1.4 0 0 0 0 0 0l-1.8-1.8c-.4-.4-1-.4-1.4 0 0 0 0 0 0 0L2 8.8V12h3.2L12.7 4.5zM10.2 2L12 3.8l-1.5 1.5L8.7 3.5 10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"></path></svg> Download
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9,4.6l-2.5-2.5C11.3,2.1,11.1,2,11,2H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V5 C14,4.9,13.9,4.7,13.9,4.6z M6,3h4v2H6V3z M10,13H6V9h4V13z M11,13V9c0-0.6-0.4-1-1-1H6C5.4,8,5,8.4,5,9v4H3V3h2v2c0,0.6,0.4,1,1,1 h4c0.6,0,1-0.4,1-1V3.2l2,2V13H11z"></path></svg> Save
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6H7V12H6zM9 6H10V12H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zM4 14V4h8v10H4zM6 1H10V2H6z"></path></svg> Delete
</div>
</button>
</li>
</ul>
</div>
</td>
<!-- inline edit tds -->
</tr>
<!-- Expandable child row -->
<tr >
<!-- expand icon td -->
<td class="bx--table-column-checkbox">
<input data-event="select" id="bx--checkbox-12" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12" >
<label for="bx--checkbox-12" class="bx--checkbox-label" aria-label="Label name"></label>
</td>
<!-- inline action td's -->
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Load Balancer 5
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
HTTP
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
80
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Round Robin
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Maureen’s VM Groups
</td>
<!-- expand icon td -->
<td >
<!-- truncated new markup -->
Active
</td>
<!-- expand icon td -->
<td class="bx--table-column-menu">
<div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
<ul class="bx--overflow-menu-options bx--overflow-menu--flip">
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13H15V14H1zM12.7 4.5c.4-.4.4-1 0-1.4 0 0 0 0 0 0l-1.8-1.8c-.4-.4-1-.4-1.4 0 0 0 0 0 0 0L2 8.8V12h3.2L12.7 4.5zM10.2 2L12 3.8l-1.5 1.5L8.7 3.5 10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"></path></svg> Download
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9,4.6l-2.5-2.5C11.3,2.1,11.1,2,11,2H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V5 C14,4.9,13.9,4.7,13.9,4.6z M6,3h4v2H6V3z M10,13H6V9h4V13z M11,13V9c0-0.6-0.4-1-1-1H6C5.4,8,5,8.4,5,9v4H3V3h2v2c0,0.6,0.4,1,1,1 h4c0.6,0,1-0.4,1-1V3.2l2,2V13H11z"></path></svg> Save
</div>
</button>
</li>
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
<div class="bx--overflow-menu-options__option-content">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6H7V12H6zM9 6H10V12H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zM4 14V4h8v10H4zM6 1H10V2H6z"></path></svg> Delete
</div>
</button>
</li>
</ul>
</div>
</td>
<!-- inline edit tds -->
</tr>
<!-- Expandable child row -->
</tbody>
</table>
<!-- Pagination -->
<div class="bx--pagination" data-pagination>
<div class="bx--pagination__left">
<label
id="select-id-pagination-count-label"
class="bx--pagination__text"
for="select-id-pagination-count"
>
Items per page:
</label>
<div class="bx--select bx--select--inline bx--select__item-count">
<select
class="bx--select-input"
id="select-id-pagination-count"
aria-label="select number of items per page"
tabindex="0"
data-items-per-page
>
<option class="bx--select-option" value="10" selected>10</option>
<option class="bx--select-option" value="20">20</option>
<option class="bx--select-option" value="30">30</option>
<option class="bx--select-option" value="40">40</option>
<option class="bx--select-option" value="50">50</option>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"></path></svg>
</div>
<span class="bx--pagination__text">
<span data-displayed-item-range>1-10</span> of
<span data-total-items>50</span> items
</span>
</div>
<div class="bx--pagination__right">
<div class="bx--select bx--select--inline bx--select__page-number">
<select
class="bx--select-input"
id="select-id-pagination-page"
aria-label="select page number to view"
tabindex="0"
data-page-number-input
>
<option class="bx--select-option" value="1" selected>1</option>
<option class="bx--select-option" value="2">2</option>
<option class="bx--select-option" value="3">3</option>
<option class="bx--select-option" value="4">4</option>
<option class="bx--select-option" value="5">5</option>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"></path></svg>
</div>
<label
id="select-id-pagination-page-label"
class="bx--pagination__text"
for="select-id-pagination-page"
>
of 5 pages
</label>
<button class="bx--pagination__button bx--pagination__button--backward" tabindex="0" data-page-backward aria-label="Backward button">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination__nav-arrow" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M19 23L11 16 19 9 19 23z"></path></svg>
</button>
<button class="bx--pagination__button bx--pagination__button--forward" tabindex="0" data-page-forward aria-label="Forward button">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination__nav-arrow" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M13 9L21 16 13 23 13 9z"></path></svg>
</button>
</div>
</div>
</div>
Documentation
SCSS
The update to tables splits out the scss files into multiple partial files
with specific functionality, with a main index file bringing them together.
Files
| Name | Description |
|---|---|
data-table |
index file, brings in all functionality |
data-table-core |
Core styles and base modifiers, required |
data-table-action |
Action bar styles |
data-table-expandable |
Expandable row styles |
data-table-sort |
Sortable header styles |
Modifiers
| Name | Description |
|---|---|
bx--data-table--compact |
Change table row height to 24 |
bx--data-table--short |
Change table row height to 32 |
bx--data-table--tall |
Change table row height to 64 |
bx--data-table--zebra |
Toggle on zebra striping |
bx--data-table--static |
Change default table width from 100% to auto |
bx--data-table--no-border |
Remove default border on table cells |
bx--data-table--visible-overflow-menu |
Show overflow menu icons by default (without hover) |
JavaScript
Getting component class reference
ES2015
import { DataTable } from 'carbon-components';With pre-build bundle (carbon-components.min.js)
var DataTable = CarbonComponents.DataTable;Instantiating
// `#my-data-table` is an element with `[data-data-table]` attribute
DataTable.create(document.getElementById('my-data-table'));Public Methods
| Name | Params | Descriptions |
|---|---|---|
release |
Deletes the instance and removes document event listeners | |
refreshRows |
When adding in new table rows, reinitialize parent-child relationships. Not required if not using expandable rows |
Example - Keeping data table in sync with dynamic change in rows list (For expantable table)
// `#my-data-table` is an element with `[data-data-table]` attribute
var dataTableInstance = DataTable.create(
document.getElementById('my-data-table')
);
dataTableInstance.refreshRows();Events
| Key | Value | Description |
|---|---|---|
eventBeforeExpand |
data-table-beforetoggleexpand |
Row expansion event |
eventAfterExpand |
data-table-aftertoggleexpand |
Row expansion event |
eventBeforeSort |
data-table-beforetogglesort |
Sort event |
eventAfterSort |
data-table-aftertogglesort |
Sort event |
eventTrigger |
[data-event] |
Data attribute for clickable events |
eventParentContainer |
[data-parent-row] |
Data attribute for event container |
Example - Preventing a table expando from being toggled in a certain condition
document.addEventListener('data-table-beforetoggleexpand', function(evt) {
if (!myApplication.shouldToggleExpando(evt.target)) {
evt.preventDefault();
}
});Example - Sorting table content
document.addEventListener('data-table-aftertogglesort', function(evt) {
// `evt.target` will be `div.bx--data-table-container`
// `evt.detail.element` will be `button.bx--table-sort` whose sorting is changed,
// and will have `bx--table-sort--ascending` class or not depending on the sorting state
evt.target.querySelector(
'tbody'
).innerHTML = myApplication.resortTableContent(
evt.target,
evt.detail.element
);
});Options
| Key | Value | Description |
|---|---|---|
selectorInit |
[data-table] |
Required css class to target table element |
selectorToolbar |
.bx--table--toolbar |
Toolbar parent selector |
selectorActions |
.bx--batch-actions |
Action bar parent selector |
selectorCount |
[data-items-selected] |
Selected count span selector |
selectorActionCancel |
.bx--batch-summary__cancel |
Action cancel button selector |
selectorCheckbox |
.bx--checkbox |
Checkbox class selector |
selectorExpandCells |
.bx--table-expand |
Expand td selector |
selectorExpandableRows |
.bx--expandable-row |
Expand tr selector |
selectorParentRows |
.bx--parent-row |
Parent row selector |
selectorChildRow |
[data-child-row] |
Child row selector |
selectorTableBody |
tbody |
Generic tbody selector |
classExpandableRow |
bx--expandable-row |
Expandable Row parent class |
classExpandableRowHidden |
bx--expandable-row--hidden |
Initial hidden class |
classExpandableRowHover |
bx--expandable-row--hover |
Hover styles class |
classTableSortAscending |
bx--table-sort--ascending |
Ascending sort icon class |
classTableSortActive |
bx--table-sort--active |
Active sort icon class |
FAQ
How do I sort the tables The table component does not sort the table for you, rather it emits an event and toggles the sort UI. It is up to the user to re-render the table rows sorted; you can see this in action in the React Storybook.
How do I use the expandable rows If you would like to programmatically
expand table rows, you can add the bx--expandable-row to the
selectorParentRows elements.
How do I activate the batch actions pane If you would like to
programmatically activate the batch actions pane, you can add
bx--batch-actions--active to the bx--batch-actions element.