Styled Homepage

src/DataTable/columns/CategoryColumns.tsx

@@ -0,0 +1,67 @@
+import type { MRT_ColumnDef } from "mantine-react-table";
+import { useMemo } from "react";
+
+export default function CategoryColumns() {
+    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, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+            {
+				accessorFn: (row) => {
+					if (row.category_name) {
+						return `${row.category_name}`;
+					}
+						return "";
+				},
+				id: "category_name",
+				header: "Name",
+				size: 50,
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+            {
+				accessorFn: (row) => {
+					if (row.category_index > -1) {
+						return `${row.category_index}`;
+					}
+						return "";
+				},
+				enableEditing: false,
+				id: "category_index",
+				header: "Index",
+				size: 50,
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+            {
+				accessorFn: (row) => {
+					if (row.column_filter) {
+						return `${row.column_filter}`;
+					}
+						return "";
+				},
+				id: "column_filter",
+				header: "Filter Name",
+				size: 50,
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+		],
+		[],
+	);
+
+    return columns;
+}
+