Tables

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	View Details Edit Delete
Table data	Table data	Table data	View Details Edit Delete
Table data	Table data	Table data	View Details Edit Delete
Table data	Table data	Table data	View Details Edit Delete
Table data	Table data	Table data	View Details Edit Delete

Copy


        <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>

Copy


        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete

Copy


    <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>

Copy


    <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete
Table data	Table data	Table data	Default status label	View Details Edit Delete

Copy


    <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>

Copy


    <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <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>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Delete</a>
    </div>
</div>

</td>
                </tr>
        </tbody>
    
</table></div>

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

Switcher

Tabs (content)

Examples

Usage

References

Basic table

Table with filter

Accessibility status

Testing

Developer considerations

Suggest a new component

Build accessible experiences

Research user journeys

Was this page helpful?