Flex table

src/components/enum-select.tsx

@@ -1,9 +1,9 @@
 import { } from 'react'
 
-export function EnumSelect({ name, entries, value }: { name: string; entries: Record<string, string>, value?: string }): JSX.Element {
+export function EnumSelect({ name, entries, defaultValue }: { name: string; entries: Record<string, string>, defaultValue?: string }): JSX.Element {
   return (
-    <select id={name} name={name}>
+    <select id={name} name={name} defaultValue={defaultValue}>
-      {Object.entries(entries).map(([v, name]) => <option key={v} value={v} selected={v == value}>{name}</option>)}
+      {Object.entries(entries).map(([v, name]) => <option key={v} value={v}>{name}</option>)}
     </select>
   );
 }

src/components/task-row.tsx

@@ -2,15 +2,30 @@ import { useState } from 'react'
 import { taskTypes, taskStatuses } from './consts';
 import { EnumSelect } from './enum-select';
 
-export function TaskRow({ task, updateTask }: { task: TodoTask, updateTask: (task: TodoTask) => void }): JSX.Element {
+export function TaskRow({ task }: { task: TodoTask, updateTask: (task: TodoTask) => void }): JSX.Element {
   const [edit, setEdit] = useState(false);
 
-  return edit ? (
+  return (
-    <tr key={task.id}>
+    <div className="tr">
-      <td>{<EnumSelect entries={taskTypes} name="type" value={task.type} />}</td>
+      <div className="td">
-      <td><input type="text" name="title" value={task.title} /></td>
+        {edit
-      <td>{<EnumSelect entries={taskStatuses} name="status" value={task.status} />}</td>
+          ? <EnumSelect entries={taskTypes} name="type" defaultValue={task.type} />
-      <td className="text-center">
+          : taskTypes[task.type]
+        }
+      </div>
+      <div className="td">
+        {edit
+          ? <input type="text" name="title" defaultValue={task.title} />
+          : task.title}
+      </div>
+      <div className="td">
+        {edit
+          ? <EnumSelect entries={taskStatuses} name="status" defaultValue={task.status} />
+          : taskStatuses[task.status]
+        }
+      </div>
+      <div className="td">
+        {edit ? <>
           <button className="mr-3" onClick={() => {
             //updateTask()
             setEdit(false)
@@ -25,20 +40,15 @@ export function TaskRow({ task, updateTask }: { task: TodoTask, updateTask: (tas
               </polygon>
             </svg>
           </button>
-      </td>
+        </> : <>
-    </tr>
-  ) : (
-    <tr key={task.id}>
-      <td>{taskTypes[task.type]}</td>
-      <td>{task.title}</td>
-      <td>{taskStatuses[task.status]}</td>
-      <td>
           <button onClick={() => setEdit(true)}>
             <svg className="w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
               <path d="M 22.828125 3 C 22.316375 3 21.804562 3.1954375 21.414062 3.5859375 L 19 6 L 24 11 L 26.414062 8.5859375 C 27.195062 7.8049375 27.195062 6.5388125 26.414062 5.7578125 L 24.242188 3.5859375 C 23.851688 3.1954375 23.339875 3 22.828125 3 z M 17 8 L 5.2597656 19.740234 C 5.2597656 19.740234 6.1775313 19.658 6.5195312 20 C 6.8615312 20.342 6.58 22.58 7 23 C 7.42 23.42 9.6438906 23.124359 9.9628906 23.443359 C 10.281891 23.762359 10.259766 24.740234 10.259766 24.740234 L 22 13 L 17 8 z M 4 23 L 3.0566406 25.671875 A 1 1 0 0 0 3 26 A 1 1 0 0 0 4 27 A 1 1 0 0 0 4.328125 26.943359 A 1 1 0 0 0 4.3378906 26.939453 L 4.3632812 26.931641 A 1 1 0 0 0 4.3691406 26.927734 L 7 26 L 5.5 24.5 L 4 23 z"></path>
             </svg>
           </button>
-      </td>
+        </>
-    </tr>
+        }
-  )
+      </div>
+    </div>
+  );
 }

src/components/task-table.tsx

@@ -3,19 +3,15 @@ import { TaskRow } from './task-row';
 
 export function TaskTable({ tasks }: { tasks: TodoTasks }): JSX.Element {
   return (
-    <table className="w-full">
+    <div className="w-full">
-      <thead>
+      <div className="tr">
-        <tr>
+        <div className="td">Tipas</div>
-          <th>Tipas</th>
+        <div className="td">Pavadinimas</div>
-          <th>Pavadinimas</th>
+        <div className="td">Statusas</div>
-          <th>Statusas</th>
+        <div className="td">Veiksmai</div>
-          <th>Veiksmai</th>
+      </div>
-        </tr>
+      {tasks.map(task => <TaskRow key={task.id} task={task} updateTask={() => { }} />)}
-      </thead>
+    </div>
-      <tbody>
-        {tasks.map(task => <TaskRow task={task} updateTask={() => { }} />)}
-      </tbody>
-    </table>
   );
 }
 

src/index.css

@@ -3,6 +3,7 @@
 @tailwind utilities;
 
 @layer utilities {
+
   p,
   li {
     @apply my-4;
@@ -12,15 +13,44 @@
     @apply bg-neutral-100 dark:bg-neutral-900 cursor-pointer px-5 py-2 rounded-lg border border-gray-300 hover:border-indigo-500 transition-colors duration-700;
   }
 
-  th {
+  .tr {
-    @apply border-b dark:border-slate-600 pl-8 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left;
+    @apply flex border-b pb-3 border-slate-100 dark:border-slate-700 text-slate-500 dark:text-slate-400;
+
+    .td {
+      @apply pl-4 pt-4 content-center;
     }
 
-  td {
+    .td:nth-child(1) {
-    @apply border-b border-slate-100 dark:border-slate-700 p-4 pr-0 text-slate-500 dark:text-slate-400;
+      @apply flex-auto w-32;
     }
 
-  select, input {
+    .td:nth-child(2) {
+      @apply flex-auto w-64;
+    }
+
+    .td:nth-child(3) {
+      @apply flex-auto w-32;
+    }
+
+    .td:nth-child(4) {
+      @apply flex-auto w-16 flex justify-center;
+    }
+  }
+
+  .tr:first-child {
+    @apply dark:border-slate-600 text-slate-400 dark:text-slate-200;
+
+    .td {
+      @apply pt-0;
+    }
+  }
+
+  .tr:last-child {
+    @apply pb-0 border-b-0;
+  }
+
+  select,
+  input {
     @apply h-14 w-full rounded-lg border-0 px-3 py-4 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-500 focus:outline-none hover:ring-indigo-500 transition-shadow duration-700;
   }
 
@@ -32,7 +62,8 @@
     @apply rounded-t-xl;
   }
 
-  .accordion-title:last-child, .accordion-body:last-child {
+  .accordion-title:last-child,
+  .accordion-body:last-child {
     @apply border-b rounded-b-xl;
   }