devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved the table

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-07-30 23:22:30 +01:00
parent 4347d0cabb
commit 9b37b60be0
1 changed files with 51 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/components/PermissionList.tsx
View File

@@ -1,77 +1,62 @@
import { Permission } from "@/interfaces/permissions"; import {Permission} from "@/interfaces/permissions";
import { import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
createColumnHelper,
flexRender,
getCoreRowModel,
useReactTable,
} from "@tanstack/react-table";
import Link from "next/link"; import Link from "next/link";
import {convertCamelCaseToReadable} from "@/utils/string";
interface Props {
interface Props{ permissions: Permission[];
permissions: Permission[]
} }
const columnHelper = createColumnHelper<Permission>(); const columnHelper = createColumnHelper<Permission>();
const defaultColumns = [ const defaultColumns = [
columnHelper.accessor('type', { columnHelper.accessor("type", {
header: () => <span>Type</span>, header: () => <span>Type</span>,
cell: ({row, getValue}) => ( cell: ({row, getValue}) => (
<Link href={`/permissions/${row.original.id}`} key={row.id} className="underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"> <Link
{getValue() as string} href={`/permissions/${row.original.id}`}
</Link> key={row.id}
) className="underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer">
}) {convertCamelCaseToReadable(getValue() as string)}
</Link>
),
}),
]; ];
export default function PermissionList({permissions}: Props) { export default function PermissionList({permissions}: Props) {
const table = useReactTable({
const table = useReactTable({ data: permissions,
data: permissions, columns: defaultColumns,
columns: defaultColumns, getCoreRowModel: getCoreRowModel(),
getCoreRowModel: getCoreRowModel(), });
return (
}) <div className="w-full">
return ( <div className="w-full flex flex-col gap-2">
<div className="w-full"> <table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
<div className="w-full flex flex-col gap-2"> <thead>
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full"> {table.getHeaderGroups().map((headerGroup) => (
<thead> <tr key={headerGroup.id}>
{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => (
<tr key={headerGroup.id}> <th className="py-4 px-4 text-left" key={header.id}>
{headerGroup.headers.map((header) => ( {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
<th className="py-4 px-4 text-left" key={header.id}> </th>
{header.isPlaceholder ))}
? null </tr>
: flexRender( ))}
header.column.columnDef.header, </thead>
header.getContext() <tbody className="px-2">
)} {table.getRowModel().rows.map((row) => (
</th> <tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
))} {row.getVisibleCells().map((cell) => (
</tr> <td className="px-4 py-2 items-center w-fit" key={cell.id}>
))} {flexRender(cell.column.columnDef.cell, cell.getContext())}
</thead> </td>
<tbody className="px-2"> ))}
{table.getRowModel().rows.map((row) => ( </tr>
<tr ))}
className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" </tbody>
key={row.id} </table>
> </div>
{row.getVisibleCells().map((cell) => ( </div>
<td className="px-4 py-2 items-center w-fit" key={cell.id}> );
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</div>
)
} }