Table updates

src/components/DataTable/DataTable.tsx

@@ -66,28 +66,58 @@ export function DataTableComponent({
 		editDisplayMode: 'row',
 		enableBottomToolbar: false,
 		enableToolbarInternalActions: false,
+		positionGlobalFilter: 'right',
 		onCreatingRowSave: handleCreateRow,
 		onEditingRowSave: handleEditRow,
 		getRowId: (row: any) => row.id,
 		initialState: {
-			showProgressBars: isFetching,
 			showLoadingOverlay: isLoading,
 			isLoading: isLoading,
 		},
 		state: {
-			showProgressBars: isFetching,
-			showLoadingOverlay: isLoading,
+			showLoadingOverlay: isFetching,
 			isLoading: isLoading,
+			columnVisibility: { id: false, categoryIndex: false },
+			showGlobalFilter: tableName !== 'Personalization',
 		},
+		mantineSearchTextInputProps: {},
 		mantinePaperProps: {
 			className: 'root',
 			style: {
-				height: '75vh',
-				overflow: 'scroll',
+				border: 'none',
+				boxShadow: 'none',
+			},
+		},
+		mantineTableContainerProps: {
+			style: {
+				maxHeight: '700px',
+				borderRadius: '20px',
+				backgroundColor: theme.searchColor,
+				backdropFilter: theme.backgroundImage === 'none' ? undefined : 'blur(20px)',
+				fontSize: '18px',
+			},
+		},
+		mantineTableHeadProps: {
+			style: {
+				fontSize: '18px',
+				backgroundColor: theme.primaryColor,
+				color: theme.accentColor,
+				opacity: 1,
+			},
+		},
+		mantineTableBodyRowProps: {
+			style: {
+				borderBottom: 'none',
+			},
+		},
+		displayColumnDefOptions: {
+			'mrt-row-actions': {
+				header: '',
+				minSize: 40,
 			},
 		},
 		renderRowActions: ({ row, table }) => (
-			<Flex gap='md'>
+			<Flex gap='xs'>
 				<ActionIcon
 					className={actionIconClasses.editButton}
 					classNames={actionIconClasses}