Skip to content

Commit 53a8bff

Browse files
emamidemamid
committed
Made sort icons configurable
1 parent 75e717c commit 53a8bff

File tree

10 files changed

+160
-14
lines changed

10 files changed

+160
-14
lines changed

‎docs/ColumnConfig.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -653,6 +653,68 @@ <h5 class="subsection-title">Properties:</h5>
653653

654654

655655

656+
<tr class="deep-level-0">
657+
658+
<td class="name"><code>sortAscendingIcon</code></td>
659+
660+
661+
<td class="type">
662+
663+
664+
<code class="param-type">ConstructorOfATypedSvelteComponent</code>
665+
666+
667+
668+
</td>
669+
670+
671+
<td class="attributes">
672+
673+
&lt;optional><br>
674+
675+
676+
677+
</td>
678+
679+
680+
681+
682+
<td class="description last">Svelte component class to be displayed in the column is sorting ascended (overrides table).</td>
683+
</tr>
684+
685+
686+
687+
<tr class="deep-level-0">
688+
689+
<td class="name"><code>sortDescendingIcon</code></td>
690+
691+
692+
<td class="type">
693+
694+
695+
<code class="param-type">ConstructorOfATypedSvelteComponent</code>
696+
697+
698+
699+
</td>
700+
701+
702+
<td class="attributes">
703+
704+
&lt;optional><br>
705+
706+
707+
708+
</td>
709+
710+
711+
712+
713+
<td class="description last">Svelte component class to be displayed in the column is sorting descended (overrides table).</td>
714+
</tr>
715+
716+
717+
656718
<tr class="deep-level-0">
657719

658720
<td class="name"><code>sortFunction</code></td>

