Refactor

src/components/DataTable/columns/BookmarkColumns.tsx

@@ -0,0 +1,64 @@
+import type { MRT_ColumnDef } from 'mantine-react-table';
+import { useMemo } from 'react';
+
+export function BookmarkColumns(groups: any) {
+	const columns = useMemo<MRT_ColumnDef<any>[]>(
+		() => [
+			{
+				accessorFn: (row) => {
+					if (row.id) {
+						return `${row.id}`;
+					}
+					return '';
+				},
+				enableEditing: false,
+				id: 'id',
+				header: 'ID',
+				size: 50,
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.name) {
+						return `${row.name}`;
+					}
+					return '';
+				},
+				id: 'name',
+				header: 'Name',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.url) {
+						return `${row.url}`;
+					}
+					return '';
+				},
+				id: 'url',
+				header: 'Url',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.category) {
+						return `${row.category}`;
+					}
+					return '';
+				},
+				id: 'category',
+				header: 'Category',
+				editVariant: 'select',
+				mantineEditSelectProps: { data: groups },
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+		],
+		[groups],
+	);
+
+	return columns;
+}