Skip to content

Commit 19ceaa4

Browse files
geodaskgeodask
committed
docs: update documentation
1 parent dd9b279 commit 19ceaa4

File tree

22 files changed

+773
-695
lines changed

22 files changed

+773
-695
lines changed

‎sites/docs/src/lib/widgets/menu-sidebar/model/index.ts‎

Lines changed: 28 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,13 @@ export const data = {
3434
{
3535
title: 'Column Definition',
3636
url: '/docs/column-definition'
37-
},
37+
}
38+
]
39+
},
40+
{
41+
title: 'Plugins',
42+
url: '/docs/plugins',
43+
items: [
3844
{
3945
title: 'Column Visibility',
4046
url: '/docs/column-visibility'
@@ -49,32 +55,6 @@ export const data = {
4955
}
5056
]
5157
},
52-
{
53-
title: 'API Reference',
54-
url: '/docs/api',
55-
items: [
56-
{
57-
title: 'reactiveTable',
58-
url: '/docs/api/reactive-table'
59-
},
60-
{
61-
title: 'reactivePagination',
62-
url: '/docs/api/reactive-pagination'
63-
},
64-
{
65-
title: 'reactiveColumnVisibility',
66-
url: '/docs/api/reactive-column-visibility'
67-
},
68-
{
69-
title: 'reactiveSorting',
70-
url: '/docs/api/reactive-sorting'
71-
},
72-
{
73-
title: 'Types',
74-
url: '/docs/api/types'
75-
}
76-
]
77-
},
7858
{
7959
title: 'Examples',
8060
url: '/docs/examples/basic-table',
@@ -102,13 +82,29 @@ export const data = {
10282
]
10383
},
10484
{
105-
title: 'Help',
106-
url: '/docs/help',
85+
title: 'API Reference',
86+
url: '/docs/api',
10787
items: [
10888
{
109-
title: 'Troubleshooting',
110-
url: '/docs/troubleshooting'
111-
}
89+
title: 'reactiveTable',
90+
url: '/docs/api/reactive-table'
91+
},
92+
{
93+
title: 'reactivePagination',
94+
url: '/docs/api/reactive-pagination'
95+
},
96+
{
97+
title: 'reactiveColumnVisibility',
98+
url: '/docs/api/reactive-column-visibility'
99+
},
100+
{
101+
title: 'reactiveSorting',
102+
url: '/docs/api/reactive-sorting'
103+
},
104+
// {
105+
// title: 'Types',
106+
// url: '/docs/api/types'
107+
// }
112108
]
113109
}
114110
]

‎sites/docs/src/routes/docs/api/reactive-column-visibility/+page.md‎

Lines changed: 103 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ layout: docPage
2323

2424
# reactiveColumnVisibility
2525

26-
The `reactiveColumnVisibility` function creates a column visibility plugin for Svelte Reactive Table, allowing you to show and hide specific columns dynamically.
26+
The `reactiveColumnVisibility` function creates a column visibility plugin for table instances, enabling dynamic control over which columns are displayed.
2727

2828
## Signature
2929

@@ -75,7 +75,7 @@ Returns a TablePlugin that adds column visibility functionality when passed to t
7575
7676
<!-- Column visibility controls -->
7777
<div>
78-
<button click={() => columnVisibility.toggleVisibility('age')}>
78+
<button onclick={() => columnVisibility.toggleVisibility('age')}>
7979
{columnVisibility.isVisible('age') ? 'Hide' : 'Show'} Age
8080
</button>
8181
</div>
@@ -129,18 +129,116 @@ These methods are available on the columnVisibility plugin state:
129129
```svelte
130130
<div class="column-controls">
131131
<!-- Toggle individual column -->
132-
<button click={() => columnVisibility.toggleVisibility('age')}> Toggle Age Column </button>
132+
<button onclick={() => columnVisibility.toggleVisibility('age')}> Toggle Age Column </button>
133133
134134
<!-- Reset all column visibility -->
135-
<button click={columnVisibility.resetVisibility}> Show All Columns </button>
135+
<button onclick={columnVisibility.resetVisibility}> Show All Columns </button>
136136
137137
<!-- Show only specific columns -->
138-
<button click={() => columnVisibility.setVisibleColumns(['name', 'email'])}>
138+
<button onclick={() => columnVisibility.setVisibleColumns(['name', 'email'])}>
139139
Show Only Name & Email
140140
</button>
141141
</div>
142142
```
143143

