Basic
Use a circle avatar to represent a person.
| Date Submitted | Requested by | Submitted by | Product | Delivery Method | Status |
|---|---|---|---|---|---|
| 29/03/2023 | Dr. Robert Greene | Suhas Das | Gabapentin | By mail | Pending |
| 29/03/2023 | Dr. Emily Carter | James Miller | Gabapentin | In person | Closed |
| 29/03/2023 | Dr. Emily Carter | James Miller | Gabapentin | In person | Open |
Data table
Basic example of data table
https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css
https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js
window.addEventListener('load', function () {
const dataSet = [
{
ID: 12302835,
NAME: 'DR. COHEN, DEIRDRE',
CUST_TYPE:
'\u003Cdiv class="prx-avatar-box prx-avatar-box-circle prx-avatar-box-type-3"
data-toggle="prx-tooltip" data-placement="top" data-title="Doctor"\u003E\n \u003Cspan
class="prx-avatar-icon"\u003E\n \u003Ci class="fa-regular
fa-stethoscope"\u003E\u003C/i\u003E\n \u003C/span\u003E\n\t\t\t\t\t\t\u003C/div\u003E',
}
];
new DataTable('#dataTableExample', {
columns: [
{ data: 'ID', title: '' },
{ data: 'NAME', title: 'Name' },
{ data: 'CUST_TYPE', title: 'Icon' },
],
data: dataSet,
columnDefs: [
{
targets: 0,
checkboxes: {
selectRow: true,
},
},
],
dom: '<"table-top"irf><"table-box"t><"table-info"lp>',
stripeClasses: [],
select: {
style: 'multi',
},
order: [[1, 'asc']],
language: {
// lengthMenu: '_MENU_',
zeroRecords: 'No Data Found',
infoEmpty: 'No records available',
infoFiltered: '(filtered from _MAX_ total records)',
searchPlaceholder: 'Search',
search: '',
},
fixedHeader: true,
});
});