WIP groups tree table

app/ui/groups/table.tsx

@@ -6,6 +6,9 @@ import { Group, GroupSerializer } from '@/app/lib/group';
 import TableOfContents from '../components/table-of-contents';
 import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { AbstractApi } from '@/app/api/abstract-api';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
 
 export default function GroupsTable({ groups, onUpdate, onEdit }: {
   groups: Group[],
@@ -16,9 +19,19 @@ export default function GroupsTable({ groups, onUpdate, onEdit }: {
   const api = new AbstractApi<Group>();
   const serializer = new GroupSerializer();
 
+  const nodes:TreeNode[] = [];
+
+  const headers = ['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions'];
+
   return (
+    <>
+      <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+        { headers.map((header, index) => <Column key={index} field={header} header={header}></Column>)}
+     
+      </TreeTable>
+
       <TableOfContents
-      headers={['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions']}
+        headers={headers}
         caption='Groups'
         elements={groups}
         rowRender={(group) => (
@@ -56,5 +69,6 @@ export default function GroupsTable({ groups, onUpdate, onEdit }: {
           </tr>
         )}
       />
+    </>
   )
 }