144+
## Column Selector Interface
145+
146+
Complete implementation of a column visibility selector:
147+
148+
```svelte
149+
<div class="column-selector">
150+
<h3>Visible Columns</h3>
151+
<div class="column-checkboxes">
152+
{#each table.allColumns as column}
153+
<label class="column-toggle">
154+
<input
155+
type="checkbox"
156+
checked={columnVisibility.isVisible(column.accessor)}
157+
onchange={() => columnVisibility.toggleVisibility(column.accessor)}
158+
/>
159+
<span>{column.header}</span>
160+
</label>
161+
{/each}
162+
</div>
163+
164+
<div class="column-actions">
165+
<button onclick={columnVisibility.resetVisibility}>
166+
Show All
167+
</button>
168+
<button onclick={() => columnVisibility.hideColumns(['age', 'email'])}>
169+
Hide Personal Info
170+
</button>
171+
</div>
172+
</div>
173+
174+
<style>
175+
.column-selector {
176+
padding: 1rem;
177+
border: 1px solid #e2e8f0;
178+
border-radius: 0.5rem;
179+
background: #f8fafc;
180+
}
181+
182+
.column-checkboxes {
183+
display: flex;
184+
flex-direction: column;
185+
gap: 0.5rem;
186+
margin: 1rem 0;
187+
}
188+
189+
.column-toggle {
190+
display: flex;
191+
align-items: center;
192+
gap: 0.5rem;
193+
cursor: pointer;
194+
}
195+
196+
.column-actions {
197+
display: flex;
198+
gap: 0.5rem;
199+
}
200+
</style>
201+
```
202+
203+
## Batch Operations Example
204+
205+
```svelte
206+
<script>
207+
// Predefined column groups for quick toggling
208+
const columnGroups = {
209+
personal: ['name', 'age', 'email'],
210+
work: ['department', 'position', 'salary'],
211+
contact: ['email', 'phone', 'address']
212+
};
213+
214+
function showGroup(groupName) {
215+
const columns = columnGroups[groupName];
216+
columnVisibility.showColumns(columns);
217+
}
218+
219+
function hideGroup(groupName) {
220+
const columns = columnGroups[groupName];
221+
columnVisibility.hideColumns(columns);
222+
}
223+
224+
function showOnlyGroup(groupName) {
225+
const columns = columnGroups[groupName];
226+
columnVisibility.setVisibleColumns(columns);
227+
}
228+
</script>
229+
230+
<div class="group-controls">
231+
{#each Object.keys(columnGroups) as groupName}
232+
<div class="group-actions">
233+
<span>{groupName}:</span>
234+
<button onclick={() => showGroup(groupName)}>Show</button>
235+
<button onclick={() => hideGroup(groupName)}>Hide</button>
236+
<button onclick={() => showOnlyGroup(groupName)}>Only</button>
237+
</div>
238+
{/each}
239+
</div>
240+
```
241+
144242
## TypeScript Support
145243

146244
```ts

‎sites/docs/src/routes/docs/api/reactive-pagination/+page.md‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ layout: docPage
2323

2424
# reactivePagination
2525

26-
The `reactivePagination` function creates a pagination plugin for Svelte Reactive Table, enabling navigation through large datasets by dividing them into manageable pages.
26+
The `reactivePagination` function creates a pagination plugin for table instances, enabling efficient navigation through large datasets by dividing data into manageable pages.
2727

2828
## Signature
2929

@@ -120,13 +120,13 @@ These methods are available on the pagination plugin state:
120120

121121
```svelte
122122
<div class="pagination">
123-
<button click={() => pagination.goToPreviousPage()} disabled={!pagination.hasPreviousPage}>
123+
<button onclick={() => pagination.goToPreviousPage()} disabled={!pagination.hasPreviousPage}>
124124
Previous
125125
</button>
126126
127127
<span>Page {pagination.page + 1} of {pagination.pageCount}</span>
128128
129-
<button click={() => pagination.goToNextPage()} disabled={!pagination.hasNextPage}> Next </button>
129+
<button onclick={() => pagination.goToNextPage()} disabled={!pagination.hasNextPage}> Next </button>
130130
131131
<select bind:value={pagination.pageSize}>
132132
<option value={5}>5 per page</option>
@@ -136,6 +136,29 @@ These methods are available on the pagination plugin state:
136136
</div>
137137
```
138138

139+
## Navigation Examples
140+
141+
```svelte
142+
<script>
143+
// Navigate to next page with error handling
144+
function handleNextPage() {
145+
if (!pagination.goToNextPage()) {
146+
console.log('Already on last page');
147+
}
148+
}
149+
150+
// Jump to specific page
151+
function jumpToPage(pageNumber) {
152+
pagination.setPage(pageNumber - 1); // Convert to 0-based
153+
}
154+
155+
// Change page size and maintain position when possible
156+
function changePageSize(newSize) {
157+
pagination.setPageSize(newSize, false); // Don't reset to first page
158+
}
159+
</script>
160+
```
161+
139162
## TypeScript Support
140163

141164
```ts

