feat: Styling data table component

libs/ui/src/index.css

@@ -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-200: #bce1fb;
-  --color-primary-300: #a1d4f0;
+  --color-primary-300: #81cbf8;
-  --color-primary-400: #4aa4da;
+  --color-primary-400: #3eb0f2;
-  --color-primary-500: #1a8ce6;
+  --color-primary-500: #23a1eb;
-  --color-primary-600: #1673c7;
+  --color-primary-600: #0877c1;
-  --color-primary-700: #0f5ca5;
+  --color-primary-700: #085f9c;
-  --color-primary-800: #0a4780;
+  --color-primary-800: #0b5181;
-  --color-primary-900: #04305d;
+  --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-h1: 3.833rem;
-  --text-h2: 2.4rem; /* ~38.4px */
+  /* ~46px */
-  --text-h3: 1.92rem; /* ~30.72px */
+  --text-h2: 3.083rem;
-  --text-p1: 1.54rem; /* ~24.58px */
+  /* ~37px */
-  --text-p2: 1.23rem; /* ~19.68px */
+  --text-h3: 2.417rem;
-  --text-label1: 0.98rem; /* ~15.74px */
+  /* ~29px */
-  --text-label2: 0.78rem; /* ~12.59px */
+  --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

@@ -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

@@ -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">
+      <table className="w-full min-w-full text-base">
-        <thead>
+        <thead className="bg-primary-50 mb-3">
-          <tr className="border-b border-gray-200">
+          <tr>
-            <th className="p-4 text-left">
+            <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="py-3 px-5 text-left font-normal">No.</th>
-            <th className="p-4 text-left">Nama Lengkap</th>
+            <th className="py-3 px-5 text-left font-normal">Nama Lengkap</th>
-            <th className="p-4 text-left">Email</th>
+            <th className="py-3 px-5 text-left font-normal">Email</th>
-            <th className="p-4 text-left">Nomor Telp</th>
+            <th className="py-3 px-5 text-left font-normal">Nomor Telp</th>
-            <th className="p-4 text-left">Alamat Pengiriman</th>
+            <th className="py-3 px-5 text-left font-normal">
-            <th className="p-4 text-left">Action</th>
+              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="py-3 px-5">{index + 1}</td>
-              <td className="p-4">{item.name}</td>
+              <td className="py-3 px-5">{item.name}</td>
-              <td className="p-4">{item.email}</td>
+              <td className="py-3 px-5 truncate">{item.email}</td>
-              <td className="p-4">{item.phone}</td>
+              <td className="py-3 px-5">{item.phone}</td>
-              <td className="p-4">{item.address}</td>
+              <td className="py-3 px-5 truncate">{item.address}</td>
-              <td className="p-4">
+              <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;