@kayord/ui 0.16.2 → 0.16.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/custom/data-table/DataTable.svelte +3 -3
- package/dist/components/custom/data-table/DataTable.svelte.d.ts +1 -1
- package/dist/components/custom/data-table/DataTableHeader.svelte +1 -1
- package/dist/components/custom/data-table/DataTableHeader.svelte.d.ts +1 -1
- package/dist/components/custom/data-table/Pagination.svelte +1 -1
- package/dist/components/custom/data-table/Pagination.svelte.d.ts +1 -1
- package/dist/components/custom/data-table/shad-table.svelte.d.ts +2 -2
- package/dist/components/custom/data-table/shad-table.svelte.js +31 -18
- package/package.json +1 -1
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
let {
|
|
35
|
-
tableState
|
|
35
|
+
tableState,
|
|
36
36
|
isLoading = false,
|
|
37
37
|
header,
|
|
38
38
|
subHeader,
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
{#each tableState.table.getHeaderGroups() as headerGroup, headerGroupIndex}
|
|
127
127
|
<Table.Row>
|
|
128
128
|
{#each headerGroup.headers as header, headerIndex}
|
|
129
|
-
<DataTableHeader {headerGroupIndex} {headerIndex}
|
|
129
|
+
<DataTableHeader {headerGroupIndex} {headerIndex} {tableState} {disableUISorting} />
|
|
130
130
|
{/each}
|
|
131
131
|
</Table.Row>
|
|
132
132
|
{/each}
|
|
@@ -173,7 +173,7 @@
|
|
|
173
173
|
{/if}
|
|
174
174
|
</div>
|
|
175
175
|
{#if isPaginationEnabled}
|
|
176
|
-
<Pagination
|
|
176
|
+
<Pagination {tableState} />
|
|
177
177
|
{/if}
|
|
178
178
|
|
|
179
179
|
{#if footer}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
disableUISorting?: boolean;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
let { headerGroupIndex, headerIndex, tableState
|
|
14
|
+
let { headerGroupIndex, headerIndex, tableState, disableUISorting = false }: Props<T> = $props();
|
|
15
15
|
|
|
16
16
|
const isSortingEnabled = $derived(
|
|
17
17
|
tableState.table.options.getSortedRowModel !== undefined && disableUISorting !== true
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
canChangePageSize?: boolean;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
let { tableState
|
|
15
|
+
let { tableState, canChangePageSize = false }: Props<T> = $props();
|
|
16
16
|
|
|
17
17
|
let value = $state(tableState.table.getState().pagination.pageSize.toString());
|
|
18
18
|
</script>
|
|
@@ -5,11 +5,11 @@ interface ShadTableOptions<TData extends RowData> extends Omit<TableOptions<TDat
|
|
|
5
5
|
enableVisibility?: boolean;
|
|
6
6
|
}
|
|
7
7
|
export declare class ShadTable<TData extends RowData> {
|
|
8
|
+
#private;
|
|
8
9
|
columns: ColumnDef<TData>[];
|
|
9
10
|
table: Table<TData>;
|
|
10
|
-
state: Partial<TableState>;
|
|
11
11
|
options: ShadTableOptions<TData>;
|
|
12
|
-
constructor(initOptions: ShadTableOptions<TData>);
|
|
12
|
+
constructor(initOptions: ShadTableOptions<TData>, stateUpdate?: (state: Partial<TableState>) => void);
|
|
13
13
|
updateOptions(): void;
|
|
14
14
|
private features;
|
|
15
15
|
}
|
|
@@ -2,9 +2,19 @@ import { createTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel,
|
|
|
2
2
|
export class ShadTable {
|
|
3
3
|
columns;
|
|
4
4
|
table;
|
|
5
|
-
state = $state({});
|
|
5
|
+
#state = $state({});
|
|
6
|
+
#stateUpdate;
|
|
6
7
|
options;
|
|
7
|
-
constructor(initOptions) {
|
|
8
|
+
constructor(initOptions, stateUpdate) {
|
|
9
|
+
if (stateUpdate) {
|
|
10
|
+
this.#stateUpdate = stateUpdate;
|
|
11
|
+
}
|
|
12
|
+
else {
|
|
13
|
+
this.#stateUpdate = (state) => {
|
|
14
|
+
console.log("state updated boii");
|
|
15
|
+
this.#state = state;
|
|
16
|
+
};
|
|
17
|
+
}
|
|
8
18
|
this.options = initOptions;
|
|
9
19
|
if (!this.options.getCoreRowModel) {
|
|
10
20
|
this.options.getCoreRowModel = getCoreRowModel();
|
|
@@ -22,24 +32,27 @@ export class ShadTable {
|
|
|
22
32
|
},
|
|
23
33
|
}, plainOptions);
|
|
24
34
|
this.table = createTable(resolvedOptions);
|
|
25
|
-
this
|
|
35
|
+
this.#state = this.table.initialState;
|
|
26
36
|
this.columns = this.options.columns;
|
|
27
37
|
this.features();
|
|
28
38
|
this.updateOptions();
|
|
29
39
|
$effect.pre(() => {
|
|
30
40
|
this.updateOptions();
|
|
31
41
|
});
|
|
42
|
+
$effect(() => {
|
|
43
|
+
this.#stateUpdate(this.#state);
|
|
44
|
+
});
|
|
32
45
|
}
|
|
33
46
|
updateOptions() {
|
|
34
47
|
this.table.setOptions((prev) => {
|
|
35
48
|
return mergeObjects(prev, this.options, {
|
|
36
|
-
state: mergeObjects(this
|
|
49
|
+
state: mergeObjects(this.#state, this.options.state || {}),
|
|
37
50
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
38
51
|
onStateChange: (updater) => {
|
|
39
52
|
if (updater instanceof Function)
|
|
40
|
-
this
|
|
53
|
+
this.#state = updater(this.#state);
|
|
41
54
|
else
|
|
42
|
-
this
|
|
55
|
+
this.#state = mergeObjects(this.#state, updater);
|
|
43
56
|
this.options.onStateChange?.(updater);
|
|
44
57
|
},
|
|
45
58
|
});
|
|
@@ -54,8 +67,8 @@ export class ShadTable {
|
|
|
54
67
|
if (this.options.state?.sorting) {
|
|
55
68
|
this.options.state.sorting = updater(this.options.state.sorting);
|
|
56
69
|
}
|
|
57
|
-
else if (this
|
|
58
|
-
this
|
|
70
|
+
else if (this.#state.sorting) {
|
|
71
|
+
this.#state.sorting = updater(this.#state.sorting);
|
|
59
72
|
}
|
|
60
73
|
}
|
|
61
74
|
else {
|
|
@@ -63,7 +76,7 @@ export class ShadTable {
|
|
|
63
76
|
this.options.state.sorting = updater;
|
|
64
77
|
}
|
|
65
78
|
else {
|
|
66
|
-
this
|
|
79
|
+
this.#state.sorting = updater;
|
|
67
80
|
}
|
|
68
81
|
}
|
|
69
82
|
};
|
|
@@ -76,8 +89,8 @@ export class ShadTable {
|
|
|
76
89
|
if (this.options.state?.pagination) {
|
|
77
90
|
this.options.state.pagination = updater(this.options.state.pagination);
|
|
78
91
|
}
|
|
79
|
-
else if (this
|
|
80
|
-
this
|
|
92
|
+
else if (this.#state.pagination) {
|
|
93
|
+
this.#state.pagination = updater(this.#state.pagination);
|
|
81
94
|
}
|
|
82
95
|
}
|
|
83
96
|
else {
|
|
@@ -85,7 +98,7 @@ export class ShadTable {
|
|
|
85
98
|
this.options.state.pagination = updater;
|
|
86
99
|
}
|
|
87
100
|
else {
|
|
88
|
-
this
|
|
101
|
+
this.#state.pagination = updater;
|
|
89
102
|
}
|
|
90
103
|
}
|
|
91
104
|
};
|
|
@@ -97,8 +110,8 @@ export class ShadTable {
|
|
|
97
110
|
if (this.options.state?.rowSelection) {
|
|
98
111
|
this.options.state.rowSelection = updater(this.options.state.rowSelection);
|
|
99
112
|
}
|
|
100
|
-
else if (this
|
|
101
|
-
this
|
|
113
|
+
else if (this.#state.rowSelection) {
|
|
114
|
+
this.#state.rowSelection = updater(this.#state.rowSelection);
|
|
102
115
|
}
|
|
103
116
|
}
|
|
104
117
|
else {
|
|
@@ -106,7 +119,7 @@ export class ShadTable {
|
|
|
106
119
|
this.options.state.rowSelection = updater;
|
|
107
120
|
}
|
|
108
121
|
else {
|
|
109
|
-
this
|
|
122
|
+
this.#state.rowSelection = updater;
|
|
110
123
|
}
|
|
111
124
|
}
|
|
112
125
|
};
|
|
@@ -118,8 +131,8 @@ export class ShadTable {
|
|
|
118
131
|
if (this.options.state?.columnVisibility) {
|
|
119
132
|
this.options.state.columnVisibility = updater(this.options.state.columnVisibility);
|
|
120
133
|
}
|
|
121
|
-
else if (this
|
|
122
|
-
this
|
|
134
|
+
else if (this.#state.columnVisibility) {
|
|
135
|
+
this.#state.columnVisibility = updater(this.#state.columnVisibility);
|
|
123
136
|
}
|
|
124
137
|
}
|
|
125
138
|
else {
|
|
@@ -127,7 +140,7 @@ export class ShadTable {
|
|
|
127
140
|
this.options.state.columnVisibility = updater;
|
|
128
141
|
}
|
|
129
142
|
else {
|
|
130
|
-
this
|
|
143
|
+
this.#state.columnVisibility = updater;
|
|
131
144
|
}
|
|
132
145
|
}
|
|
133
146
|
};
|