Data table

Display the data in the table.

Examples

You need to add base class rd-datatable to any <table>. Wrap the table with class rd-datatable-wrapper can prevent table too wide on small screen. Therefore, users can view all data by scrolling left and right.

The class column-checkbox is for make column width best fit for the checkbox.

ID	Name	Address	Email	Actions
1	Shela Fosten	7373 Vahlen Terrace	sfosten0@loc.gov	Permissions Delete
2	Desirae Helks	43196 Northport Hill	dhelks1@google.de	Permissions Delete
3	Ted Ors	92666 Cottonwood Crossing	tors2@ocn.ne.jp	Permissions Delete
ID	Name	Address	Email	Actions

Source

H Border

This data table only use horizontal border by add h-border to table class.

ID	Name	Address	Email	Actions
1	Shela Fosten	7373 Vahlen Terrace	sfosten0@loc.gov	Permissions Delete
2	Desirae Helks	43196 Northport Hill	dhelks1@google.de	Permissions Delete
3	Ted Ors	92666 Cottonwood Crossing	tors2@ocn.ne.jp	Permissions Delete
ID	Name	Address	Email	Actions

Source

<table class="rd-datatable h-border">
    ...
</table>

Sortable columns

Example for sortable columns. Add the class sortable-icon to any sortable icon in the link to make it appears on hover.

ID	Name	Address	Email	Actions
1	Shela Fosten	7373 Vahlen Terrace	sfosten0@loc.gov	Permissions Delete
2	Desirae Helks	43196 Northport Hill	dhelks1@google.de	Permissions Delete
3	Ted Ors	92666 Cottonwood Crossing	tors2@ocn.ne.jp	Permissions Delete
ID	Name	Address	Email	Actions

Source

<table class="rd-datatable">
    <thead>
        <tr>
            <th class="sorted"><a href="?sort=id">ID <i class="order-asc sortable-icon"></i></a></th>
            <th><a href="?sort=name">Name <i class="order-asc sortable-icon"></i></a></th>
        </tr>
    </thead>
    ...
</table>

Row colors

Add showing class to <tr>.

Type	Class	Name	Actions
Default		Shela Fosten	Permissions Delete
Primary	`table-row-primary`	Desirae Helks	Permissions Delete
Info	`table-row-info`	Ted Ors	Permissions Delete
Danger	`table-row-danger`	Pauli Fero	Permissions Delete
Warning	`table-row-warning`	Valaree Bedbury	Permissions Delete
Success	`table-row-success`	Gaspar Treat	Permissions Delete
Type	Class	Name	Actions

Source

<tr class="table-row-primary">...</tr>
<tr class="table-row-info">...</tr>
<tr class="table-row-danger">...</tr>
<tr class="table-row-warning">...</tr>
<tr class="table-row-success">...</tr>

Cell colors

Add showing class to table cell (<td>, or <th>).

Default	Primary	Info	Danger	Warning	Success
Default	Primary `table-cell-primary`	Info `table-cell-info`	Danger `table-cell-danger`	Warning `table-cell-warning`	Success `table-cell-success`
Info row color					Success
This row contain no cell or row color.
Default	Primary	Info	Danger	Warning	Success

Source

<td class="table-cell-primary">...</td>
<td class="table-cell-info">...</td>
<td class="table-cell-danger">...</td>
<td class="table-cell-warning">...</td>
<td class="table-cell-success">...</td>

Data table with filters row

Add filter-row class to <tr> of the row that contain filters input.

ID	Name	Address	Email	Actions

1000	Chiquita Danton	074 Iowa Drive	cdantonrr@barnesandnoble.com	Permissions Delete
999	Brice Brunnstein	879 North Parkway	bbrunnsteinrq@comsenz.com	Permissions Delete
998	Traci Keeble	4003 Northview Park	tkeeblerp@i2i.jp	Permissions Delete
ID	Name	Address	Email	Actions

Source

<tr class="filter-row">...</tr>

Responsive

This style of responsive is collapsible/expandable table for small screen size. To make it work, add the classes responsive and rd-datatable to the <table>.
With this kind of responsive, you may not need to wrap the <table> with the class .rd-datatable-wrapper.

The class column-primary is for make that column always displayed on all screen sizes. This primary column should have only one per table. The classes row-actions, and action are for display each table row actions and will be displayed on mouse hover.
The class toggle-row that added to the button is to make that button work as expand/collapse on small screen.

Name	Address	Email
Shela Fosten Edit Permissions Delete	7373 Vahlen Terrace	sfosten0@loc.gov
Desirae Helks Edit Permissions Delete	43196 Northport Hill	dhelks1@google.de
Ted Ors Edit Permissions Delete	92666 Cottonwood Crossing	tors2@ocn.ne.jp
Name	Address	Email

Source

And if there is no data in the responsive table.

	Name	Address	Email
No data.
	Name	Address	Email

Sidebar menus

Data table

Examples

Source

H Border

Source

Sortable columns

Source

Row colors

Source

Cell colors

Source

Data table with filters row

Source

Responsive

Source