Skip to content

Commit a732787

Browse files
zxyctnzxyctn
committed
Decompose page component into smaller pieces
1 parent f865b25 commit a732787

File tree

9 files changed

+486
-363
lines changed

9 files changed

+486
-363
lines changed

‎src/routes/components/table/+page.svelte‎

Lines changed: 10 additions & 362 deletions
Original file line numberDiff line numberDiff line change
@@ -1,372 +1,20 @@
11
<script lang="ts">
22
import '$lib/css/themes/theme-bexis2.css';
3-
import { writable } from 'svelte/store';
4-
import { CodeBlock, type PopupSettings, popup } from '@skeletonlabs/skeleton';
5-
6-
import CodeContainer from '$docs/components/CodeContainer.svelte';
7-
import Table from '$lib/components/Table/Table.svelte';
8-
import TableOptions from './TableOptions.svelte';
9-
import TableFilter from '$lib/components/Table/TableFilter.svelte';
10-
import { columnFilter } from '$lib/components/Table/filter';
11-
import { userGroups, users, usersBD, usersMissingIDs } from './data';
12-
import * as cb from './codeBlocks';
13-
import type { TableConfig } from '$lib/models/Models';
14-
15-
type Group = { id: number; name: string; description: string };
16-
const groupsStore = writable<Group[]>(userGroups);
17-
const groupConfig: TableConfig<Group> = {
18-
id: 'userGroups',
19-
data: groupsStore,
20-
columns: {
21-
id: {
22-
header: 'ID'
23-
}
24-
}
25-
};
26-
27-
type User = { id: number; name: string; group: string; role: string };
28-
29-
const usersStore = writable<User[]>(users);
30-
31-
const usersConfig: TableConfig<User> = {
32-
id: 'users',
33-
data: usersStore
34-
};
35-
const usersNoRolesConfig: TableConfig<User> = {
36-
id: 'usersNoRoles',
37-
data: usersStore,
38-
optionsComponent: TableOptions,
39-
columns: {
40-
id: {
41-
colFilterFn: columnFilter,
42-
colFilterComponent: TableFilter
43-
},
44-
role: {
45-
exclude: true
46-
},
47-
group: {
48-
header: 'Group name'
49-
}
50-
},
51-
pageSizes: [1, 3, 5],
52-
defaultPageSize: 5
53-
};
54-
55-
type UserBD = { id: number; name: string; dateOfBirth: Date };
56-
const usersBDStore = writable<UserBD[]>(usersBD);
57-
const usersBDConfig: TableConfig<UserBD> = {
58-
id: 'usersBD',
59-
data: usersBDStore,
60-
columns: {
61-
dateOfBirth: {
62-
header: 'Date of birth',
63-
instructions: {
64-
toStringFn: (date: Date) =>
65-
date.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }),
66-
toSortableValueFn: (date: Date) => date.getTime(),
67-
toFilterableValueFn: (date: Date) => date
68-
}
69-
}
70-
}
71-
};
72-
73-
const missingValues: { [key: number]: string } = {
74-
32655: 'NA',
75-
32654: 'NM',
76-
32653: 'ND'
77-
};
78-
79-
type UserMissingID = { id: number | undefined; name: string; group: string; role: string };
80-
const usersMissingIDsStore = writable<UserMissingID[]>(usersMissingIDs);
81-
const usersMissingIDsConfig: TableConfig<UserMissingID> = {
82-
id: 'usersMissingIDs',
83-
data: usersMissingIDsStore,
84-
columns: {
85-
id: {
86-
header: 'ID',
87-
instructions: {
88-
toStringFn: (key: number) => (key in missingValues ? missingValues[key] : key.toString())
89-
}
90-
}
91-
}
92-
};
93-
94-
const popupClickTableConfig: PopupSettings = {
95-
event: 'click',
96-
target: 'popupClickTableConfig',
97-
placement: 'right'
98-
};
99-
100-
const popupClickColumns: PopupSettings = {
101-
event: 'click',
102-
target: 'popupClickColumns',
103-
placement: 'right'
104-
};
105-
106-
const popupClickColumn: PopupSettings = {
107-
event: 'click',
108-
target: 'popupClickColumn',
109-
placement: 'right'
110-
};
3+
import TableConfigDocs from './docs/TableConfigDocs.svelte';
4+
import ColumnsDocs from './docs/ColumnsDocs.svelte';
5+
import ColumnDocs from './docs/ColumnDocs.svelte';
6+
import ColumnInstructionsDocs from './docs/ColumnInstructionsDocs.svelte';
7+
import TableExamplesDocs from './docs/TableExamplesDocs.svelte';
1118
</script>
1129

