Skip to content

Commit e7dd5bd

Browse files
fabiohvpfabiohvp
committed
initial
1 parent 9941406 commit e7dd5bd

File tree

5 files changed

+226
-4
lines changed

5 files changed

+226
-4
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ node_modules
33
yarn.lock
44
package-lock.json
55
index.js
6-
index.mjs
6+
index.mjs
7+
.yarn-metadata.json

‎package.json‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "SvelteComponent",
2+
"name": "@fabiohvp/svelte-table",
33
"svelte": "src/index.svelte",
44
"module": "index.mjs",
55
"main": "index.js",
@@ -20,5 +20,18 @@
2020
"src",
2121
"index.mjs",
2222
"index.js"
23-
]
23+
],
24+
"description": "*Psst — looking for an app template? Go here --> [sveltejs/template](https://github.com/sveltejs/template)*",
25+
"version": "0.0.1",
26+
"dependencies": {},
27+
"repository": {
28+
"type": "git",
29+
"url": "git+https://github.com/fabiohvp/svelte-table.git"
30+
},
31+
"author": "https://github.com/fabiohvp",
32+
"license": "MIT",
33+
"bugs": {
34+
"url": "https://github.com/fabiohvp/svelte-table/issues"
35+
},
36+
"homepage": "https://github.com/fabiohvp/svelte-table#readme"
2437
}

‎src/Row.svelte‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script>
2+
import { createEventDispatcher } from "svelte";
3+
const dispatch = createEventDispatcher();
4+
5+
export let index = 0;
6+
7+
function onClick(event) {
8+
dispatch("click", event);
9+
}
10+
</script>
11+
12+
<style>
13+
.odd {
14+
background-color: #eee;
15+
}
16+
</style>
17+
18+
<tr
19+
on:click={onClick}
20+
class={$$props.class}
21+
class:odd={index % 2 !== 0}
22+
class:even={index % 2 === 0}>
23+
<slot />
24+
</tr>

‎src/Search.svelte‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script>
2+
import { createEventDispatcher } from "svelte";
3+
const dispatch = createEventDispatcher();
4+
5+
export let text = "";
6+
7+
function onSearch() {
8+
dispatch("search", text);
9+
}
10+
</script>
11+
12+
<style>
13+
.search {
14+
width: 33.3%;
15+
float: right;
16+
}
17+
.search input {
18+
width: 100%;
19+
}
20+
</style>
21+
22+
<div class="search">
23+
<input
24+
type="search"
25+
placeholder="Search"
26+
bind:value={text}
27+
on:keyup={onSearch} />
28+
</div>

‎src/index.svelte‎

Lines changed: 157 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,157 @@
1-
<!-- your code here -->
1+
<script context="module">
2+
import Row from "./Row.svelte";
3+
import Search from "./Search.svelte";
4+
export { Row, Search };
5+
</script>
6+
7+
<script>
8+
export let page = 0;
9+
export let pageSize = 10;
10+
export let rows;
11+
12+
let filteredRows;
13+
let visibleRows;
14+
let pages = 0;
15+
let buttons = [-2, -1, 0, 1, 2];
16+
17+
$: filteredRows = rows;
18+
$: currentFirstItemIndex = page * pageSize;
19+
$: visibleRows = filteredRows.slice(
20+
currentFirstItemIndex,
21+
currentFirstItemIndex + pageSize
22+
);
23+
$: pages = Math.floor((filteredRows.length - 1) / pageSize);
24+
25+
function onSearch(event) {
26+
page = 0;
27+
28+
if (event.detail.length === 0) {
29+
filteredRows = rows;
30+
} else {
31+
filteredRows = rows.filter(r => filter(r, event.detail));
32+
}
33+
}
34+
35+
function filter(row, text) {
36+
text = text.toLowerCase();
37+
for (let i in row) {
38+
if (
39+
row[i]
40+
.toString()
41+
.toLowerCase()
42+
.indexOf(text) > -1
43+
) {
44+
return true;
45+
}
46+
}
47+
48+
return false;
49+
}
50+
</script>
51+
52+
<style>
53+
div {
54+
width: 100%;
55+
float: left;
56+
}
57+
58+
ul {
59+
flex: 1;
60+
float: right;
61+
list-style: none;
62+
}
63+
64+
li {
65+
float: left;
66+
}
67+
68+
button {
69+
padding: 5px 10px;
70+
margin-left: 3px;
71+
float: left;
72+
cursor: pointer;
73+
}
74+
75+
.active {
76+
background-color: rgb(150, 150, 235);
77+
color: white;
78+
}
79+
80+
table {
81+
width: 100%;
82+
border-collapse: collapse;
83+
}
84+
85+
:global(table td) {
86+
padding: 0.3em 0.3em;
87+
}
88+
89+
.empty-message {
90+
text-align: center;
91+
font-style: italic;
92+
}
93+
94+
.empty-message > span {
95+
padding: 10px 10px;
96+
float: left;
97+
width: 100%;
98+
}
99+
</style>
100+
101+
<div>
102+
<slot name="top">
103+
<Search on:search={onSearch} />
104+
</slot>
105+
</div>
106+
107+
<div>
108+
<table class={$$props.class}>
109+
<slot name="head" />
110+
<slot rows={visibleRows} />
111+
{#if visibleRows.length === 0}
112+
<tr>
113+
<td class="empty-message" colspan="100%">
114+
<span>Não há registros disponíveis</span>
115+
</td>
116+
</tr>
117+
{/if}
118+
<slot name="foot" />
119+
</table>
120+
</div>
121+
<div>
122+
<ul>
123+
<li>
124+
<button disabled={page === 0} on:click={() => (page = 0)}>
125+
Primeira
126+
</button>
127+
</li>
128+
<li>
129+
<button disabled={page === 0} on:click={() => page--}>Anterior</button>
130+
</li>
131+
{#each buttons as button}
132+
{#if page + button >= 0 && page + button <= pages}
133+
<li>
134+
<button
135+
class:active={page === page + button}
136+
on:click={() => (page = page + button)}>
137+
{page + button + 1}
138+
</button>
139+
</li>
140+
{/if}
141+
{/each}
142+
<li>
143+
<button disabled={page > pages - 1} on:click={() => page++}>
144+
Próxima
145+
</button>
146+
</li>
147+
<li>
148+
<button disabled={page >= pages} on:click={() => (page = pages)}>
149+
Última
150+
</button>
151+
</li>
152+
</ul>
153+
</div>
154+
155+
<div>
156+
<slot name="bottom" />
157+
</div>

0 commit comments

Comments
 (0)