Tables
Displays data in a grid format consisting of rows and columns.
Examples
Tables should be used to present tabular data, such as lists of information with rows and columns, to make it easy for users to compare and analyse content.
Usage
The Design System uses DataTables. There are multiple configuration options available using DataTables. The following examples do not cover every possible option, but provide our most commonly used tables.
Do:
- allow the user to sort columns
- allow the user to filter table content
- consider how the table will be used on small screens
- horizontally align text to the left
- align headers according to their column data
- if there is no content for a cell use ‘Not applicable’ or ‘None’
- consider offering the ability to view all data (up to a limit of 100 items)
- offer the option to view how many items are displayed per page when table data is paginated, and give users the choice between numbers, say 10 and 50, where the second number is substantially bigger than the default
Avoid:
- using tables for page layouts
- stretching tables full width if the data doesn’t require this, as it causes unnecessary spaces between columns, making data more difficult to scan
- using expandable rows within a table
- leaving a table cell empty or use an em dash to indicate there’s no entry for that cell
- using an ‘Action’ dropdown button for one action, instead, use a button
- displaying a blank table with no content, instead, use a message to explain why no table is displayed
References
Medium
Data Tables — Best Practices
The Mobile Spoon
How to design data tables that don't suck - the 20 rules guide
WC3
Model for Tabular Data and Metadata on the Web
Microsoft Style Guide
Tables
Medium
The Ultimate Guide to Designing Data Tables
W3C Web Accessibility Tutorials
Table Concepts
NN/g Neilson Norman Group
Users' Pagination Preferences and "View All"
| Table header | Table header | Table header | Actions |
|---|---|---|---|
| Table data | Table data | Table data | |
| Table data | Table data | Table data | |
| Table data | Table data | Table data | |
| Table data | Table data | Table data | |
| Table data | Table data | Table data |
<turas-table table-id="simpleTableExampleEX">
<turas-table-head>
<turas-table-column span="5">Table header</turas-table-column>
<turas-table-column span="3">Table header</turas-table-column>
<turas-table-column span="3">Table header</turas-table-column>
<turas-table-column span="1">Actions</turas-table-column>
</turas-table-head>
<turas-table-body>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
</turas-table-body>
</turas-table>
<div class="turasTable table-responsive-lg ">
<table class="table table-striped" id="simpleTableExampleEX" >
<col class="col-md-5" />
<col class="col-md-3" />
<col class="col-md-3" />
<col class="col-md-1" />
<thead class=""><tr>
<th>Table header</th>
<th>Table header</th>
<th>Table header</th>
<th>Actions</th>
</tr></thead>
<tbody class="">
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table></div>
Basic table
| Table header | Table header | Table header | Table header | Actions |
|---|---|---|---|---|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
<turas-table table-id="simpleTableExampleEX">
<turas-table-head>
<turas-table-column span="2">Table header</turas-table-column>
<turas-table-column span="2">Table header</turas-table-column>
<turas-table-column span="2">Table header</turas-table-column>
<turas-table-column span="3">Table header</turas-table-column>
<turas-table-column span="1">Actions</turas-table-column>
</turas-table-head>
<turas-table-body>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
</turas-table-body>
</turas-table>
<div class="turasTable table-responsive-lg ">
<table class="table table-striped" id="simpleTableExampleEX" >
<col class="col-md-2" />
<col class="col-md-2" />
<col class="col-md-2" />
<col class="col-md-3" />
<col class="col-md-1" />
<thead class=""><tr>
<th>Table header</th>
<th>Table header</th>
<th>Table header</th>
<th>Table header</th>
<th>Actions</th>
</tr></thead>
<tbody class="">
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table></div>
Table with filter
| Table header | Table header | Table header | Table header | Actions |
|---|---|---|---|---|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
|
| Table data | Table data | Table data | Default status label |
<turas-table table-id="dataTableExample" additional-classes="turasForm">
<turas-table-above>
<div class="row">
<div class="col-md-5">
<turas-text-box asp-for="DataTableSearch" placeholder="Filter by name or sub department" additional-classes="mb-0" />
</div>
</div>
</turas-table-above>
<turas-table-search asp-for="DataTableSearch" />
<turas-table-head>
<turas-table-column span="3" searchable>Table header</turas-table-column>
<turas-table-column span="3" searchable>Table header</turas-table-column>
<turas-table-column span="2" searchable>Table header</turas-table-column>
<turas-table-column span="2" searchable>Table header</turas-table-column>
<turas-table-column span="1">Actions</turas-table-column>
</turas-table-head>
<turas-table-body>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator></td>
<td><partial name="_dropDownTempExample" /></td>
</tr>
</turas-table-body>
</turas-table>
<div class="turasTable table-responsive-lg turasForm">
<div class="row">
<div class="col-md-5">
<div class="form-group form-text-box mb-0"><label class="control-label " for="DataTableSearch">Search</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="Filter by name or sub department" data-val-normalizer="trim-whitespace" type="text" id="DataTableSearch" name="DataTableSearch" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="DataTableSearch" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
<table class="table table-striped" id="dataTableExample" turas-table-search="DataTableSearch">
<col class="col-md-3" />
<col class="col-md-3" />
<col class="col-md-2" />
<col class="col-md-2" />
<col class="col-md-1" />
<thead class=""><tr>
<th turas-table-column-searchable>Table header</th>
<th turas-table-column-searchable>Table header</th>
<th turas-table-column-searchable>Table header</th>
<th turas-table-column-searchable>Table header</th>
<th>Actions</th>
</tr></thead>
<tbody class="">
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><a href="/">Table data</a></td>
<td>Table data</td>
<td>Table data</td>
<td><div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div></td>
<td><!-- Example single danger button -->
<div class="btn-group actions-drop-down">
<button type="button" class="btn btn-table dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table></div>
turas-table
Renders a responsive Turas Table. Used as the parent container for table sections.
Optional parameters
- table-id – sets the unique ID for the table element
- manual-init – if set, prevents automatic JS initialization from datatables
- additional-classes – additional CSS classes for the table wrapper
turas-table-head
Renders the table thead with a row of th columns.
Optional parameters
- additional-classes – CSS classes applied to the thead element
turas-table-column
Renders a th column in the table head. Must be placed inside turas-table-head.
Optional parameters
- span – column width in Bootstrap grid units (default is 1)
- searchable – adds a searchable attribute to the column
- additional-classes – CSS classes for the th element
turas-table-above
Adds custom markup above the table (e.g., search box, filter buttons).
Optional parameters
- n/a – include any content inside this tag to render above the table
turas-table-search
Links a search box (bound to a model) to the Turas Table.
Required parameters
- asp-for – model property used for search input
Accessibility status
This component is fully compliant with the WCAG 2.2 standard.
Testing
- check keyboard navigation to ensure the table is in an expected tab order and doesn't cause a keyboard trap
- check that you can navigate through interactive elements within the table using the keyboard
- make sure focus is visible
- test table with screen readers to ensure they are announced as expected
Developer considerations
- make sure the table has some kind of description to let users of assistive technologies understand the context of the table this can be achieved by adding an aria-label attribute to the <table> element
- when possible a visible <caption> should be added to add a visual description of the table this can also help assistive technologies as well