11310
<div class="grid gap-20 p-10" id="toc-target">
11411
<div class="grid gap-5">
11512
<h1 class="font-bold !text-6xl">Table</h1>
11613
<h2>Types</h2>
117-
<div class="grid gap-2" id="tableConfig">
118-
<h3 class="font-semibold relative w-max">
119-
{`TableConfig <T>`}
120-
</h3>
121-
<button class="btn variant-ghost-primary w-min" use:popup={popupClickTableConfig}
122-
>Show type details</button
123-
>
124-
<div class="italic div">Underlined attributes are <strong>required</strong>.</div>
125-
<div class="variant-filled-secondary" data-popup="popupClickTableConfig">
126-
<CodeBlock language="ts" code={cb.tableConfigTypeCode} />
127-
</div>
128-
</div>
129-
130-
<div class="items-center">
131-
<div class="flex gap-2 underline">
132-
<div class="italic">id:</div>
133-
<div class="font-bold">string</div>
134-
</div>
135-
136-
<p class="text-xl pl-10">
137-
Unique identifier for the table to generate unique IDs for the filters.
138-
</p>
139-
</div>
140-
141-
<div class="items-center">
142-
<div class="flex gap-2 underline">
143-
<div class="italic">data:</div>
144-
<div class="font-bold">{`Writable <T[]>`}</div>
145-
</div>
146-
147-
<p class="text-xl pl-10">
148-
A writable store of the type <code class="!text-xl">T[]</code>. Any changes in the store
149-
will be reflected in the table.
150-
</p>
151-
</div>
152-
153-
<div class="items-center">
154-
<div class="flex gap-2">
155-
<div class="italic">optionsComponent:</div>
156-
<div class="font-bold">{`SvelteComponent`}</div>
157-
</div>
158-
159-
<p class="text-xl pl-10">
160-
Custom Svelte component to apply actions on a specific row. Table will not have an options
161-
column if no <code class="!text-xl">optionsComponent</code> was provided.
162-
</p>
163-
</div>
164-
165-
<div class="items-center">
166-
<div class="flex gap-2">
167-
<div class="italic">pageSizes:</div>
168-
<div class="font-bold">{`number[]`}</div>
169-
</div>
170-
171-
<p class="text-xl pl-10">
172-
An array of page sizes to be used for the table. By default, page sizes are 5, 10, 15, 20.
173-
</p>
174-
</div>
175-
176-
<div class="items-center">
177-
<div class="flex gap-2">
178-
<div class="italic">defaultPageSize:</div>
179-
<div class="font-bold">{`number`}</div>
180-
</div>
181-
182-
<p class="text-xl pl-10">
183-
Default page size to be used for the table upon rendering. By default, default page size is
184-
10.
185-
</p>
186-
</div>
187-
188-
<div class="items-center">
189-
<div class="flex gap-2">
190-
<div class="italic">columns:</div>
191-
<div class="font-bold">{`Columns`}</div>
192-
</div>
193-
194-
<p class="text-xl pl-10">
195-
An object with configuration for specific columns. <code class="!text-xl">Columns</code>
196-
object is described below.
197-
</p>
198-
</div>
199-
</div>
200-
201-
<div class="grid gap-5">
202-
<div class="grid gap-2" id="columns">
203-
<h3 class="font-semibold items-center w-max">Columns</h3>
204-
<button class="btn variant-ghost-primary w-min" use:popup={popupClickColumns}>
205-
Show type details</button
206-
>
207-
<div data-popup="popupClickColumns">
208-
<CodeBlock language="ts" code={cb.columnsTypeCode} />
209-
</div>
210-
</div>
211-
212-
<div class="items-center">
213-
<div class="flex gap-2">
214-
<div class="italic">[key: <strong>string</strong>]:</div>
215-
<div class="font-bold">Column</div>
216-
</div>
217-
218-
<p class="text-xl pl-10">
219-
Each key of this object is an accessor in the data object. If a certain key is not present,
220-
defaults will be applied for that accessor/column. If a key is present, defaults will be
221-
replaced with provided data.
222-
</p>
223-
</div>
224-
</div>
225-
226-
<div class="grid gap-5">
227-
<div class="grid gap-2" id="column">
228-
<h3 class="font-semibold items-center w-max">Column</h3>
229-
<button class="btn variant-ghost-primary w-min" use:popup={popupClickColumn}>
230-
Show type details</button
231-
>
232-
<div data-popup="popupClickColumn">
233-
<CodeBlock language="ts" code={cb.columnTypeCode} />
234-
</div>
235-
</div>
236-
237-
<div class="items-center">
238-
<div class="flex gap-2">
239-
<div class="italic">header:</div>
240-
<div class="font-bold">string</div>
241-
</div>
242-
243-
<p class="text-xl pl-10">
244-
Custom header to be displayed for the column. If not provided, header will be the same as
245-
the accessor.
246-
</p>
247-
</div>
248-
249-
<div class="items-center">
250-
<div class="flex gap-2">
251-
<div class="italic">exclude:</div>
252-
<div class="font-bold">boolean</div>
253-
</div>
254-
255-
<p class="text-xl pl-10">
256-
Whether to exclude the column from the table or not. By default, columns are not excluded.
257-
An excluded column will still be available in the data object to apply actions.
258-
</p>
259-
</div>
260-
261-
<div class="items-center">
262-
<div class="flex gap-2">
263-
<div class="italic">colFitlerFn:</div>
264-
<div class="font-bold">
265-
<a
266-
href="https://svelte-headless-table.bryanmylee.com/docs/plugins/add-column-filters#fn-filtervalue-value-boolean"
267-
>ColumnFilterFn</a
268-
>
269-
</div>
270-
</div>
271-
272-
<p class="text-xl pl-10">
273-
Filtering function to be applied on the column. By default, basic number/string filter is
274-
applied.
275-
</p>
276-
</div>
277-
278-
<div class="items-center">
279-
<div class="flex gap-2">
280-
<div class="italic">colFilterComponent:</div>
281-
<div class="font-bold">SvelteComponent</div>
282-
</div>
283-
284-
<p class="text-xl pl-10">
285-
Custom Svelte component to be used for filtering the column. By default, basic TableFilter
286-
component is rendered for the filters.
287-
</p>
288-
</div>
289-
</div>
290-
291-
<div class="grid gap-1">
292-
<h2>Examples</h2>
293-
<div class="grid gap-20">
294-
<div class="grid gap-5" id="simpleTable">
295-
<CodeContainer
296-
title="Simple table without Table component"
297-
svelte={cb.simpleTableHTML}
298-
data={cb.usersStoreCode}
299-
>
300-
<div class="pb-2">
301-
Used classes are important to include for the table to have a uniform look.
302-
</div>
303-
304-
<div class="table-container">
305-
<table class="table table-compact bg-tertiary-200">
306-
<thead>
307-
<tr class="bg-primary-300">
308-
<th class="!p-2">Group</th>
309-
<th class="!p-2">Description</th>
310-
</tr>
311-
</thead>
312-
<tbody>
313-
{#each $usersStore as user}
314-
<tr>
315-
<td>{user.name}</td>
316-
<td>
317-
<div>{user.group}</div>
318-
</td>
319-
</tr>
320-
{/each}
321-
</tbody>
322-
</table>
323-
</div>
324-
</CodeContainer>
325-
</div>
326-
327-
<div class="grid gap-5" id="groups">
328-
<CodeContainer title="Table component" svelte={cb.groupHTML} data={cb.groupStoreCode}>
329-
<Table config={groupConfig} />
330-
</CodeContainer>
331-
</div>
332-
333-
<div class="grid gap-5" id="users">
334-
<CodeContainer title="Minimal configuration" svelte={cb.usersHTML} data={cb.usersStoreCode}>
335-
<Table config={usersConfig} />
336-
</CodeContainer>
337-
</div>
338-
339-
<div class="grid gap-5" id="usersNoRoles">
340-
<CodeContainer
341-
title="Full configuration"
342-
svelte={cb.usersNoRolesHTML}
343-
data={cb.usersStoreCode}
344-
>
345-
<Table config={usersNoRolesConfig} on:action={(obj) => alert(obj.detail.type)} />
346-
</CodeContainer>
347-
</div>
348-
</div>
349-
<div class="grid gap-1">
350-
<h2>Complex data types</h2>
351-
<div class="grid gap-20">
352-
<div class="grid gap-5" id="usersBD">
353-
<CodeContainer title="Date" svelte={cb.usersBDHTML} data={cb.usersBDStoreCode}>
354-
<Table config={usersBDConfig} />
355-
</CodeContainer>
356-
</div>
357-
</div>
358-
359-
<div class="grid gap-20">
360-
<div class="grid gap-5" id="combination">
361-
<CodeContainer
362-
title="Missing values"
363-
svelte={cb.usersMissingIDsHTML}
364-
data={cb.usersMissingIDsStoreCode}
365-
>
366-
<Table config={usersMissingIDsConfig} />
367-
</CodeContainer>
368-
</div>
369-
</div>
370-
</div>
14+
<TableConfigDocs />
37115
</div>
16+
<ColumnsDocs />
17+
<ColumnDocs />
18+
<ColumnInstructionsDocs />
19+
<TableExamplesDocs />
37220
</div>

0 commit comments

Comments
 (0)