Check with your designers to help you design this section
Check with your designers to help you design this section
Our approach to tables in RAUL is to provide basic styling for tables and some very simple extensions. While products sometimes require complex table functionality using js libraries, those libraries will not be included by default we may add them as a supported plugin.
Table Title Here | |||
---|---|---|---|
Lead Information Here | 100 |
Active
|
|
Lead Information Here | 57 |
Active
|
|
Lead Information Here | 96 |
Pending
|
|
Lead Information Here | 234 |
Active
|
|
Lead Information Here | 122 |
Active
|
|
Lead Information Here | 122 |
Active
|
<table class="table raul-table table-font-size-small">
<thead>
<tr>
<th>Table Title Here</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Lead Information Here</td>
<td>100</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>57</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>96</td>
<td>
<div class="raul-status-indicator raul-status-indicator-pending item">
<span>Pending</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>234</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>122</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>122</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
.table-striped)
Table Title Here | |||
---|---|---|---|
Lead Information Here | 100 |
Active
|
|
Lead Information Here | 57 |
Active
|
|
Lead Information Here | 96 |
Pending
|
|
Lead Information Here | 234 |
Active
|
|
Lead Information Here | 122 |
Active
|
|
Lead Information Here | 122 |
Active
|
<table class="table raul-table table-striped table-font-size-small">
<thead>
<tr>
<th>Table Title Here</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Lead Information Here</td>
<td>100</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>57</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>96</td>
<td>
<div class="raul-status-indicator raul-status-indicator-pending item">
<span>Pending</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>234</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>122</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>122</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
.table-bordered
)Table Title Here | |||
---|---|---|---|
Lead Information Here | 100 |
Active
|
|
Lead Information Here | 57 |
Active
|
|
Lead Information Here | 96 |
Pending
|
|
Lead Information Here | 234 |
Active
|
|
Lead Information Here | 122 |
Active
|
|
Lead Information Here | 122 |
Active
|
<table class="table raul-table table-bordered table-font-size-small">
<thead>
<tr>
<th>Table Title Here</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Lead Information Here</td>
<td>100</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>57</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>96</td>
<td>
<div class="raul-status-indicator raul-status-indicator-pending item">
<span>Pending</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>234</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>122</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>122</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
.table-hover
)Table Title Here | |||
---|---|---|---|
Lead Information Here | 100 |
Active
|
|
Lead Information Here | 57 |
Active
|
|
Lead Information Here | 96 |
Pending
|
|
Lead Information Here | 234 |
Active
|
|
Lead Information Here | 122 |
Active
|
|
Lead Information Here | 122 |
Active
|
<table class="table raul-table table-hover table-font-size-small">
<thead>
<tr>
<th>Table Title Here</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Lead Information Here</td>
<td>100</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>57</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>96</td>
<td>
<div class="raul-status-indicator raul-status-indicator-pending item">
<span>Pending</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>234</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>122</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Lead Information Here</td>
<td>122</td>
<td>
<div class="raul-status-indicator raul-status-indicator-success item">
<span>Active</span>
</div>
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
<div class="action-item">
<a href="#" class="action-icon black-action-item">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
Left | Center | Right |
---|---|---|
.text-left (optional)
|
.text-center
|
.text-right
|
The text aligns to the left as default |
Using
.text-center
aligns the text centrally
|
Using
.text-right
aligns the text to the right
|
Small | Medium | Big |
---|---|---|
.table-font-size-small
|
.table-font-size-medium
|
.table-font-size-big
|
Example of text on which
.table-font-size-small
has been applied
|
Example of text on which
.table-font-size-medium
has been applied
|
Example of text on which
.table-font-size-big
has been applied
|
Add .table-sortable
to table header tags plus .ascending
or .descending
to change the arrow. Includes styles only. Table sorting
functionality will depend on pagination approaches.
Header | Header | Header | Header | |
---|---|---|---|---|
Total Count Left | Total Count Left | Total Count Left | ||
Property Name
123 Main Street Dallas TX 75084
|
First Line Text
Lorem ipsum dolor
|
First Line Text
Lorem ipsum dolor
|
First Line Text | |
Property Name
123 Main Street Dallas TX 75084
|
First Line Text
Lorem ipsum dolor
|
First Line Text
Lorem ipsum dolor
|
First Line Text | |
Property Name
123 Main Street Dallas TX 75084
|
First Line Text
Lorem ipsum dolor
|
First Line Text
Lorem ipsum dolor
|
First Line Text | |
Property Name
123 Main Street Dallas TX 75084
|
First Line Text
Lorem ipsum dolor
|
First Line Text
Lorem ipsum dolor
|
First Line Text |
<table class="table raul-table table-font-size-small">
<thead>
<tr>
<th class="table-sortable ascending">
Header
</th>
<th class="table-sortable descending">
Header
</th>
<th class="table-sortable descending">
Header
</th>
<th class="table-sortable descending">
Header
</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total Count Left</th>
<th>Total Count Left</th>
<th>Total Count Left</th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody class="table-font-size-medium row-padding-bg">
<tr>
<td>
<div class="table-item-wrapper">
<a href="#" class="pr-3 text-decoration-none"><img src="https://s.realpage.com/wp-content/themes/realpage/images/card-assets/news-9-24-2017.jpg" alt="Image" style="width:2.5rem;height:2.5rem"></a>
<div class="table-item-details">
<a href="#" class="text-decoration-none text-primary">Property Name</a>
<div class="text-muted">123 Main Street Dallas TX 75084</div>
</div>
</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<i class="fa fa-pencil action-icon" aria-hidden="true"></i>
</div>
<div class="action-item">
<i class="fa fa-trash action-icon" aria-hidden="true"></i>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="table-item-wrapper">
<a href="#" class="pr-3 text-decoration-none"><img src="https://s.realpage.com/wp-content/themes/realpage/images/card-assets/news-9-24-2017.jpg" alt="Image" style="width:2.5rem;height:2.5rem"></a>
<div class="table-item-details">
<a href="#" class="text-decoration-none text-primary">Property Name</a>
<div class="text-muted">123 Main Street Dallas TX 75084</div>
</div>
</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<i class="fa fa-pencil action-icon" aria-hidden="true"></i>
</div>
<div class="action-item">
<i class="fa fa-trash action-icon" aria-hidden="true"></i>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="table-item-wrapper">
<a href="#" class="pr-3 text-decoration-none"><img src="https://s.realpage.com/wp-content/themes/realpage/images/card-assets/news-9-24-2017.jpg" alt="Image" style="width:2.5rem;height:2.5rem"></a>
<div class="table-item-details">
<a href="#" class="text-decoration-none text-primary">Property Name</a>
<div class="text-muted">123 Main Street Dallas TX 75084</div>
</div>
</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<i class="fa fa-pencil action-icon" aria-hidden="true"></i>
</div>
<div class="action-item">
<i class="fa fa-trash action-icon" aria-hidden="true"></i>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="table-item-wrapper">
<a href="#" class="pr-3 text-decoration-none"><img src="https://s.realpage.com/wp-content/themes/realpage/images/card-assets/news-9-24-2017.jpg" alt="Image" style="width:2.5rem;height:2.5rem"></a>
<div class="table-item-details">
<a href="#" class="text-decoration-none text-primary">Property Name</a>
<div class="text-muted">123 Main Street Dallas TX 75084</div>
</div>
</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
</td>
<td class="text-right">
<div class="action-items-wrapper">
<div class="action-item">
<i class="fa fa-pencil action-icon" aria-hidden="true"></i>
</div>
<div class="action-item">
<i class="fa fa-trash action-icon" aria-hidden="true"></i>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
Global actions, such as adding a new row to the table, should be aligned left. Any action icons should be aligned right. With respect to all complex table actions, presentation is handled by RAUL, actions are handled by product teams. This is due to the diversity of product needs and implementations.
Optional action icons<div class="table-filter">
<div class="filter-header-wrapper">
<ul class="filter-header">
<li class="list-left-side">
<div class="list-left-item">
<a href="#">
<i class="fa fa-plus list-icon blue-icon"></i> Global Action
</a>
</div>
<div class="list-left-item">
<a href="#">
<i class="fa fa-plus list-icon blue-icon"></i> Global Action
</a>
</div>
</li>
<li class="list-right-side">
<div class="list-right-item filter-search">
<div class="filter-search-icon-wrapper" data-tooltip="Search">
<i class="fa fa-search list-icon filter-search-icon" aria-hidden="true"></i>
</div>
<input class="form-control filter-search-input" placeholder="Search">
</div>
<div class="list-right-item" data-tooltip="Download">
<i class="fa fa-download list-icon" aria-hidden="true"></i>
</div>
<div class="list-right-item" data-tooltip="Settings">
<i class="fa fa-cog list-icon" aria-hidden="true"></i>
</div>
<div class="list-right-item" data-tooltip="Filters">
<i class="fa fa-filter list-icon"
aria-hidden="true"
data-toggle="collapse"
href="#filters-content-wrapper-collapse"
aria-expanded="false"></i>
</div>
<div class="list-right-item" data-tooltip="Edit" data-tooltip-pos="top-left">
<i class="fa fa-pencil list-icon" aria-hidden="true"></i>
</div>
</li>
</ul>
</div>
<div class="filter-content-wrapper collapse" id="filters-content-wrapper-collapse">
<div class="form-row filter-content">
<div class="col-6 col-md-4 col-xl-3 filter-content-item">
<div class="raul-dropdown-select ">
<div class="dropdown-toggle">
<div class="dropdown-toggle-content">
<span class="dropdown-title">Colors</span>
<i class="fa fa-chevron-down dropdown-arrow" aria-hidden="true"></i>
</div>
</div>
<div class="dropdown-menu">
<div class="dropdown-body">
<div class="dropdown-group">
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Red</span>
<input
type="radio"
name="form-style-second-section"
value="red"
data-text="Red"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Orange</span>
<input
type="radio"
name="form-style-second-section"
value="orange"
data-text="Orange"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Yellow</span>
<input
type="radio"
name="form-style-second-section"
value="yellow"
data-text="Yellow"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text raul-input-text-disabled">Green</span>
<input
type="radio"
name="form-style-second-section"
value="green"
data-text="Green"
disabled
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-xl-3 filter-content-item">
<div class="form-group">
<div class="form-control-wrapper">
<div class="form-control">
<div class="custom-control custom-checkbox custom-control-right">
<input type="checkbox" class="custom-control-input" id="filter-custom-check-1">
<label class="custom-control-label" for="filter-custom-check-1">Unchecked</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-xl-3 filter-content-item filter-content-actions-item">
<a href="#" class="filter-content-clear-filters">CLEAR</a>
<a href="#" class="filter-content-apply-filters">APPLY</a>
</div>
</div>
</div>
</div>
To initialize bulk actions, wrap both table and filter header inside
.table-with-bulk-action
with filter header containing a bulk action header as in
the example. Marking a input.action-checkbox
as checked will trigger the bulk
action header to fade in and will add .highlighted-row
to its row.
Marking all of them as checked will auto-check input.check-all
, as well as
marking input.check-all
as checked will check all of the other checkboxes.
Bulk action menu default behavior is to remain sticky on the top of the screen and over the
table while scrolling. Optionally, you can add data-top-distance
attribute to
.table-with-bulk-action
to tell the bulk action menu at what distance to
window's top should it start its sticky behavior (the value is calculated in pixels).
|
Caption
|
Caption
|
Caption
|
Caption
|
|
---|---|---|---|---|---|
Total Count Left | Total Count Left | Total Count Left | |||
|
Property Name
123 Main Street Dallas TX 75084
|
First Line Text
Lorem ipsum dolor
|
First Line Text
Lorem ipsum dolor
|
First Line Text | |
|
Property Name
123 Main Street Dallas TX 75084
|
First Line Text
Lorem ipsum dolor
|
First Line Text
Lorem ipsum dolor
|
First Line Text | |
|
Property Name
123 Main Street Dallas TX 75084
|
First Line Text
Lorem ipsum dolor
|
First Line Text
Lorem ipsum dolor
|
First Line Text | |
|
Property Name
123 Main Street Dallas TX 75084
|
First Line Text
Lorem ipsum dolor
|
First Line Text
Lorem ipsum dolor
|
First Line Text |
<div class="table-with-bulk-action" data-top-distance="99">
<div class="table-filter">
<div class="filter-header-wrapper">
<ul class="filter-header">
<li class="list-left-side">
<div class="list-left-item">
<a href="#">
<i class="fa fa-plus list-icon blue-icon"></i> Global Action
</a>
</div>
<div class="list-left-item">
<a href="#">
<i class="fa fa-plus list-icon blue-icon"></i> Global Action
</a>
</div>
</li>
<li class="list-right-side">
<div class="list-right-item filter-search">
<div class="filter-search-icon-wrapper" data-tooltip="Search">
<i class="fa fa-search list-icon filter-search-icon" aria-hidden="true"></i>
</div>
<input class="form-control filter-search-input" placeholder="Search">
</div>
<div class="list-right-item" data-tooltip="Download">
<i class="fa fa-download list-icon" aria-hidden="true"></i>
</div>
<div class="list-right-item" data-tooltip="Settings">
<i class="fa fa-cog list-icon" aria-hidden="true"></i>
</div>
<div class="list-right-item" data-tooltip="Filters">
<i class="fa fa-filter list-icon"
aria-hidden="true"
data-toggle="collapse"
href="#filters-content-wrapper-collapse-2"
aria-expanded="false"></i>
</div>
<div class="list-right-item" data-tooltip="Edit" data-tooltip-pos="top-left">
<i class="fa fa-pencil list-icon" aria-hidden="true"></i>
</div>
</li>
</ul>
<div class="bulk-action-menu">
<ul class="filter-header">
<li class="list-left-side">
<div class="list-left-item">
<a href="#">
<i class="fa fa-pencil list-icon" aria-hidden="true"></i> Edit Record
</a>
</div>
<div class="list-left-item">
<a href="#">
<i class="fa fa-trash list-icon" aria-hidden="true"></i> Delete Record
</a>
</div>
</li>
<li class="list-right-side">
<div class="list-right-item table-font-size-small">
(<span class="checkboxes-selected">0</span>) items selected
</div>
<div class="list-right-item mx-2" data-tooltip="Cancel" data-tooltip-pos="top-left">
<a href="#" class="deselect-all-checkboxes">
<i class="fa fa-times list-icon" aria-hidden="true"></i>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="filter-content-wrapper collapse" id="filters-content-wrapper-collapse-2">
<div class="form-row filter-content">
<div class="col-6 col-md-4 col-xl-3 filter-content-item">
<div class="raul-dropdown-select ">
<div class="dropdown-toggle">
<div class="dropdown-toggle-content">
<span class="dropdown-title">Colors</span>
<i class="fa fa-chevron-down dropdown-arrow" aria-hidden="true"></i>
</div>
</div>
<div class="dropdown-menu">
<div class="dropdown-body">
<div class="dropdown-group">
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Red</span>
<input
type="radio"
name="form-style-second-section"
value="red"
data-text="Red"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Orange</span>
<input
type="radio"
name="form-style-second-section"
value="orange"
data-text="Orange"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Yellow</span>
<input
type="radio"
name="form-style-second-section"
value="yellow"
data-text="Yellow"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text raul-input-text-disabled">Green</span>
<input
type="radio"
name="form-style-second-section"
value="green"
data-text="Green"
disabled
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-xl-3 filter-content-item">
<div class="form-group">
<div class="form-control-wrapper">
<div class="form-control">
<div class="custom-control custom-checkbox custom-control-right">
<input type="checkbox" class="custom-control-input" id="bulk-custom-check-1">
<label class="custom-control-label" for="bulk-custom-check-1">Filter</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-xl-3 filter-content-item filter-content-actions-item">
<a href="#" class="filter-content-clear-filters">CLEAR</a>
<a href="#" class="filter-content-apply-filters">APPLY</a>
</div>
</div>
</div>
</div>
<table class="table raul-table table-font-size-small">
<thead>
<tr>
<th>
<div class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input check-all"
id="check-all-checkbox"
>
<label class="custom-control-label" for="check-all-checkbox"></label>
</div>
</th>
<th>
<div class="table-item-wrapper">
<div class="table-item-details ascending">
Caption
</div>
</div>
</th>
<th>
<div class="table-item-wrapper">
<div class="table-item-details descending">
Caption
</div>
</div>
</th>
<th>
<div class="table-item-wrapper">
<div class="table-item-details descending">
Caption
</div>
</div>
</th>
<th>
<div class="table-item-wrapper">
<div class="table-item-details descending">
Caption
</div>
</div>
</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Total Count Left</th>
<th>Total Count Left</th>
<th>Total Count Left</th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody class="table-font-size-medium row-padding-bg">
<tr>
<td>
<div class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input action-checkbox"
id="action-checkbox-1"
checked
>
<label class="custom-control-label" for="action-checkbox-1"></label>
</div>
</td>
<td>
<div class="table-item-wrapper">
<a href="#" class="pr-3 text-decoration-none"><img src="https://s.realpage.com/wp-content/themes/realpage/images/card-assets/news-9-24-2017.jpg" alt="Image" style="width:2.5rem;height:2.5rem"></a>
<div class="table-item-details">
<a href="#" class="text-decoration-none text-primary">Property Name</a>
<div class="text-muted">123 Main Street Dallas TX 75084</div>
</div>
</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
</td>
<td>
<div class="action-items-wrapper">
<div class="action-item">
<i class="fa fa-pencil action-icon" aria-hidden="true"></i>
</div>
<div class="action-item">
<i class="fa fa-trash action-icon" aria-hidden="true"></i>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input action-checkbox"
id="action-checkbox-2"
>
<label class="custom-control-label" for="action-checkbox-2"></label>
</div>
</td>
<td>
<div class="table-item-wrapper">
<a href="#" class="pr-3 text-decoration-none"><img src="https://s.realpage.com/wp-content/themes/realpage/images/card-assets/news-9-24-2017.jpg" alt="Image" style="width:2.5rem;height:2.5rem"></a>
<div class="table-item-details">
<a href="#" class="text-decoration-none text-primary">Property Name</a>
<div class="text-muted">123 Main Street Dallas TX 75084</div>
</div>
</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
</td>
<td>
<div class="action-items-wrapper">
<div class="action-item">
<i class="fa fa-pencil action-icon" aria-hidden="true"></i>
</div>
<div class="action-item">
<i class="fa fa-trash action-icon" aria-hidden="true"></i>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input action-checkbox"
id="action-checkbox-3"
>
<label class="custom-control-label" for="action-checkbox-3"></label>
</div>
</td>
<td>
<div class="table-item-wrapper">
<a href="#" class="pr-3 text-decoration-none"><img src="https://s.realpage.com/wp-content/themes/realpage/images/card-assets/news-9-24-2017.jpg" alt="Image" style="width:2.5rem;height:2.5rem"></a>
<div class="table-item-details">
<a href="#" class="text-decoration-none text-primary">Property Name</a>
<div class="text-muted">123 Main Street Dallas TX 75084</div>
</div>
</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
</td>
<td>
<div class="action-items-wrapper">
<div class="action-item">
<i class="fa fa-pencil action-icon" aria-hidden="true"></i>
</div>
<div class="action-item">
<i class="fa fa-trash action-icon" aria-hidden="true"></i>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input action-checkbox"
id="action-checkbox-4"
>
<label class="custom-control-label" for="action-checkbox-4"></label>
</div>
</td>
<td>
<div class="table-item-wrapper">
<a href="#" class="pr-3 text-decoration-none"><img src="https://s.realpage.com/wp-content/themes/realpage/images/card-assets/news-9-24-2017.jpg" alt="Image" style="width:2.5rem;height:2.5rem"></a>
<div class="table-item-details">
<a href="#" class="text-decoration-none text-primary">Property Name</a>
<div class="text-muted">123 Main Street Dallas TX 75084</div>
</div>
</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
</td>
<td>
<div class="action-items-wrapper">
<div class="action-item">
<i class="fa fa-pencil action-icon" aria-hidden="true"></i>
</div>
<div class="action-item">
<i class="fa fa-trash action-icon" aria-hidden="true"></i>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Some situations will require server-side pagination (for example thousands of rows). Others will call for client side pagination (complex data filtering and presentation). RAUL simply provides styles for pagination in your project.
<div class="pagination-wrapper row align-items-center">
<div class="pagination-show-entries col">
Show
<div class="raul-dropdown-select dropdown-no-border dropdown-sm px-2">
<div class="dropdown-toggle">
<div class="dropdown-toggle-content">
<span class="dropdown-title">10</span>
<i class="fa fa-chevron-down dropdown-arrow" aria-hidden="true"></i>
</div>
</div>
<div class="dropdown-menu">
<div class="dropdown-body">
<div class="dropdown-group">
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">10</span>
<input
type="radio"
name="form-style-second-section"
value="10"
data-text="10"
checked
>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">15</span>
<input
type="radio"
name="form-style-second-section"
value="15"
data-text="15"
>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">20</span>
<input
type="radio"
name="form-style-second-section"
value="20"
data-text="20"
>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">25</span>
<input
type="radio"
name="form-style-second-section"
value="25"
data-text="25"
>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">30</span>
<input
type="radio"
name="form-style-second-section"
value="30"
data-text="30"
>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
entries
</div>
<div class="pagination-count col text-center">
<span class="pagination-count-from">1</span>-<span class="pagination-count-to">10</span>
of
<span class="pagination-count-of">90</span>
</div>
<div class="pagination-pages col text-right">
<i class="fa fa-angle-left go-to-page-icon" aria-hidden="true"></i> Page
<input
type="number"
name="page-number"
value="1"
min="1"
max="300"
class="pagination-page-number"
> of
<span class="pagination-total-pages"> 300</span>
<i class="fa fa-angle-right go-to-page-icon" aria-hidden="true"></i>
</div>
</div>
|
Caption
|
Caption
|
Caption
|
Caption
|
|
---|---|---|---|---|---|
Total Count Left | Total Count Left | Total Count Left | |||
|
Property Name
123 Main Street Dallas TX 75084
|
First Line Text
Lorem ipsum dolor
|
First Line Text
Lorem ipsum dolor
|
First Line Text | |
|
Property Name
123 Main Street Dallas TX 75084
|
First Line Text
Lorem ipsum dolor
|
First Line Text
Lorem ipsum dolor
|
First Line Text | |
|
Property Name
123 Main Street Dallas TX 75084
|
First Line Text
Lorem ipsum dolor
|
First Line Text
Lorem ipsum dolor
|
First Line Text | |
|
Property Name
123 Main Street Dallas TX 75084
|
First Line Text
Lorem ipsum dolor
|
First Line Text
Lorem ipsum dolor
|
First Line Text |
<div class="table-with-bulk-action" data-top-distance="99">
<div class="table-filter">
<div class="filter-header-wrapper">
<ul class="filter-header">
<li class="list-left-side">
<div class="list-left-item">
<a href="#">
<i class="fa fa-plus list-icon blue-icon"></i> Global Action
</a>
</div>
<div class="list-left-item">
<a href="#">
<i class="fa fa-plus list-icon blue-icon"></i> Global Action
</a>
</div>
</li>
<li class="list-right-side">
<div class="list-right-item filter-search">
<div class="filter-search-icon-wrapper" data-tooltip="Search">
<i class="fa fa-search list-icon filter-search-icon" aria-hidden="true"></i>
</div>
<input class="form-control filter-search-input" placeholder="Search">
</div>
<div class="list-right-item" data-tooltip="Download">
<i class="fa fa-download list-icon" aria-hidden="true"></i>
</div>
<div class="list-right-item" data-tooltip="Settings">
<i class="fa fa-cog list-icon" aria-hidden="true"></i>
</div>
<div class="list-right-item" data-tooltip="Filters">
<i class="fa fa-filter list-icon"
aria-hidden="true"
data-toggle="collapse"
href="#filters-content-wrapper-collapse-2"
aria-expanded="false"></i>
</div>
<div class="list-right-item" data-tooltip="Edit" data-tooltip-pos="top-left">
<i class="fa fa-pencil list-icon" aria-hidden="true"></i>
</div>
</li>
</ul>
<div class="bulk-action-menu">
<ul class="filter-header">
<li class="list-left-side">
<div class="list-left-item">
<a href="#">
<i class="fa fa-pencil list-icon" aria-hidden="true"></i> Edit Record
</a>
</div>
<div class="list-left-item">
<a href="#">
<i class="fa fa-trash list-icon" aria-hidden="true"></i> Delete Record
</a>
</div>
</li>
<li class="list-right-side">
<div class="list-right-item table-font-size-small">
(<span class="checkboxes-selected">0</span>) items selected
</div>
<div class="list-right-item mx-2" data-tooltip="Cancel" data-tooltip-pos="top-left">
<a href="#" class="deselect-all-checkboxes">
<i class="fa fa-times list-icon" aria-hidden="true"></i>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="filter-content-wrapper collapse" id="filters-content-wrapper-collapse-3">
<div class="form-row filter-content">
<div class="col-6 col-md-4 col-xl-3 filter-content-item">
<div class="raul-dropdown-select ">
<div class="dropdown-toggle">
<div class="dropdown-toggle-content">
<span class="dropdown-title">Colors</span>
<i class="fa fa-chevron-down dropdown-arrow" aria-hidden="true"></i>
</div>
</div>
<div class="dropdown-menu">
<div class="dropdown-body">
<div class="dropdown-group">
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Red</span>
<input
type="radio"
name="form-style-second-section"
value="red"
data-text="Red"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Orange</span>
<input
type="radio"
name="form-style-second-section"
value="orange"
data-text="Orange"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">Yellow</span>
<input
type="radio"
name="form-style-second-section"
value="yellow"
data-text="Yellow"
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text raul-input-text-disabled">Green</span>
<input
type="radio"
name="form-style-second-section"
value="green"
data-text="Green"
disabled
>
<i class="fa fa-check dropdown-checked-icon"></i>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-xl-3 filter-content-item">
<div class="form-group">
<div class="form-control-wrapper">
<div class="form-control">
<div class="custom-control custom-checkbox custom-control-right">
<input type="checkbox" class="custom-control-input" id="bulk-custom-check-2">
<label class="custom-control-label" for="bulk-custom-check-2">Filter</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-xl-3 filter-content-item filter-content-actions-item">
<a href="#" class="filter-content-clear-filters">CLEAR</a>
<a href="#" class="filter-content-apply-filters">APPLY</a>
</div>
</div>
</div>
</div>
<table class="table raul-table table-font-size-small">
<thead>
<tr>
<th>
<div class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input check-all"
id="check-all-checkbox-2"
>
<label class="custom-control-label" for="check-all-checkbox"></label>
</div>
</th>
<th>
<div class="table-item-wrapper">
<div class="table-item-details ascending">
Caption
</div>
</div>
</th>
<th>
<div class="table-item-wrapper">
<div class="table-item-details descending">
Caption
</div>
</div>
</th>
<th>
<div class="table-item-wrapper">
<div class="table-item-details descending">
Caption
</div>
</div>
</th>
<th>
<div class="table-item-wrapper">
<div class="table-item-details descending">
Caption
</div>
</div>
</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Total Count Left</th>
<th>Total Count Left</th>
<th>Total Count Left</th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody class="table-font-size-medium row-padding-bg">
<tr>
<td>
<div class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input action-checkbox"
id="table-with-pagination-action-checkbox-1"
checked
>
<label class="custom-control-label" for="table-with-pagination-action-checkbox-1"></label>
</div>
</td>
<td>
<div class="table-item-wrapper">
<a href="#" class="pr-3 text-decoration-none"><img src="https://s.realpage.com/wp-content/themes/realpage/images/card-assets/news-9-24-2017.jpg" alt="Image" style="width:2.5rem;height:2.5rem"></a>
<div class="table-item-details">
<a href="#" class="text-decoration-none text-primary">Property Name</a>
<div class="text-muted">123 Main Street Dallas TX 75084</div>
</div>
</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
</td>
<td>
<div class="action-items-wrapper">
<div class="action-item">
<i class="fa fa-pencil action-icon" aria-hidden="true"></i>
</div>
<div class="action-item">
<i class="fa fa-trash action-icon" aria-hidden="true"></i>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input action-checkbox"
id="table-with-pagination-action-checkbox-2"
>
<label class="custom-control-label" for="table-with-pagination-action-checkbox-2"></label>
</div>
</td>
<td>
<div class="table-item-wrapper">
<a href="#" class="pr-3 text-decoration-none"><img src="https://s.realpage.com/wp-content/themes/realpage/images/card-assets/news-9-24-2017.jpg" alt="Image" style="width:2.5rem;height:2.5rem"></a>
<div class="table-item-details">
<a href="#" class="text-decoration-none text-primary">Property Name</a>
<div class="text-muted">123 Main Street Dallas TX 75084</div>
</div>
</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
</td>
<td>
<div class="action-items-wrapper">
<div class="action-item">
<i class="fa fa-pencil action-icon" aria-hidden="true"></i>
</div>
<div class="action-item">
<i class="fa fa-trash action-icon" aria-hidden="true"></i>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input action-checkbox"
id="table-with-pagination-action-checkbox-3"
>
<label class="custom-control-label" for="table-with-pagination-action-checkbox-3"></label>
</div>
</td>
<td>
<div class="table-item-wrapper">
<a href="#" class="pr-3 text-decoration-none"><img src="https://s.realpage.com/wp-content/themes/realpage/images/card-assets/news-9-24-2017.jpg" alt="Image" style="width:2.5rem;height:2.5rem"></a>
<div class="table-item-details">
<a href="#" class="text-decoration-none text-primary">Property Name</a>
<div class="text-muted">123 Main Street Dallas TX 75084</div>
</div>
</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
</td>
<td>
<div class="action-items-wrapper">
<div class="action-item">
<i class="fa fa-pencil action-icon" aria-hidden="true"></i>
</div>
<div class="action-item">
<i class="fa fa-trash action-icon" aria-hidden="true"></i>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input action-checkbox"
id="table-with-pagination-action-checkbox-4"
>
<label class="custom-control-label" for="table-with-pagination-action-checkbox-4"></label>
</div>
</td>
<td>
<div class="table-item-wrapper">
<a href="#" class="pr-3 text-decoration-none"><img src="https://s.realpage.com/wp-content/themes/realpage/images/card-assets/news-9-24-2017.jpg" alt="Image" style="width:2.5rem;height:2.5rem"></a>
<div class="table-item-details">
<a href="#" class="text-decoration-none text-primary">Property Name</a>
<div class="text-muted">123 Main Street Dallas TX 75084</div>
</div>
</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
<div class="text-muted">Lorem ipsum dolor</div>
</td>
<td>
First Line Text
</td>
<td>
<div class="action-items-wrapper">
<div class="action-item">
<i class="fa fa-pencil action-icon" aria-hidden="true"></i>
</div>
<div class="action-item">
<i class="fa fa-trash action-icon" aria-hidden="true"></i>
</div>
<div class="action-item raul-simple-dropdown dropdown dropleft">
<a href="#" data-toggle="dropdown" class="action-icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="pagination-wrapper row align-items-center">
<div class="pagination-show-entries col">
Show
<div class="raul-dropdown-select dropdown-no-border dropdown-sm px-2">
<div class="dropdown-toggle">
<div class="dropdown-toggle-content">
<span class="dropdown-title">10</span>
<i class="fa fa-chevron-down dropdown-arrow" aria-hidden="true"></i>
</div>
</div>
<div class="dropdown-menu">
<div class="dropdown-body">
<div class="dropdown-group">
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">10</span>
<input
type="radio"
name="form-style-second-section"
value="10"
data-text="10"
checked
>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">15</span>
<input
type="radio"
name="form-style-second-section"
value="15"
data-text="15"
>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">20</span>
<input
type="radio"
name="form-style-second-section"
value="20"
data-text="20"
>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">25</span>
<input
type="radio"
name="form-style-second-section"
value="25"
data-text="25"
>
</label>
</div>
</div>
<div class="dropdown-row">
<div class="dropdown-item">
<label class="raul-radio-wrapper">
<span class="raul-form-input-text">30</span>
<input
type="radio"
name="form-style-second-section"
value="30"
data-text="30"
>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
entries
</div>
<div class="pagination-count col text-center">
<span class="pagination-count-from">1</span>-<span class="pagination-count-to">10</span>
of
<span class="pagination-count-of">90</span>
</div>
<div class="pagination-pages col text-right">
<i class="fa fa-angle-left go-to-page-icon" aria-hidden="true"></i> Page
<input
type="number"
name="page-number"
value="1"
min="1"
max="300"
class="pagination-page-number"
> of
<span class="pagination-total-pages"> 300</span>
<i class="fa fa-angle-right go-to-page-icon" aria-hidden="true"></i>
</div>
</div>
</div>