‎sites/docs/src/routes/docs/api/reactive-sorting/+page.md‎

Lines changed: 65 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ layout: docPage
2323

2424
# reactiveSorting
2525

26-
The `reactiveSorting` function creates a sorting plugin for Svelte Reactive Table, enabling users to sort data in ascending or descending order across one or multiple columns.
26+
The `reactiveSorting` function creates a sorting plugin for table instances, enabling data sorting in ascending or descending order across single or multiple columns.
2727

2828
## Signature
2929

@@ -87,7 +87,7 @@ Returns a TablePlugin that adds sorting functionality when passed to the `use` m
8787
<thead>
8888
<tr>
8989
{#each table.columns as column}
90-
<th click={() => sorting.toggleSort(column.accessor)}>
90+
<th onclick={() => sorting.toggleSort(column.accessor)}>
9191
{column.header}
9292
{#if sorting.getSortDirection(column.accessor) !== 'none'}
9393
{sorting.getSortDirection(column.accessor) === 'asc' ? '↑' : '↓'}
@@ -140,39 +140,91 @@ You can provide custom comparison functions for specific columns:
140140
name: (a, b) => a.toLowerCase().localeCompare(b.toLowerCase()),
141141
142142
// Date comparison
143-
createdAt: (a, b) => new Date(a).getTime() - new Date(b).getTime()
143+
createdAt: (a, b) => new Date(a).getTime() - new Date(b).getTime(),
144+
145+
// Numeric comparison with null handling
146+
price: (a, b) => {
147+
if (a === null && b === null) return 0;
148+
if (a === null) return -1;
149+
if (b === null) return 1;
150+
return a - b;
151+
}
144152
}
145153
})
146154
);
147155
</script>
148156
```
149157

150-
## Multi-Column Sorting
158+
## Multi-Column Sorting Examples
151159

152160
Multi-column sorting allows sorting by multiple columns with precedence:
153161

154162
```svelte
155163
<script>
156164
const table = reactiveTable(data, columns).use(
157165
reactiveSorting({
158-
multiSort: true
166+
multiSort: true,
167+
columnSortings: [
168+
{ key: 'department', direction: 'asc' },
169+
{ key: 'name', direction: 'asc' }
170+
]
159171
})
160172
);
161173
162174
const { sorting } = table.plugins;
175+
176+
// Display active sorts
177+
function getActiveSorts() {
178+
return sorting.columnSortings.map((sort, index) =>
179+
`${index + 1}. ${sort.key} (${sort.direction})`
180+
).join(', ');
181+
}
163182
</script>
164183
165-
<!-- Example for how users can see multi-column sort state -->
166-
<div class="active-sorts">
167-
Active sorts:
168-
{#each sorting.columnSortings as sort, i}
169-
<span>
170-
{i + 1}. {sort.key} ({sort.direction})
171-
</span>
172-
{/each}
184+
<!-- Show current sort state -->
185+
<div class="sort-info">
186+
{#if sorting.columnSortings.length > 0}
187+
Active sorts: {getActiveSorts()}
188+
{:else}
189+
No sorting applied
190+
{/if}
173191
</div>
174192
```
175193

194+
## Sortable Headers Example
195+
196+
```svelte
197+
<thead>
198+
<tr>
199+
{#each table.columns as column}
200+
<th
201+
onclick={() => sorting.toggleSort(column.accessor)}
202+
class="sortable-header"
203+
>
204+
{column.header}
205+
{#if sorting.getSortDirection(column.accessor) !== 'none'}
206+
<span class="sort-indicator">
207+
{sorting.getSortDirection(column.accessor) === 'asc' ? '↑' : '↓'}
208+
</span>
209+
{/if}
210+
</th>
211+
{/each}
212+
</tr>
213+
</thead>
214+
215+
<style>
216+
.sortable-header {
217+
cursor: pointer;
218+
user-select: none;
219+
}
220+
221+
.sort-indicator {
222+
margin-left: 4px;
223+
opacity: 0.7;
224+
}
225+
</style>
226+
```
227+
176228
## TypeScript Support
177229

178230
```ts

0 commit comments

Comments
 (0)