TABLES
Tables
Bảng là thành phần giao diện hữu ích cho phép bạn trực quan hóa dữ liệu và sắp xếp dữ liệu theo cách rõ ràng. Nhờ đó, người dùng có thể duyệt nhiều thông tin cùng một lúc và thiết kế bảng tốt sẽ giúp bạn chăm sóc tính rõ ràng của dữ liệu.
Table cơ bản
| STT | Mã KH | Tên KH | Ngày sinh | SĐT | Địa chỉ | Giới tính | |
|---|---|---|---|---|---|---|---|
| 1 | KH255 | Khách hàng 1 | 15-12-2017 | 87956621 | TP HCM | nam | email@gmail.com |
<div class="card">
<div class="table-responsive">
<table class="table table-bordered table-vcenter text-nowrap table-text">
<thead>
<tr>
<th class="w-1">
STT
<!-- Download SVG icon from http://tabler.io/icons/icon/chevron-up -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm icon-thick icon-2">
<path d="M6 15l6 -6l6 6"></path>
</svg>
</th>
<th>Mã KH</th>
<th>Tên KH</th>
<th>Ngày sinh</th>
<th>SĐT</th>
<th>Địa chỉ</th>
<th>Giới tính</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td class="text-center">KH255</td>
<td>Khách hàng 1</td>
<td>15-12-2017</td>
<td>87956621</td>
<td>TP HCM</td>
<td>nam</td>
<td>email@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</div>Tables nhập thông tin
<div class="card">
<div class="">
<table class="table table-selectable table-vcenter text-nowrap table-input">
<thead>
<tr>
<th>Nhóm hàng</th>
<th>Hàng hóa</th>
<th>Số lượng</th>
<th>Đơn giá</th>
<th>Thành tiền</th>
<th>Chọn</th>
<th>Tùy chọn 1</th>
<th>Tùy chọn 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="form-control form-table" style="min-width:100px" type="text" autocomplete="off">
</td>
<td>
<select> name="" id="" class="form-select form-table"></select>
</td>
<td>
<textarea> name="" id="" class="form-control form-table" rows="1" autocomplete="off"></textarea>
</td>
<td>
<input class="form-control form-table" style="min-width:100px" type="text" autocomplete="off">
</td>
<td>
<input class="form-control form-table" style="min-width:100px" type="text" autocomplete="off">
</td>
<td> class="text-center">
<input type="checkbox" class="form-check-input">
</td>
<td class="text-center">
<div class="row gx-1 justify-content-center m-1" role="group" aria-label="Basic outlined example">
<div class="col-auto">
<button class="btn btn-icon btn-outline-primary " data-bs-toggle="tooltip" data-bs-placement="left" aria-label="Sửa" data-bs-original-title="Sửa">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path> stroke="none" d="M0 0h24v24H0z" fill="none">
</path>
<path> d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1">
</path>
<path> d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z">
</path>
<path> d="M16 5l3 3"></path>
</svg>
</button>
</div>
<div class="col-auto">
<button class="btn btn-icon btn-outline-danger btn-remove-bn" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Thay đổi trạng thái">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><
path stroke = "none" d = "M0 0h24v24H0z" fill =
"none" ><path> d="M4 7l16 0"></path>
<path> d="M10 11l0 6"></path>
<path> d="M14 11l0 6"></path>
<path> d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12">
</path>
<path> d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3">
</path>
</svg>
</button>
</div>
</div>
</td>
<td class="text-center">
<span class="dropdown">
<a href="#" class="link-secondary" data-bs-toggle="dropdown" aria-expanded="false"><!-- Download SVG icon from http://tabler-icons.io/i/dots -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path> stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path> d="M4 6l16 0"></path>
<path> d="M4 12l16 0"></path>
<path> d="M4 18l16 0"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" style="">
<button class="dropdown-item btn-lich-su text-azure" value="115882">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-history"><path> stroke="none" d="M0 0h24v24H0z" fill="none"></path><path> d="M12 8l0 4l2 2"></path><path> d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5"></path></svg>
Lịch sử điều trị
</button>
<button value="115882" class="dropdown-item btn-chuyen-khu text-blue">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-status-change"><path> stroke="none" d="M0 0h24v24H0z" fill="none"></path><path> d="M6 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path> d="M18 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path> d="M6 12v-2a6 6 0 1 1 12 0v2"></path><path> d="M15 9l3 3l3 -3"></path></svg>
Chuyển đơn vị điều trị
</button>
<button value="115882" class="dropdown-item btn-print-pdt text-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-printer"><path> stroke="none" d="M0 0h24v24H0z" fill="none"></path><path> d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2"></path><path> d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4"></path><path> d="M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z"></path></svg>
Xuất phiếu điều trị
</button>
<button value="115882" class="dropdown-item btn-quanlybacsi text-cyan">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-users-group"><path> stroke="none" d="M0 0h24v24H0z" fill="none"></path><path> d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path><path> d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1"></path><path> d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path><path> d="M17 10h2a2 2 0 0 1 2 2v1"></path><path> d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path><path> d="M3 13v-1a2 2 0 0 1 2 -2h2"></path></svg>
Quản lý bác sĩ
</button>
<button value="04.02675" class="dropdown-item btn-quanlybenhan text-dark">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-nurse"><path> stroke="none" d="M0 0h24v24H0z" fill="none"></path><path> d="M12 5c2.941 0 6.685 1.537 9 3l-2 11h-14l-2 -11c2.394 -1.513 6.168 -3.005 9 -3"></path><path> d="M10 12h4"></path><path> d="M12 10v4"></path></svg>
Quản lý bệnh án
</button>
<button value="115882" class="dropdown-item btn-ket-thuc text-yellow">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check"><path> stroke="none" d="M0 0h24v24H0z" fill="none"></path><path> d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path> d="M9 12l2 2l4 -4"></path></svg>
Kết thúc điều trị
</button>
<button value="115882" class="dropdown-item text-red btn-remove-bn text-red d-none">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path> stroke="none" d="M0 0h24v24H0z" fill="none">
</path>
<path> d="M4 7l16 0"></path>
<path> d="M10 11l0 6"></path>
<path> d="M14 11l0 6"></path>
<path> d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12">
</path>
<path> d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3">
</path>
</svg>
Xoá bệnh nhân
</button>
</div>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>