/
_Pagination.svelte
105 lines (98 loc) · 2.82 KB
/
_Pagination.svelte
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<DataTable table$aria-label="Todo list" style="width: 100%;">
<Head>
<Row>
<Cell numeric>ID</Cell>
<Cell style="width: 100%;">Title</Cell>
<Cell>Completed</Cell>
<Cell numeric>User ID</Cell>
</Row>
</Head>
<Body>
{#each slice as item (item.id)}
<Row>
<Cell numeric>{item.id}</Cell>
<Cell>{item.title}</Cell>
<Cell>{item.completed ? 'Yes' : 'No'}</Cell>
<Cell numeric>{item.userId}</Cell>
</Row>
{/each}
</Body>
<Pagination slot="paginate">
<svelte:fragment slot="rowsPerPage">
<Label>Rows Per Page</Label>
<Select variant="outlined" bind:value={rowsPerPage} noLabel>
<Option value={10}>10</Option>
<Option value={25}>25</Option>
<Option value={100}>100</Option>
</Select>
</svelte:fragment>
<svelte:fragment slot="total">
{start + 1}-{end} of {items.length}
</svelte:fragment>
<IconButton
class="material-icons"
action="first-page"
title="First page"
on:click={() => (currentPage = 0)}
disabled={currentPage === 0}>first_page</IconButton
>
<IconButton
class="material-icons"
action="prev-page"
title="Prev page"
on:click={() => currentPage--}
disabled={currentPage === 0}>chevron_left</IconButton
>
<IconButton
class="material-icons"
action="next-page"
title="Next page"
on:click={() => currentPage++}
disabled={currentPage === lastPage}>chevron_right</IconButton
>
<IconButton
class="material-icons"
action="last-page"
title="Last page"
on:click={() => (currentPage = lastPage)}
disabled={currentPage === lastPage}>last_page</IconButton
>
</Pagination>
</DataTable>
<script lang="ts">
import DataTable, {
Head,
Body,
Row,
Cell,
Pagination,
} from '@smui/data-table';
import Select, { Option } from '@smui/select';
import IconButton from '@smui/icon-button';
import { Label } from '@smui/common';
type Todo = {
id: number;
title: string;
completed: boolean;
userId: number;
};
let items: Todo[] = [];
let rowsPerPage = 10;
let currentPage = 0;
$: start = currentPage * rowsPerPage;
$: end = Math.min(start + rowsPerPage, items.length);
$: slice = items.slice(start, end);
$: lastPage = Math.max(Math.ceil(items.length / rowsPerPage) - 1, 0);
$: if (currentPage > lastPage) {
currentPage = lastPage;
}
if (typeof fetch !== 'undefined') {
// Slice a few off the end to show how the
// last page looks when it's not full.
fetch(
'https://gist.githubusercontent.com/hperrin/e24a4ebd9afdf2a8c283338ae5160a62/raw/dcbf8e6382db49b0dcab70b22f56b1cc444f26d4/todos.json',
)
.then((response) => response.json())
.then((json) => (items = json.slice(0, 197)));
}
</script>