‎docs/DataTable.doc.ts.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,8 @@ <h1>DataTable.doc.ts</h1>
9494
* @property {SortFunction} [sortFunction] - Function for more complex-sorting.
9595
* @property {boolean} [reverseSort] - True when sorting is reversed.
9696
* @property {string} [sortColumnID] - The id (or key) property of the column being sorted by.
97+
* @property {ConstructorOfATypedSvelteComponent} [sortAscendingIcon] - Svelte component class to be displayed in columns that are sorting ascended. Defaults to AngleDownSolid from {@link https://flowbite.com/icons/}
98+
* @property {ConstructorOfATypedSvelteComponent} [sortDescendingIcon] - Svelte component class to be displayed in columns that are sorting descended. Defaults to AngleUpSolid from {@link https://flowbite.com/icons/}
9799
* @property {string} [itemKey] - Property to use when distinguish between rows. If not populated, the array index is used.
98100
* @property {EnterAction} [enterAction] - Determines what pressing the enter key in a focused cell does. Can be 'next', 'down', or 'stay'. Default is 'next'. If 'next', enter will act the same as tab. If 'down', focus will move down to the row below the current one. If 'stay', the enter key will not cause movement.
99101
* @property {string} [divClassAppend] - Classes to be appended to Table.divClass .

‎docs/common.ts.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,8 @@ <h1>common.ts</h1>
164164
* @property {string} [thClassOverride] - Class to replace existing CSS for header cells.
165165
* @property {boolean} [canFocus] - True if cells in this column can be focused.
166166
* @property {boolean} [canSort] - If true, clicking the column's header will set sorting to sortFunction or sortKey, or reverse it if already set.
167+
* @property {ConstructorOfATypedSvelteComponent} [sortAscendingIcon] - Svelte component class to be displayed in the column is sorting ascended (overrides table).
168+
* @property {ConstructorOfATypedSvelteComponent} [sortDescendingIcon] - Svelte component class to be displayed in the column is sorting descended (overrides table).
167169
* @property {SortFunction} [sortFunction] - Comparison function for complex sorting.
168170
* @property {string} [sortKey] - Item property to sort by, if sortFunction is not defined.
169171
*/
@@ -187,6 +189,8 @@ <h1>common.ts</h1>
187189
canSort?: boolean;
188190
sortFunction?: SortFunction;
189191
sortKey?: string;
192+
sortAscendingIcon?: ConstructorOfATypedSvelteComponent;
193+
sortDescendingIcon?: ConstructorOfATypedSvelteComponent;
190194
}
191195

192196
/**

‎docs/global.html‎

Lines changed: 69 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3381,6 +3381,68 @@ <h5 class="subsection-title">Properties:</h5>
33813381

33823382

33833383

3384+
<tr class="deep-level-0">
3385+
3386+
<td class="name"><code>sortAscendingIcon</code></td>
3387+
3388+
3389+
<td class="type">
3390+
3391+
3392+
<code class="param-type">ConstructorOfATypedSvelteComponent</code>
3393+
3394+
3395+
3396+
</td>
3397+
3398+
3399+
<td class="attributes">
3400+
3401+
&lt;optional><br>
3402+
3403+
3404+
3405+
</td>
3406+
3407+
3408+
3409+
3410+
<td class="description last">Svelte component class to be displayed in columns that are sorting ascended. Defaults to AngleDownSolid from <a href="https://flowbite.com/icons/">https://flowbite.com/icons/</a></td>
3411+
</tr>
3412+
3413+
3414+
3415+
<tr class="deep-level-0">
3416+
3417+
<td class="name"><code>sortDescendingIcon</code></td>
3418+
3419+
3420+
<td class="type">
3421+
3422+
3423+
<code class="param-type">ConstructorOfATypedSvelteComponent</code>
3424+
3425+
3426+
3427+
</td>
3428+
3429+
3430+
<td class="attributes">
3431+
3432+
&lt;optional><br>
3433+
3434+
3435+
3436+
</td>
3437+
3438+
3439+
3440+
3441+
<td class="description last">Svelte component class to be displayed in columns that are sorting descended. Defaults to AngleUpSolid from <a href="https://flowbite.com/icons/">https://flowbite.com/icons/</a></td>
3442+
</tr>
3443+
3444+
3445+
33843446
<tr class="deep-level-0">
33853447

33863448
<td class="name"><code>itemKey</code></td>
@@ -4290,7 +4352,7 @@ <h4 class="name" id="EnterAction">
42904352
<p class="tag-source">
42914353
<a href="common.ts.html" class="button">View Source</a>
42924354
<span>
4293-
<a href="common.ts.html">common.ts</a>, <a href="common.ts.html#line91">line 91</a>
4355+
<a href="common.ts.html">common.ts</a>, <a href="common.ts.html#line93">line 93</a>
42944356
</span>
42954357
</p>
42964358

@@ -4825,7 +4887,7 @@ <h5>Parameters:</h5>
48254887
<p class="tag-source">
48264888
<a href="common.ts.html" class="button">View Source</a>
48274889
<span>
4828-
<a href="common.ts.html">common.ts</a>, <a href="common.ts.html#line78">line 78</a>
4890+
<a href="common.ts.html">common.ts</a>, <a href="common.ts.html#line80">line 80</a>
48294891
</span>
48304892
</p>
48314893

@@ -6024,7 +6086,7 @@ <h5 class="subsection-title">Properties:</h5>
60246086
<p class="tag-source">
60256087
<a href="DataTable.doc.ts.html" class="button">View Source</a>
60266088
<span>
6027-
<a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line63">line 63</a>
6089+
<a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line65">line 65</a>
60286090
</span>
60296091
</p>
60306092

@@ -6248,7 +6310,7 @@ <h5 class="subsection-title">Properties:</h5>
62486310
<p class="tag-source">
62496311
<a href="DataTable.doc.ts.html" class="button">View Source</a>
62506312
<span>
6251-
<a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line70">line 70</a>
6313+
<a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line72">line 72</a>
62526314
</span>
62536315
</p>
62546316

@@ -6426,7 +6488,7 @@ <h5 class="subsection-title">Properties:</h5>
64266488
<p class="tag-source">
64276489
<a href="DataTable.doc.ts.html" class="button">View Source</a>
64286490
<span>
6429-
<a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line43">line 43</a>
6491+
<a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line45">line 45</a>
64306492
</span>
64316493
</p>
64326494

@@ -6673,7 +6735,7 @@ <h5 class="subsection-title">Properties:</h5>
66736735
<p class="tag-source">
66746736
<a href="DataTable.doc.ts.html" class="button">View Source</a>
66756737
<span>
6676-
<a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line49">line 49</a>
6738+
<a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line51">line 51</a>
66776739
</span>
66786740
</p>
66796741

@@ -6828,7 +6890,7 @@ <h5 class="subsection-title">Properties:</h5>
68286890
<p class="tag-source">
68296891
<a href="DataTable.doc.ts.html" class="button">View Source</a>
68306892
<span>
6831-
<a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line58">line 58</a>
6893+
<a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line60">line 60</a>
68326894
</span>
68336895
</p>
68346896

‎docs/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,8 @@ <h4>Example 4 - Table with actions and cell view components</h4>
147147
<h4>Example 5 - Table with custom cell component</h4>
148148
<p><img src="./screenshot-05.png" alt="Example 5"></p>
149149
<h4>Example 6 - Table with cell and row class getter functions</h4>
150-
<p><img src="./screenshot-06.png" alt="Example 6"></p></article>
150+
<p><img src="./screenshot-06.png" alt="Example 6"></p>
151+
<h4>Kitchen Sink example - All of the above</h4></article>
151152
</section>
152153

153154

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@emamid/svelte-data-table",
3-
"version": "0.0.10",
3+
"version": "0.0.11",
44
"homepage": "https://github.com/emamid/svelte-data-table",
55
"scripts": {
66
"dev": "vite dev",

‎src/lib/DataTable.doc.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
* @property {SortFunction} [sortFunction] - Function for more complex-sorting.
88
* @property {boolean} [reverseSort] - True when sorting is reversed.
99
* @property {string} [sortColumnID] - The id (or key) property of the column being sorted by.
10+
* @property {ConstructorOfATypedSvelteComponent} [sortAscendingIcon] - Svelte component class to be displayed in columns that are sorting ascended. Defaults to AngleDownSolid from {@link https://flowbite.com/icons/}
11+
* @property {ConstructorOfATypedSvelteComponent} [sortDescendingIcon] - Svelte component class to be displayed in columns that are sorting descended. Defaults to AngleUpSolid from {@link https://flowbite.com/icons/}
1012
* @property {string} [itemKey] - Property to use when distinguish between rows. If not populated, the array index is used.
1113
* @property {EnterAction} [enterAction] - Determines what pressing the enter key in a focused cell does. Can be 'next', 'down', or 'stay'. Default is 'next'. If 'next', enter will act the same as tab. If 'down', focus will move down to the row below the current one. If 'stay', the enter key will not cause movement.
1214
* @property {string} [divClassAppend] - Classes to be appended to Table.divClass .

‎src/lib/DataTable.svelte‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<script lang="ts">
22
import { createEventDispatcher } from 'svelte';
33
4-
import { P, Table, TableBody, TableBodyRow, TableHead } from 'flowbite-svelte';
5-
4+
import { Table, TableBody, TableBodyRow, TableHead } from 'flowbite-svelte';
5+
import { AngleDownSolid, AngleUpSolid } from 'flowbite-svelte-icons';
6+
67
import DataTableDataCell from './DataTableDataCell.svelte';
78
import DataTableHeaderCell from './DataTableHeaderCell.svelte';
89
@@ -24,6 +25,8 @@
2425
export let sortFunction: SortFunction | undefined | null = null;
2526
export let reverseSort: boolean = false;
2627
export let sortColumnID: string | null = null;
28+
export let sortAscendingIcon: ConstructorOfATypedSvelteComponent = AngleDownSolid;
29+
export let sortDescendingIcon: ConstructorOfATypedSvelteComponent = AngleUpSolid;
2730
export let itemKey: string | null = null;
2831
2932
export let enterAction: EnterAction = 'next';
@@ -267,6 +270,8 @@
267270
{column}
268271
isSorted={!!sortColumnID && getColumnID(column) === sortColumnID}
269272
{reverseSort}
273+
defaultSortAscendingIcon={sortAscendingIcon}
274+
defaultSortDescendingIcon={sortDescendingIcon}
270275
{thClass}
271276
on:click={() => headerClicked(column)}
272277
/>

‎src/lib/DataTableHeaderCell.svelte‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
<script lang="ts">
22
import { TableHeadCell } from 'flowbite-svelte';
3-
import { AngleDownSolid, AngleUpSolid } from 'flowbite-svelte-icons';
43
54
import type { InternalColumnConfig } from './common.js';
65
import { joinClasses } from './common.js';
76
87
export let column: InternalColumnConfig;
98
export let reverseSort: boolean;
109
export let isSorted: boolean;
10+
export let defaultSortAscendingIcon: ConstructorOfATypedSvelteComponent;
11+
export let defaultSortDescendingIcon: ConstructorOfATypedSvelteComponent;
1112
export let thClass: string;
13+
14+
const sortAscendingIcon = column.sortAscendingIcon || defaultSortAscendingIcon;
15+
const sortDescendingIcon = column.sortDescendingIcon || defaultSortDescendingIcon;
1216
</script>
1317

1418
<TableHeadCell
@@ -17,9 +21,9 @@
1721
>
1822
{#if isSorted}
1923
{#if reverseSort}
20-
<AngleUpSolid class="inline h-3 w-3" />
24+
<svelte:component this={sortAscendingIcon} class="inline h-3 w-3" />
2125
{:else}
22-
<AngleDownSolid class="inline h-3 w-3" />
26+
<svelte:component this={sortDescendingIcon} class="inline h-3 w-3" />
2327
{/if}
2428
{/if}
2529
<span>{column.title}</span>

‎src/lib/common.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,8 @@ export type SortFunction = (
7777
* @property {string} [thClassOverride] - Class to replace existing CSS for header cells.
7878
* @property {boolean} [canFocus] - True if cells in this column can be focused.
7979
* @property {boolean} [canSort] - If true, clicking the column's header will set sorting to sortFunction or sortKey, or reverse it if already set.
80+
* @property {ConstructorOfATypedSvelteComponent} [sortAscendingIcon] - Svelte component class to be displayed in the column is sorting ascended (overrides table).
81+
* @property {ConstructorOfATypedSvelteComponent} [sortDescendingIcon] - Svelte component class to be displayed in the column is sorting descended (overrides table).
8082
* @property {SortFunction} [sortFunction] - Comparison function for complex sorting.
8183
* @property {string} [sortKey] - Item property to sort by, if sortFunction is not defined.
8284
*/
@@ -100,6 +102,8 @@ export interface ColumnConfig {
100102
canSort?: boolean;
101103
sortFunction?: SortFunction;
102104
sortKey?: string;
105+
sortAscendingIcon?: ConstructorOfATypedSvelteComponent;
106+
sortDescendingIcon?: ConstructorOfATypedSvelteComponent;
103107
}
104108

105109
/**

0 commit comments

Comments
 (0)