1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50import { createFileRoute } from '@tanstack/react-router'
import CheckboxTable from '../../components/CheckboxTable'
import { fetchAllAudits } from '../../api/api'
import { keepPreviousData, useQuery } from '@tanstack/react-query';
import { useState } from 'react';
export const Route = createFileRoute('/audits/test')({
component: RouteComponent,
})
function RouteComponent() {
const {
data: audits = [],
isLoading,
isFetching,
isError,
refetch
} = useQuery({
queryKey: ['audits'],
queryFn: () => fetchAllAudits(),
placeholderData: keepPreviousData,
staleTime: 30000,
});
const [checkedBoxes, setCheckedBoxes] = useState(new Set())
return (
<>
<CheckboxTable
itemName={ 'schnarf' }
columns={[
{ key: 'name', label: 'Name' },
{ key: 'pages', label: 'Pages' },
{ key: 'checks', label: 'Checks' },
{ key: 'progress', label: 'Progress' },
{ key: 'status', label: 'Status' },
{ key: 'created', label: 'Created' },
{ key: 'lastRun', label: 'Last Run' },
]}
data={ audits }
onCheckedBoxesChange={ setCheckedBoxes }
expanded={ true }
/>
<div>Items selected: { checkedBoxes.size }</div>
</>
)
}