Improved the table

src/components/PermissionList.tsx

@@ -1,38 +1,34 @@
 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 {convertCamelCaseToReadable} from "@/utils/string";
 
 interface Props {
-  permissions: Permission[]
+	permissions: Permission[];
 }
 
 const columnHelper = createColumnHelper<Permission>();
 
 const defaultColumns = [
-  columnHelper.accessor('type', {
+	columnHelper.accessor("type", {
 		header: () => <span>Type</span>,
 		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}`}
+				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) {
-  
 	const table = useReactTable({
 		data: permissions,
 		columns: defaultColumns,
 		getCoreRowModel: getCoreRowModel(),
-
+	});
-  })
 	return (
 		<div className="w-full">
 			<div className="w-full flex flex-col gap-2">
@@ -42,12 +38,7 @@ export default function PermissionList({permissions}: Props) {
 							<tr key={headerGroup.id}>
 								{headerGroup.headers.map((header) => (
 									<th className="py-4 px-4 text-left" key={header.id}>
-                      {header.isPlaceholder
+										{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
 									</th>
 								))}
 							</tr>
@@ -55,16 +46,10 @@ export default function PermissionList({permissions}: Props) {
 					</thead>
 					<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" key={row.id}>
-                  className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
-                  key={row.id}
-                >
 								{row.getVisibleCells().map((cell) => (
 									<td className="px-4 py-2 items-center w-fit" key={cell.id}>
-                      {flexRender(
+										{flexRender(cell.column.columnDef.cell, cell.getContext())}
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
 									</td>
 								))}
 							</tr>
@@ -73,5 +58,5 @@ export default function PermissionList({permissions}: Props) {
 				</table>
 			</div>
 		</div>
-  )
+	);
 }