bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 8 Actions Packages Projects Releases Wiki Activity

Render groups using a tree table #146

Merged
bustikiller merged 2 commits from groups-tree-table into main 2024-12-10 20:00:47 +00:00
Conversation 0 Commits 2 Files Changed 2 +53 -39
1 changed files with 53 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2b0fab797e - Show all commits

16
app/ui/groups/table.tsx
View File

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