diff --git a/package.json b/package.json
index a97f004..90401ea 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"@mui/x-date-pickers": "^7.18.0",
"cookiejs": "^2.1.3",
"dayjs": "^1.11.13",
+ "material-react-table": "^3.0.1",
"pocketbase": "^0.21.5",
"react": "^18.3.1",
"react-dom": "^18.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 30151e6..a436859 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ dependencies:
dayjs:
specifier: ^1.11.13
version: 1.11.13
+ material-react-table:
+ specifier: ^3.0.1
+ version: 3.0.1(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@mui/icons-material@6.1.1)(@mui/material@6.1.1)(@mui/x-date-pickers@7.18.0)(react-dom@18.3.1)(react@18.3.1)
pocketbase:
specifier: ^0.21.5
version: 0.21.5
@@ -1114,6 +1117,45 @@ packages:
dev: true
optional: true
+ /@tanstack/match-sorter-utils@8.19.4:
+ resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
+ engines: {node: '>=12'}
+ dependencies:
+ remove-accents: 0.5.0
+ dev: false
+
+ /@tanstack/react-table@8.20.5(react-dom@18.3.1)(react@18.3.1):
+ resolution: {integrity: sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==}
+ engines: {node: '>=12'}
+ peerDependencies:
+ react: '>=16.8'
+ react-dom: '>=16.8'
+ dependencies:
+ '@tanstack/table-core': 8.20.5
+ react: 18.3.1
+ react-dom: 18.3.1(react@18.3.1)
+ dev: false
+
+ /@tanstack/react-virtual@3.10.6(react-dom@18.3.1)(react@18.3.1):
+ resolution: {integrity: sha512-xaSy6uUxB92O8mngHZ6CvbhGuqxQ5lIZWCBy+FjhrbHmOwc6BnOnKkYm2FsB1/BpKw/+FVctlMbEtI+F6I1aJg==}
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ dependencies:
+ '@tanstack/virtual-core': 3.10.6
+ react: 18.3.1
+ react-dom: 18.3.1(react@18.3.1)
+ dev: false
+
+ /@tanstack/table-core@8.20.5:
+ resolution: {integrity: sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==}
+ engines: {node: '>=12'}
+ dev: false
+
+ /@tanstack/virtual-core@3.10.6:
+ resolution: {integrity: sha512-1giLc4dzgEKLMx5pgKjL6HlG5fjZMgCjzlKAlpr7yoUtetVPELgER1NtephAI910nMwfPTHNyWKSFmJdHkz2Cw==}
+ dev: false
+
/@types/babel__core@7.20.5:
resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
dependencies:
@@ -1829,6 +1871,11 @@ packages:
function-bind: 1.1.2
dev: false
+ /highlight-words@1.2.2:
+ resolution: {integrity: sha512-Mf4xfPXYm8Ay1wTibCrHpNWeR2nUMynMVFkXCi4mbl+TEgmNOe+I4hV7W3OCZcSvzGL6kupaqpfHOemliMTGxQ==}
+ engines: {node: '>= 16', npm: '>= 8'}
+ dev: false
+
/hoist-non-react-statics@3.3.2:
resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
dependencies:
@@ -1968,6 +2015,31 @@ packages:
yallist: 3.1.1
dev: true
+ /material-react-table@3.0.1(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@mui/icons-material@6.1.1)(@mui/material@6.1.1)(@mui/x-date-pickers@7.18.0)(react-dom@18.3.1)(react@18.3.1):
+ resolution: {integrity: sha512-RP+bnpsOAH5j6zwP04u9HB37fyqbd6mVv9mkT4IUJC3e3gEqixZmkNdJMVM1ZVHoq7yIaM381xf22mpBVe0IaA==}
+ engines: {node: '>=16'}
+ peerDependencies:
+ '@emotion/react': '>=11.13'
+ '@emotion/styled': '>=11.13'
+ '@mui/icons-material': '>=6'
+ '@mui/material': '>=6'
+ '@mui/x-date-pickers': '>=7.15'
+ react: '>=18.0'
+ react-dom: '>=18.0'
+ dependencies:
+ '@emotion/react': 11.13.3(@types/react@18.3.9)(react@18.3.1)
+ '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.3.9)(react@18.3.1)
+ '@mui/icons-material': 6.1.1(@mui/material@6.1.1)(@types/react@18.3.9)(react@18.3.1)
+ '@mui/material': 6.1.1(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.3.9)(react-dom@18.3.1)(react@18.3.1)
+ '@mui/x-date-pickers': 7.18.0(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@mui/material@6.1.1)(@mui/system@6.1.1)(@types/react@18.3.9)(dayjs@1.11.13)(react-dom@18.3.1)(react@18.3.1)
+ '@tanstack/match-sorter-utils': 8.19.4
+ '@tanstack/react-table': 8.20.5(react-dom@18.3.1)(react@18.3.1)
+ '@tanstack/react-virtual': 3.10.6(react-dom@18.3.1)(react@18.3.1)
+ highlight-words: 1.2.2
+ react: 18.3.1
+ react-dom: 18.3.1(react@18.3.1)
+ dev: false
+
/merge2@1.4.1:
resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
engines: {node: '>= 8'}
@@ -2211,6 +2283,10 @@ packages:
resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
dev: false
+ /remove-accents@0.5.0:
+ resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==}
+ dev: false
+
/resolve-from@4.0.0:
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
engines: {node: '>=4'}
diff --git a/src/components/table/TableLoader.tsx b/src/components/table/TableLoader.tsx
new file mode 100644
index 0000000..722db86
--- /dev/null
+++ b/src/components/table/TableLoader.tsx
@@ -0,0 +1,22 @@
+import { Divider, Skeleton } from '@mui/material';
+import { Fragment } from 'react/jsx-runtime';
+
+const TableLoader = ({ count }: { count: number }) => {
+ return (
+
{error}
} + {!loading && !error && ( +