diff --git a/frontend/src/components/backups/BackupManager.jsx b/frontend/src/components/backups/BackupManager.jsx
index f538d7da..1e4d4fb8 100644
--- a/frontend/src/components/backups/BackupManager.jsx
+++ b/frontend/src/components/backups/BackupManager.jsx
@@ -1,8 +1,9 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import {
ActionIcon,
Box,
Button,
+ Center,
FileInput,
Flex,
Group,
@@ -13,7 +14,6 @@ import {
Select,
Stack,
Switch,
- Table,
Text,
TextInput,
Tooltip,
@@ -31,6 +31,7 @@ import { notifications } from '@mantine/notifications';
import API from '../../api';
import ConfirmationDialog from '../ConfirmationDialog';
import useLocalStorage from '../../hooks/useLocalStorage';
+import { CustomTable, useTable } from '../tables/CustomTable';
// Convert 24h time string to 12h format with period
function to12Hour(time24) {
@@ -111,6 +112,112 @@ export default function BackupManager() {
const [displayTime, setDisplayTime] = useState('3:00');
const [timePeriod, setTimePeriod] = useState('AM');
+ const columns = useMemo(
+ () => [
+ {
+ header: 'Filename',
+ accessorKey: 'name',
+ size: 250,
+ cell: ({ cell }) => (
+
+ {cell.getValue()}
+
+ ),
+ },
+ {
+ header: 'Size',
+ accessorKey: 'size',
+ size: 100,
+ cell: ({ cell }) => (
+ {formatBytes(cell.getValue())}
+ ),
+ },
+ {
+ header: 'Created',
+ accessorKey: 'created',
+ size: 175,
+ cell: ({ cell }) => (
+ {formatDate(cell.getValue())}
+ ),
+ },
+ {
+ id: 'actions',
+ header: 'Actions',
+ size: 150,
+ },
+ ],
+ []
+ );
+
+ const renderHeaderCell = (header) => {
+ if (header.id === 'actions') {
+ return (
+
+ {header.column.columnDef.header}
+
+ );
+ }
+ return (
+
+ {header.column.columnDef.header}
+
+ );
+ };
+
+ const renderBodyCell = ({ cell, row }) => {
+ if (cell.column.id === 'actions') {
+ return (
+
+
+ handleDownload(row.original.name)}
+ loading={downloading === row.original.name}
+ disabled={downloading !== null}
+ >
+
+
+
+
+ handleRestoreClick(row.original)}
+ >
+
+
+
+
+ handleDeleteClick(row.original)}
+ >
+
+
+
+
+ );
+ }
+ return null;
+ };
+
+ const table = useTable({
+ columns,
+ data: backups,
+ allRowIds: backups.map((b) => b.name),
+ bodyCellRenderFns: {
+ actions: renderBodyCell,
+ },
+ headerCellRenderFns: {
+ name: renderHeaderCell,
+ size: renderHeaderCell,
+ created: renderHeaderCell,
+ actions: renderHeaderCell,
+ },
+ });
+
const loadBackups = async () => {
setLoading(true);
try {
@@ -483,66 +590,9 @@ export default function BackupManager() {
No backups found. Create one to get started.
) : (
-
-
-
- Filename
- Size
- Created
- Actions
-
-
-
- {backups.map((backup) => (
-
-
-
- {backup.name}
-
-
-
- {formatBytes(backup.size)}
-
-
- {formatDate(backup.created)}
-
-
-
-
- handleDownload(backup.name)}
- loading={downloading === backup.name}
- disabled={downloading !== null}
- >
-
-
-
-
- handleRestoreClick(backup)}
- >
-
-
-
-
- handleDeleteClick(backup)}
- >
-
-
-
-
-
-
- ))}
-
-
+
+
+
)}