MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Styling data table component

Browse Source
This commit is contained in:
Hafid Nur
2025-03-27 16:29:09 +07:00
parent cafdb29024
commit a76bd89ec1
3 changed files with 68 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/ui/src/index.css
+36 -16
View File
@@ -1,19 +1,21 @@
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import 'tailwindcss';
@source "../../../libs/ui/**/*.{ts,tsx}";
@theme {
--color-primary-50: #f0f8ff;
--color-primary-100: #e1f0fd;
--color-primary-200: #b8e1f8;
--color-primary-300: #a1d4f0;
--color-primary-400: #4aa4da;
--color-primary-500: #1a8ce6;
--color-primary-600: #1673c7;
--color-primary-700: #0f5ca5;
--color-primary-800: #0a4780;
--color-primary-900: #04305d;
--color-primary-200: #bce1fb;
--color-primary-300: #81cbf8;
--color-primary-400: #3eb0f2;
--color-primary-500: #23a1eb;
--color-primary-600: #0877c1;
--color-primary-700: #085f9c;
--color-primary-800: #0b5181;
--color-primary-900: #0f446b;
--color-primary-950: #0a2b47;
--color-neutral-50: #f7f7f7;
--color-neutral-50: #f6f6f6;
--color-neutral-100: #e7e7e7;
--color-neutral-200: #d0d0d0;
--color-neutral-300: #b7b7b7;
@@ -23,6 +25,7 @@
--color-neutral-700: #4a4a4a;
--color-neutral-800: #3a3a3a;
--color-neutral-900: #2f2f2f;
--color-neutral-950: #2b2b2b;
--color-success-50: #e7f2ee;
--color-success-100: #cde6dd;
@@ -79,16 +82,28 @@
--font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
--text-h1: 3rem; /* ~48px */
--text-h2: 2.4rem; /* ~38.4px */
--text-h3: 1.92rem; /* ~30.72px */
--text-p1: 1.54rem; /* ~24.58px */
--text-p2: 1.23rem; /* ~19.68px */
--text-label1: 0.98rem; /* ~15.74px */
--text-label2: 0.78rem; /* ~12.59px */
--text-h1: 3.833rem;
/* ~46px */
--text-h2: 3.083rem;
/* ~37px */
--text-h3: 2.417rem;
/* ~29px */
--text-p1: 1.917rem;
/* ~23px */
--text-p2: 1.583rem;
/* ~19px */
--text-p3: 1.25rem;
/* 15px */
--text-label1: 1rem;
/* 12px */
--text-label2: 0.833rem;
/* ~10px */
--text-label3: 0.677rem;
/* ~8px */
}
@layer base {
*,
::after,
::before,
@@ -102,13 +117,16 @@
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--color-neutral-50);
}
::-webkit-scrollbar-thumb {
background: #cccccc;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral-300);
}
@@ -116,5 +134,7 @@
html {
font-family: 'Bai Jamjuree', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 1.2;
}
}
libs/ui/src/organisms/datatable/datatable.stories.tsx
+7
View File
@@ -51,6 +51,13 @@ Default.args = {
phone: '987-654-3210',
address: '456 Elm St',
},
{
id: 3,
name: 'John Smith',
email: 'johns@example.com',
phone: '456-789-1230',
address: '789 Cedar St',
},
],
onEdit: (id: number) => console.log('Edit item with id:', id),
};
libs/ui/src/organisms/datatable/datatable.tsx
+25 -23
View File
@@ -14,47 +14,49 @@ interface DataTableProps {
}
export const DataTable: FC<DataTableProps> = ({
// Exporting DataTableProps for use in stories
data,
onEdit,
}): ReactElement => {
return (
<div className="w-full overflow-x-auto">
<table className="w-full min-w-full">
<thead>
<tr className="border-b border-gray-200">
<th className="p-4 text-left">
<table className="w-full min-w-full text-base">
<thead className="bg-primary-50 mb-3">
<tr>
<th className="py-3 px-5 text-left font-normal rounded-l-lg">
<input type="checkbox" className="rounded" />
</th>
<th className="p-4 text-left">No.</th>
<th className="p-4 text-left">Nama Lengkap</th>
<th className="p-4 text-left">Email</th>
<th className="p-4 text-left">Nomor Telp</th>
<th className="p-4 text-left">Alamat Pengiriman</th>
<th className="p-4 text-left">Action</th>
<th className="py-3 px-5 text-left font-normal">No.</th>
<th className="py-3 px-5 text-left font-normal">Nama Lengkap</th>
<th className="py-3 px-5 text-left font-normal">Email</th>
<th className="py-3 px-5 text-left font-normal">Nomor Telp</th>
<th className="py-3 px-5 text-left font-normal">
Alamat Pengiriman
</th>
<th className="py-3 px-5 text-left font-normal rounded-r-lg">
Action
</th>
</tr>
</thead>
<tbody>
<tbody className="mt-3">
{data.map((item, index) => (
<tr
key={item.id}
className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}
className={index % 2 === 0 ? 'bg-white' : 'bg-primary-100'}
>
<td className="p-4">
<td className="py-3 px-5 rounded-l-lg">
<input type="checkbox" className="rounded" />
</td>
<td className="p-4">{index + 1}</td>
<td className="p-4">{item.name}</td>
<td className="p-4">{item.email}</td>
<td className="p-4">{item.phone}</td>
<td className="p-4">{item.address}</td>
<td className="p-4">
<td className="py-3 px-5">{index + 1}</td>
<td className="py-3 px-5">{item.name}</td>
<td className="py-3 px-5 truncate">{item.email}</td>
<td className="py-3 px-5">{item.phone}</td>
<td className="py-3 px-5 truncate">{item.address}</td>
<td className="py-3 px-5 rounded-r-lg">
<Button
variant="primary"
size="sm"
onClick={() => onEdit(item.id)}
className="flex items-center gap-1"
className="flex items-center gap-2"
>
<EditOutlined /> Edit
</Button>
@@ -67,4 +69,4 @@ export const DataTable: FC<DataTableProps> = ({
);
};
export default DataTable; // Default export of DataTable component
export default DataTable;