ヘルスケアデータテーブル
ヘルスケアアプリケーションに適した、企業の青い色調の応答性が高く、ミニマリストのデータテーブルコンポーネント。ダーク モードのサポート、検索、および改ページ位置の自動修正が含まれます。アクセシビリティのためにセマンティックHTMLを利用します。
HTMLコード
<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden ring-1 ring-blue-100 dark:ring-blue-900">
<div class="px-4 py-5 sm:px-6">
<h2 class="text-xl sm:text-2xl font-bold leading-tight text-blue-800 dark:text-blue-200">Patient Records</h2>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">A list of all patients including their vital information and status.</p>
<div class="mt-4 flex flex-col sm:flex-row items-center justify-between space-y-3 sm:space-y-0 sm:space-x-4">
<div class="relative flex-grow w-full sm:w-auto">
<input type="text" placeholder="Search records..." class="block w-full pl-10 pr-2 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
</div>
<button type="button" class="w-full sm:w-auto px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
<svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
Add Patient
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-blue-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
Patient Name
</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
ID
</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
Last Visit
</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
Condition
</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
Status
</th>
<th scope="col" class="relative px-4 py-3">
<span class="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
<!-- Row 1 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Patient avatar">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Jane Cooper</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">PT-00123</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">2023-10-26</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">
Hypertension
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
Active
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
<a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
</td>
</tr>
<!-- Row 2 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Patient avatar">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Cameron Williamson</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">PT-00124</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">2023-09-15</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">
Diabetes
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
Active
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
<a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
</td>
</tr>
<!-- Row 3 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Patient avatar">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Esther Howard</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">PT-00125</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">2023-11-01</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
Asthma
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800 dark:bg-orange-800 dark:text-orange-100">
Pending
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
<a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
</td>
</tr>
<!-- Row 4 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Patient avatar">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Ralph Edwards</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">PT-00126</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">2023-08-20</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
Flu
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
Inactive
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
<a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
</td>
</tr>
<!-- Row 5 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/55.jpg" alt="Patient avatar">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Annette Black</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">PT-00127</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">2023-10-05</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">
Appendicitis
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">
Critical
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
<a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-4 py-3 sm:px-6 flex items-center justify-between flex-wrap border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
<div class="flex-1 flex justify-between sm:hidden">
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
Previous
</a>
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
Next
</a>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700 dark:text-gray-300">
Showing
<span class="font-medium">1</span>
to
<span class="font-medium">5</span>
of
<span class="font-medium">10</span>
results
</p>
</div>
<div>
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-current="page" class="z-10 bg-blue-50 dark:bg-blue-900 border-blue-500 text-blue-600 dark:text-blue-200 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
1
</a>
<a href="#" class="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
2
</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
</div>
</div>
</div>