Skip to content

Instantly share code, notes, and snippets.

@cungobu
Created April 10, 2023 19:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cungobu/ac85dcdb4891b6e08f41ee1e20029d65 to your computer and use it in GitHub Desktop.
Save cungobu/ac85dcdb4891b6e08f41ee1e20029d65 to your computer and use it in GitHub Desktop.
Nested Datatable
<div id="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
<div class="table-responsive">
<div class="dataTables_scroll">
<div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
<div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 1470.75px; padding-right: 0px;">
<table class="table table-striped table-row-bordered fs-6 text-gray-800 gs-3 dataTable no-footer" style="margin-left: 0px; width: 1470.75px;">
<thead>
<tr>
<th class="pe-0 w-25px text-start sorting_disabled fw-bold" rowspan="1" colspan="1" style="width: 25px;" aria-label="" data-column-index="0"></th>
<th class="min-w-100px sorting fw-bold sorting_asc" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 109.75px;" aria-label="Code: activate to sort column descending" data-column-index="1" aria-sort="ascending">Code</th>
<th class="min-w-200px sorting fw-bold" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 209.75px;" aria-label="Care Program: activate to sort column ascending" data-column-index="2">Care Program</th>
<th class="min-w-200px sorting fw-bold" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 209.75px;" aria-label="Treatment: activate to sort column ascending" data-column-index="3">Treatment</th>
<th class="min-w-200px sorting fw-bold" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 209.75px;" aria-label="Type: activate to sort column ascending" data-column-index="4">Type</th>
<th class="min-w-200px sorting fw-bold" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 209.75px;" aria-label="Category: activate to sort column ascending" data-column-index="5">Category</th>
<th class="min-w-200px sorting fw-bold" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 209.75px;" aria-label="Qualifications: activate to sort column ascending" data-column-index="6">Qualifications</th>
<th class="sorting fw-bold" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 42.9531px;" aria-label="Active On: activate to sort column ascending" data-column-index="7">Active On</th>
<th class="sorting fw-bold" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 57.4062px;" aria-label="Status: activate to sort column ascending" data-column-index="8">Status</th>
<th class="sorting fw-bold" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 79.6406px;" aria-label="Last Update: activate to sort column ascending" data-column-index="9">Last Update</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%;">
<table id="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" class="table table-striped table-row-bordered fs-6 text-gray-800 gs-3 dataTable no-footer blockui" aria-describedby="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8_info" style="width: 1346px;">
<thead>
<tr style="height: 0px;">
<th class="pe-0 w-25px text-start sorting_disabled fw-bold" rowspan="1" colspan="1" style="width: 25px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="" data-column-index="0">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;"></div>
</th>
<th class="min-w-100px sorting sorting_asc fw-bold" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 109.75px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-sort="ascending" aria-label="Code: activate to sort column descending" data-column-index="1">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Code</div>
</th>
<th class="min-w-200px sorting fw-bold" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 209.75px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Care Program: activate to sort column ascending" data-column-index="2">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Care Program</div>
</th>
<th class="min-w-200px sorting fw-bold" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 209.75px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Treatment: activate to sort column ascending" data-column-index="3">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Treatment</div>
</th>
<th class="min-w-200px sorting fw-bold" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 209.75px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Type: activate to sort column ascending" data-column-index="4">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Type</div>
</th>
<th class="min-w-200px sorting fw-bold" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 209.75px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Category: activate to sort column ascending" data-column-index="5">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Category</div>
</th>
<th class="min-w-200px sorting fw-bold" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 209.75px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Qualifications: activate to sort column ascending" data-column-index="6">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Qualifications</div>
</th>
<th class="sorting fw-bold" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 42.9531px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Active On: activate to sort column ascending" data-column-index="7">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Active On</div>
</th>
<th class="sorting fw-bold" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 57.4062px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Status: activate to sort column ascending" data-column-index="8">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Status</div>
</th>
<th class="sorting fw-bold" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" rowspan="1" colspan="1" style="width: 79.6406px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Last Update: activate to sort column ascending" data-column-index="9">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Last Update</div>
</th>
</tr>
</thead>
<tbody>
<tr class="odd dt-hasChild">
<td class=" pe-0 w-25px text-start">
<button type="button" class="btn btn-sm btn-icon btn-light btn-active-light-primary toggle h-25px w-25px sub-table-toggle active" data-bs-toggle="button" aria-pressed="true">
<span class="svg-icon svg-icon-3 m-0 toggle-off">
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="11" y="18" width="12" height="2" rx="1" transform="rotate(-90 11 18)" fill="currentColor"></rect>
<rect x="6" y="11" width="12" height="2" rx="1" fill="currentColor"></rect>
</svg>
</span>
<span class="svg-icon svg-icon-3 m-0 toggle-on">
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="6" y="11" width="12" height="2" rx="1" fill="currentColor"></rect>
</svg>
</span>
</button>
</td>
<td class="min-w-100px sorting_1">
<a href="/Treatment/Edit?id=35719e13-d69d-42ed-a733-44c3e57d1996" class="fw-bold">TRM119379</a>
</td>
<td class=" min-w-200px"></td>
<td class=" min-w-200px">28 Days Client Review</td>
<td class=" min-w-200px"></td>
<td class=" min-w-200px">Clinical</td>
<td class=" min-w-200px">RN</td>
<td></td>
<td>
<span class="badge badge-success fw-bolder">Active</span>
</td>
<td>09/05/2021</td>
</tr>
<tr>
<td></td>
<td colspan="9" class="p-0">
<div id="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
<div class="table-responsive">
<div class="dataTables_scroll">
<div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
<div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 1441px; padding-right: 5px;">
<table class="table table-striped table-row-bordered fs-6 text-gray-800 gs-3 dataTable no-footer" style="margin-left: 0px; width: 1441px;">
<thead>
<tr>
<th class="min-w-150px sorting fw-bold sorting_asc" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" rowspan="1" colspan="1" data-column-index="0" style="width: 364.969px;" aria-sort="ascending" aria-label="Client: activate to sort column descending">Client</th>
<th class="min-w-150px sorting fw-bold" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" rowspan="1" colspan="1" data-column-index="1" style="width: 270.094px;" aria-label="Care Provider: activate to sort column ascending">Care Provider</th>
<th class="min-w-150px sorting fw-bold" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" rowspan="1" colspan="1" data-column-index="2" style="width: 461.844px;" aria-label="Repeating: activate to sort column ascending">Repeating</th>
<th class="min-w-150px sorting fw-bold" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" rowspan="1" colspan="1" data-column-index="3" style="width: 295.344px;" aria-label="Last Update: activate to sort column ascending">Last Update</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%;">
<table class="table table-striped table-row-bordered fs-6 text-gray-800 gs-3 dataTable no-footer blockui min-h-50px" id="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" aria-describedby="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-_info" style="width: 1442px;">
<thead>
<tr style="height: 0px;">
<th class="min-w-150px sorting fw-bold sorting_asc" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" rowspan="1" colspan="1" data-column-index="0" style="width: 364.969px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-sort="ascending" aria-label="Client: activate to sort column descending">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Client</div>
</th>
<th class="min-w-150px sorting fw-bold" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" rowspan="1" colspan="1" data-column-index="1" style="width: 270.094px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Care Provider: activate to sort column ascending">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Care Provider</div>
</th>
<th class="min-w-150px sorting fw-bold" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" rowspan="1" colspan="1" data-column-index="2" style="width: 461.844px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Repeating: activate to sort column ascending">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Repeating</div>
</th>
<th class="min-w-150px sorting fw-bold" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" rowspan="1" colspan="1" data-column-index="3" style="width: 295.344px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Last Update: activate to sort column ascending">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Last Update</div>
</th>
</tr>
</thead>
<tbody>
<tr id="c64830a6-98fe-4d20-9eed-d04c6057d94c" class="odd">
<td class="min-w-150px sorting_1">long-first-name long-last-name</td>
<td class=" min-w-150px">NSW Admin</td>
<td class=" min-w-150px">FREQ=DAILY; BYHOUR=9</td>
<td class=" min-w-150px">2021-07-30T16:25:39.817</td>
</tr>
<tr id="4542839d-dbb7-47ac-afd9-f168740fd230" class="even">
<td class="min-w-150px sorting_1">long-first-name long-last-name</td>
<td class=" min-w-150px">NSW Admin</td>
<td class=" min-w-150px">FREQ=DAILY; BYHOUR=14</td>
<td class=" min-w-150px">2021-07-30T16:25:40.097</td>
</tr>
<tr id="60de9471-8b8e-449c-be9d-fea73b056959" class="odd">
<td class="min-w-150px sorting_1">long-first-name long-last-name</td>
<td class=" min-w-150px">NSW Admin</td>
<td class=" min-w-150px">FREQ=DAILY; BYHOUR=8; BYMINUTE=0</td>
<td class=" min-w-150px">2021-07-30T16:25:40.347</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">
<div class="dataTables_info" id="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-_info" role="status" aria-live="polite">Showing 1 to 3 of 3 records</div>
</div>
<div class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"></div>
</div>
</div>
</td>
</tr>
<tr class="even dt-hasChild">
<td class=" pe-0 w-25px text-start">
<button type="button" class="btn btn-sm btn-icon btn-light btn-active-light-primary toggle h-25px w-25px sub-table-toggle active" data-bs-toggle="button" aria-pressed="true">
<span class="svg-icon svg-icon-3 m-0 toggle-off">
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="11" y="18" width="12" height="2" rx="1" transform="rotate(-90 11 18)" fill="currentColor"></rect>
<rect x="6" y="11" width="12" height="2" rx="1" fill="currentColor"></rect>
</svg>
</span>
<span class="svg-icon svg-icon-3 m-0 toggle-on">
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="6" y="11" width="12" height="2" rx="1" fill="currentColor"></rect>
</svg>
</span>
</button>
</td>
<td class="min-w-100px sorting_1">
<a href="/Treatment/Edit?id=8071eb73-17fd-4209-91ae-b628bb7e018e" class="fw-bold">TRM119380</a>
</td>
<td class=" min-w-200px"></td>
<td class=" min-w-200px">Carer Strain Index</td>
<td class=" min-w-200px"></td>
<td class=" min-w-200px">Clinical</td>
<td class=" min-w-200px">RN</td>
<td></td>
<td>
<span class="badge badge-success fw-bolder">Active</span>
</td>
<td>28/05/2021</td>
</tr>
<tr>
<td></td>
<td colspan="9" class="p-0">
<div id="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
<div class="table-responsive">
<div class="dataTables_scroll">
<div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
<div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 1446px; padding-right: 0px;">
<table class="table table-striped table-row-bordered fs-6 text-gray-800 gs-3 dataTable no-footer" style="margin-left: 0px; width: 1446px;">
<thead>
<tr>
<th class="min-w-150px sorting fw-bold sorting_asc" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" rowspan="1" colspan="1" data-column-index="0" style="width: 358.469px;" aria-sort="ascending" aria-label="Client: activate to sort column descending">Client</th>
<th class="min-w-150px sorting fw-bold" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" rowspan="1" colspan="1" data-column-index="1" style="width: 264.828px;" aria-label="Care Provider: activate to sort column ascending">Care Provider</th>
<th class="min-w-150px sorting fw-bold" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" rowspan="1" colspan="1" data-column-index="2" style="width: 480.984px;" aria-label="Repeating: activate to sort column ascending">Repeating</th>
<th class="min-w-150px sorting fw-bold" tabindex="0" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" rowspan="1" colspan="1" data-column-index="3" style="width: 292.969px;" aria-label="Last Update: activate to sort column ascending">Last Update</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%;">
<table class="table table-striped table-row-bordered fs-6 text-gray-800 gs-3 dataTable no-footer blockui min-h-50px" id="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" aria-describedby="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-_info" style="width: 1449px;">
<thead>
<tr style="height: 0px;">
<th class="min-w-150px sorting fw-bold sorting_asc" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" rowspan="1" colspan="1" data-column-index="0" style="width: 358.469px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-sort="ascending" aria-label="Client: activate to sort column descending">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Client</div>
</th>
<th class="min-w-150px sorting fw-bold" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" rowspan="1" colspan="1" data-column-index="1" style="width: 264.828px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Care Provider: activate to sort column ascending">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Care Provider</div>
</th>
<th class="min-w-150px sorting fw-bold" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" rowspan="1" colspan="1" data-column-index="2" style="width: 480.984px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Repeating: activate to sort column ascending">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Repeating</div>
</th>
<th class="min-w-150px sorting fw-bold" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-" rowspan="1" colspan="1" data-column-index="3" style="width: 292.969px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Last Update: activate to sort column ascending">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Last Update</div>
</th>
</tr>
</thead>
<tbody>
<tr id="47974321-cf00-42f5-9b14-6a8817ea7602" class="odd">
<td class="min-w-150px sorting_1">long-first-name long-last-name</td>
<td class=" min-w-150px">NSW Admin</td>
<td class=" min-w-150px">FREQ=DAILY; BYHOUR=20; BYMINUTE=45</td>
<td class=" min-w-150px">2021-07-30T16:25:40.597</td>
</tr>
<tr id="31387d7a-3c67-44bd-9837-c7d8e221a026" class="even">
<td class="min-w-150px sorting_1">long-first-name long-last-name</td>
<td class=" min-w-150px">NSW Admin</td>
<td class=" min-w-150px">FREQ=DAILY; BYHOUR=9</td>
<td class=" min-w-150px">2021-07-30T16:25:40.83</td>
</tr>
<tr id="ef716558-b113-492a-aeb3-cc8388dfe35e" class="odd">
<td class="min-w-150px sorting_1">long-first-name long-last-name</td>
<td class=" min-w-150px">NSW Admin</td>
<td class=" min-w-150px">FREQ=DAILY; BYHOUR=14</td>
<td class=" min-w-150px">2021-07-30T16:25:41.143</td>
</tr>
<tr id="e2fb54ea-a458-4221-941b-df587b5bdc79" class="even">
<td class="min-w-150px sorting_1">long-first-name long-last-name</td>
<td class=" min-w-150px">NSW Admin</td>
<td class=" min-w-150px">FREQ=DAILY; BYHOUR=8; BYMINUTE=0</td>
<td class=" min-w-150px">2021-07-30T16:25:41.427</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">
<div class="dataTables_info" id="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8-sub-table-_info" role="status" aria-live="polite">Showing 1 to 4 of 4 records</div>
</div>
<div class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">
<div class="dataTables_length" id="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8_length">
<label>
<select name="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8_length" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" class="form-select form-select-sm form-select-solid">
<option value="10">10</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
</label>
</div>
<div class="dataTables_info" id="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8_info" role="status" aria-live="polite">Showing 1 to 50 of 57 records</div>
</div>
<div class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
<div class="dataTables_paginate paging_simple_numbers" id="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8_paginate">
<ul class="pagination">
<li class="paginate_button page-item previous disabled" id="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8_previous">
<a href="#" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" data-dt-idx="0" tabindex="0" class="page-link">
<i class="previous"></i>
</a>
</li>
<li class="paginate_button page-item active">
<a href="#" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" data-dt-idx="1" tabindex="0" class="page-link">1</a>
</li>
<li class="paginate_button page-item ">
<a href="#" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" data-dt-idx="2" tabindex="0" class="page-link">2</a>
</li>
<li class="paginate_button page-item next" id="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8_next">
<a href="#" aria-controls="table-filter-component-439661bb-44b8-424e-b218-51b7a77bc8c8" data-dt-idx="3" tabindex="0" class="page-link">
<i class="next"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment