@kayord/ui 0.16.2 → 0.16.4

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.
Files changed (13) hide show
  1. package/dist/components/custom/data-table/DataTable.svelte +16 -39
  2. package/dist/components/custom/data-table/DataTable.svelte.d.ts +3 -3
  3. package/dist/components/custom/data-table/DataTableHeader.svelte +4 -10
  4. package/dist/components/custom/data-table/DataTableHeader.svelte.d.ts +4 -5
  5. package/dist/components/custom/data-table/Pagination.svelte +16 -21
  6. package/dist/components/custom/data-table/Pagination.svelte.d.ts +3 -3
  7. package/dist/components/custom/data-table/VisibilitySelect.svelte +4 -4
  8. package/dist/components/custom/data-table/VisibilitySelect.svelte.d.ts +3 -3
  9. package/dist/components/custom/data-table/index.d.ts +1 -1
  10. package/dist/components/custom/data-table/index.js +1 -1
  11. package/dist/components/custom/data-table/shad-table.svelte.d.ts +4 -2
  12. package/dist/components/custom/data-table/shad-table.svelte.js +179 -18
  13. package/package.json +3 -3
package/dist/components/custom/data-table/DataTable.svelte CHANGED
@@ -1,21 +1,19 @@
1
1
  <script lang="ts" generics="T">
2
- import { type ColumnDef, type Table as TableType } from "@tanstack/table-core";
3
- import { FlexRender, renderComponent } from "../../ui/data-table";
2
+ import { type Table as TableType } from "@tanstack/table-core";
3
+ import { FlexRender } from "../../ui/data-table";
4
4
  import { Skeleton, Table } from "../../ui";
5
5
  import Pagination from "./Pagination.svelte";
6
6
  import type { Snippet } from "svelte";
7
7
  import { fade } from "svelte/transition";
8
8
  import { ProgressLoading } from "../progress-loading";
9
- import DataTableCheckbox from "./DataTableCheckbox.svelte";
10
- import VisibilitySelect from "./VisibilitySelect.svelte";
11
9
  import FullscreenModeToggle from "./FullscreenModeToggle.svelte";
12
10
  import { cn } from "../../../utils";
13
11
  import { tableStore } from "./table.svelte";
14
12
  import DataTableHeader from "./DataTableHeader.svelte";
15
- import type { ShadTable } from "./shad-table.svelte";
13
+ import VisibilitySelect from "./VisibilitySelect.svelte";
16
14
 
17
15
  interface Props<T> {
18
- tableState: ShadTable<T>;
16
+ table: TableType<T>;
19
17
  isLoading?: boolean;
20
18
  header?: Snippet;
21
19
  subHeader?: Snippet;
@@ -32,7 +30,7 @@
32
30
  }
33
31
 
34
32
  let {
35
- tableState = $bindable(),
33
+ table,
36
34
  isLoading = false,
37
35
  header,
38
36
  subHeader,
@@ -48,28 +46,7 @@
48
46
  disableUISorting = false,
49
47
  }: Props<T> = $props();
50
48
 
51
- const isPaginationEnabled = tableState.table.options.getPaginationRowModel !== undefined;
52
- const enableRowSelection = tableState.table.options.enableRowSelection;
53
-
54
- if (enableRowSelection) {
55
- const rowSelectionColumn: ColumnDef<T> = {
56
- id: "select",
57
- // cell: (info) => "[]",
58
- header: () =>
59
- renderComponent(DataTableCheckbox, {
60
- checked: tableState.table.getIsAllPageRowsSelected(),
61
- onCheckedChange: () => tableState.table.toggleAllPageRowsSelected(),
62
- }),
63
- cell: (r) =>
64
- renderComponent(DataTableCheckbox, {
65
- checked: r.row.getIsSelected(),
66
- onCheckedChange: () => r.row.toggleSelected(),
67
- }),
68
- enableResizing: false,
69
- enableSorting: false,
70
- };
71
- tableState.columns.unshift(rowSelectionColumn);
72
- }
49
+ const isPaginationEnabled = table.options.getPaginationRowModel !== undefined;
73
50
  </script>
74
51
 
75
52
  <div
@@ -96,7 +73,7 @@
96
73
  {/if}
97
74
  {#if enableVisibility}
98
75
  <div>
99
- <VisibilitySelect bind:tableState />
76
+ <VisibilitySelect {table} />
100
77
  </div>
101
78
  {/if}
102
79
  {#if enableFullscreen}
@@ -123,10 +100,10 @@
123
100
  <Table.Root class="table-auto">
124
101
  {#if !hideHeader}
125
102
  <Table.Header>
126
- {#each tableState.table.getHeaderGroups() as headerGroup, headerGroupIndex}
103
+ {#each table.getHeaderGroups() as headerGroup}
127
104
  <Table.Row>
128
- {#each headerGroup.headers as header, headerIndex}
129
- <DataTableHeader {headerGroupIndex} {headerIndex} bind:tableState {disableUISorting} />
105
+ {#each headerGroup.headers as header}
106
+ <DataTableHeader {header} {table} {disableUISorting} />
130
107
  {/each}
131
108
  </Table.Row>
132
109
  {/each}
@@ -134,10 +111,10 @@
134
111
  {/if}
135
112
 
136
113
  <Table.Body>
137
- {#if isLoading && tableState.table.getRowModel().rows.length == 0}
114
+ {#if isLoading && table.getRowModel().rows.length == 0}
138
115
  {#each { length: 5 } as _, i}
139
116
  <Table.Row>
140
- {#each tableState.columns as _cell}
117
+ {#each table.getAllColumns() as _cell}
141
118
  <Table.Cell>
142
119
  <Skeleton class="h-4" />
143
120
  </Table.Cell>
@@ -145,14 +122,14 @@
145
122
  </Table.Row>
146
123
  {/each}
147
124
  {:else}
148
- {#if tableState.table.getRowModel().rows.length == 0}
125
+ {#if table.getRowModel().rows.length == 0}
149
126
  <Table.Row>
150
- <Table.Cell colspan={tableState.table.getAllColumns().length}>
127
+ <Table.Cell colspan={table.getAllColumns().length}>
151
128
  <div class="text-center">{noDataMessage}</div>
152
129
  </Table.Cell>
153
130
  </Table.Row>
154
131
  {/if}
155
- {#each tableState.table.getRowModel().rows as row}
132
+ {#each table.getRowModel().rows as row}
156
133
  <Table.Row data-state={row.getIsSelected() && "selected"}>
157
134
  {#each row.getVisibleCells() as cell}
158
135
  <Table.Cell
@@ -173,7 +150,7 @@
173
150
  {/if}
174
151
  </div>
175
152
  {#if isPaginationEnabled}
176
- <Pagination bind:tableState />
153
+ <Pagination {table} />
177
154
  {/if}
178
155
 
179
156
  {#if footer}
package/dist/components/custom/data-table/DataTable.svelte.d.ts CHANGED
@@ -1,7 +1,7 @@
1
+ import { type Table as TableType } from "@tanstack/table-core";
1
2
  import type { Snippet } from "svelte";
2
- import type { ShadTable } from "./shad-table.svelte";
3
3
  interface Props<T> {
4
- tableState: ShadTable<T>;
4
+ table: TableType<T>;
5
5
  isLoading?: boolean;
6
6
  header?: Snippet;
7
7
  subHeader?: Snippet;
@@ -20,7 +20,7 @@ declare class __sveltets_Render<T> {
20
20
  props(): Props<T>;
21
21
  events(): {};
22
22
  slots(): {};
23
- bindings(): "tableState";
23
+ bindings(): "";
24
24
  exports(): {};
25
25
  }
26
26
  interface $$IsomorphicComponent {
package/dist/components/custom/data-table/DataTableHeader.svelte CHANGED
@@ -2,22 +2,16 @@
2
2
  import { FlexRender, Table } from "../../..";
3
3
  import { type Header, type Table as TypeType } from "@tanstack/table-core";
4
4
  import { ArrowUpDownIcon, ArrowDownIcon, ArrowUpIcon } from "@lucide/svelte";
5
- import type { ShadTable } from "./shad-table.svelte";
6
5
 
7
6
  interface Props<T> {
8
- headerGroupIndex: number;
9
- headerIndex: number;
10
- tableState: ShadTable<T>;
7
+ header: Header<T, unknown>;
8
+ table: TypeType<T>;
11
9
  disableUISorting?: boolean;
12
10
  }
13
11
 
14
- let { headerGroupIndex, headerIndex, tableState = $bindable(), disableUISorting = false }: Props<T> = $props();
12
+ let { header, table, disableUISorting = false }: Props<T> = $props();
15
13
 
16
- const isSortingEnabled = $derived(
17
- tableState.table.options.getSortedRowModel !== undefined && disableUISorting !== true
18
- );
19
-
20
- const header = tableState.table.getHeaderGroups()[headerGroupIndex].headers[headerIndex];
14
+ const isSortingEnabled = $derived(table.options.getSortedRowModel !== undefined && disableUISorting !== true);
21
15
  </script>
22
16
 
23
17
  <Table.Head
package/dist/components/custom/data-table/DataTableHeader.svelte.d.ts CHANGED
@@ -1,15 +1,14 @@
1
- import type { ShadTable } from "./shad-table.svelte";
1
+ import { type Header, type Table as TypeType } from "@tanstack/table-core";
2
2
  interface Props<T> {
3
- headerGroupIndex: number;
4
- headerIndex: number;
5
- tableState: ShadTable<T>;
3
+ header: Header<T, unknown>;
4
+ table: TypeType<T>;
6
5
  disableUISorting?: boolean;
7
6
  }
8
7
  declare class __sveltets_Render<T> {
9
8
  props(): Props<T>;
10
9
  events(): {};
11
10
  slots(): {};
12
- bindings(): "tableState";
11
+ bindings(): "";
13
12
  exports(): {};
14
13
  }
15
14
  interface $$IsomorphicComponent {
package/dist/components/custom/data-table/Pagination.svelte CHANGED
@@ -8,20 +8,20 @@
8
8
  import type { ShadTable } from "./shad-table.svelte";
9
9
 
10
10
  interface Props<T> {
11
- tableState: ShadTable<T>;
11
+ table: Table<T>;
12
12
  canChangePageSize?: boolean;
13
13
  }
14
14
 
15
- let { tableState = $bindable(), canChangePageSize = false }: Props<T> = $props();
15
+ let { table, canChangePageSize = false }: Props<T> = $props();
16
16
 
17
- let value = $state(tableState.table.getState().pagination.pageSize.toString());
17
+ let value = $state(table.getState().pagination.pageSize.toString());
18
18
  </script>
19
19
 
20
20
  <div class="flex items-center justify-between py-2">
21
21
  <div class="text-muted-foreground flex-1 text-sm">
22
- {#if tableState.table.options.enableRowSelection}
23
- {tableState.table.getFilteredSelectedRowModel().rows.length} of
24
- {tableState.table.getFilteredRowModel().rows.length} row(s) selected.
22
+ {#if table.options.enableRowSelection}
23
+ {table.getFilteredSelectedRowModel().rows.length} of
24
+ {table.getFilteredRowModel().rows.length} row(s) selected.
25
25
  {/if}
26
26
  </div>
27
27
  <div class="flex items-center space-x-6 lg:space-x-8">
@@ -32,7 +32,7 @@
32
32
  type="single"
33
33
  bind:value
34
34
  onValueChange={(value) => {
35
- tableState.table.setPageSize(Number(value));
35
+ table.setPageSize(Number(value));
36
36
  }}
37
37
  >
38
38
  <Select.Trigger class="h-8 w-[70px]">Select page size</Select.Trigger>
@@ -47,15 +47,15 @@
47
47
  {/if}
48
48
  </div>
49
49
  <div class="flex w-[100px] items-center justify-center text-sm font-medium">
50
- Page {tableState.table.getState().pagination.pageIndex + 1} of
51
- {tableState.table.getPageCount()}
50
+ Page {table.getState().pagination.pageIndex + 1} of
51
+ {table.getPageCount()}
52
52
  </div>
53
53
  <div class="flex items-center space-x-2">
54
54
  <Button
55
55
  variant="outline"
56
56
  class="hidden size-8 p-0 lg:flex"
57
- onclick={() => tableState.table.setPageIndex(0)}
58
- disabled={!tableState.table.getCanPreviousPage()}
57
+ onclick={() => table.setPageIndex(0)}
58
+ disabled={!table.getCanPreviousPage()}
59
59
  >
60
60
  <span class="sr-only">Go to first page</span>
61
61
  <DoubleArrowLeft class="size-4" />
@@ -63,26 +63,21 @@
63
63
  <Button
64
64
  variant="outline"
65
65
  class="size-8 p-0"
66
- onclick={() => tableState.table.previousPage()}
67
- disabled={!tableState.table.getCanPreviousPage()}
66
+ onclick={() => table.previousPage()}
67
+ disabled={!table.getCanPreviousPage()}
68
68
  >
69
69
  <span class="sr-only">Go to previous page</span>
70
70
  <ChevronLeft class="size-4" />
71
71
  </Button>
72
- <Button
73
- variant="outline"
74
- class="size-8 p-0"
75
- onclick={() => tableState.table.nextPage()}
76
- disabled={!tableState.table.getCanNextPage()}
77
- >
72
+ <Button variant="outline" class="size-8 p-0" onclick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
78
73
  <span class="sr-only">Go to next page</span>
79
74
  <ChevronRight class="size-4" />
80
75
  </Button>
81
76
  <Button
82
77
  variant="outline"
83
78
  class="hidden size-8 p-0 lg:flex"
84
- onclick={() => tableState.table.setPageIndex(tableState.table.getPageCount() - 1)}
85
- disabled={!tableState.table.getCanNextPage()}
79
+ onclick={() => table.setPageIndex(table.getPageCount() - 1)}
80
+ disabled={!table.getCanNextPage()}
86
81
  >
87
82
  <span class="sr-only">Go to last page</span>
88
83
  <DoubleArrowRight class="size-4" />
package/dist/components/custom/data-table/Pagination.svelte.d.ts CHANGED
@@ -1,13 +1,13 @@
1
- import type { ShadTable } from "./shad-table.svelte";
1
+ import type { Table } from "@tanstack/table-core";
2
2
  interface Props<T> {
3
- tableState: ShadTable<T>;
3
+ table: Table<T>;
4
4
  canChangePageSize?: boolean;
5
5
  }
6
6
  declare class __sveltets_Render<T> {
7
7
  props(): Props<T>;
8
8
  events(): {};
9
9
  slots(): {};
10
- bindings(): "tableState";
10
+ bindings(): "";
11
11
  exports(): {};
12
12
  }
13
13
  interface $$IsomorphicComponent {
package/dist/components/custom/data-table/VisibilitySelect.svelte CHANGED
@@ -2,13 +2,13 @@
2
2
  import * as DropdownMenu from "../../ui/dropdown-menu";
3
3
  import { Button } from "../../ui/button";
4
4
  import { Settings2Icon } from "@lucide/svelte";
5
- import type { ShadTable } from "./shad-table.svelte";
5
+ import type { Table } from "@tanstack/table-core";
6
6
 
7
7
  interface Props<T> {
8
- tableState: ShadTable<T>;
8
+ table: Table<T>;
9
9
  }
10
10
 
11
- let { tableState = $bindable() }: Props<T> = $props();
11
+ let { table }: Props<T> = $props();
12
12
  </script>
13
13
 
14
14
  <DropdownMenu.Root>
@@ -20,7 +20,7 @@
20
20
  <DropdownMenu.Content>
21
21
  <DropdownMenu.Label>Toggle columns</DropdownMenu.Label>
22
22
  <DropdownMenu.Separator />
23
- {#each tableState.table.getAllLeafColumns() as column}
23
+ {#each table.getAllLeafColumns() as column}
24
24
  <DropdownMenu.CheckboxItem checked={column.getIsVisible()} onCheckedChange={() => column.toggleVisibility()}>
25
25
  {column.id}
26
26
  </DropdownMenu.CheckboxItem>
package/dist/components/custom/data-table/VisibilitySelect.svelte.d.ts CHANGED
@@ -1,12 +1,12 @@
1
- import type { ShadTable } from "./shad-table.svelte";
1
+ import type { Table } from "@tanstack/table-core";
2
2
  interface Props<T> {
3
- tableState: ShadTable<T>;
3
+ table: Table<T>;
4
4
  }
5
5
  declare class __sveltets_Render<T> {
6
6
  props(): Props<T>;
7
7
  events(): {};
8
8
  slots(): {};
9
- bindings(): "tableState";
9
+ bindings(): "";
10
10
  exports(): {};
11
11
  }
12
12
  interface $$IsomorphicComponent {
package/dist/components/custom/data-table/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export { default as DataTable } from "./DataTable.svelte";
2
- export { ShadTable } from "./shad-table.svelte";
2
+ export { ShadTable, createShadSvelteTable } from "./shad-table.svelte";
package/dist/components/custom/data-table/index.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export { default as DataTable } from "./DataTable.svelte";
2
- export { ShadTable } from "./shad-table.svelte";
2
+ export { ShadTable, createShadSvelteTable } from "./shad-table.svelte";
package/dist/components/custom/data-table/shad-table.svelte.d.ts CHANGED
@@ -3,13 +3,15 @@ interface ShadTableOptions<TData extends RowData> extends Omit<TableOptions<TDat
3
3
  getCoreRowModel?: (table: Table<any>) => () => RowModel<any>;
4
4
  enablePaging?: boolean;
5
5
  enableVisibility?: boolean;
6
+ enableRowSelectionUI?: boolean;
6
7
  }
8
+ export declare function createShadSvelteTable<TData extends RowData>(shadOptions: ShadTableOptions<TData>, stateUpdate?: (state: Partial<TableState>) => void): Table<TData>;
7
9
  export declare class ShadTable<TData extends RowData> {
10
+ #private;
8
11
  columns: ColumnDef<TData>[];
9
12
  table: Table<TData>;
10
- state: Partial<TableState>;
11
13
  options: ShadTableOptions<TData>;
12
- constructor(initOptions: ShadTableOptions<TData>);
14
+ constructor(initOptions: ShadTableOptions<TData>, stateUpdate?: (state: Partial<TableState>) => void);
13
15
  updateOptions(): void;
14
16
  private features;
15
17
  }
package/dist/components/custom/data-table/shad-table.svelte.js CHANGED
@@ -1,10 +1,168 @@
1
1
  import { createTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, } from "@tanstack/table-core";
2
+ import DataTableCheckbox from "./DataTableCheckbox.svelte";
3
+ import { renderComponent } from "../../ui";
4
+ export function createShadSvelteTable(shadOptions, stateUpdate) {
5
+ if (!shadOptions.getCoreRowModel) {
6
+ shadOptions.getCoreRowModel = getCoreRowModel();
7
+ }
8
+ if ((shadOptions.enablePaging ?? true) == false) {
9
+ shadOptions.manualPagination = true;
10
+ }
11
+ const options = shadOptions;
12
+ // Features
13
+ // Sorting
14
+ if ((options.enableSorting ?? true) && !options.getSortedRowModel) {
15
+ options.getSortedRowModel = getSortedRowModel();
16
+ options.onSortingChange = (updater) => {
17
+ if (typeof updater === "function") {
18
+ if (options.state?.sorting) {
19
+ options.state.sorting = updater(options.state.sorting);
20
+ }
21
+ else if (state.sorting) {
22
+ state.sorting = updater(state.sorting);
23
+ }
24
+ }
25
+ else {
26
+ if (options.state?.sorting) {
27
+ options.state.sorting = updater;
28
+ }
29
+ else {
30
+ state.sorting = updater;
31
+ }
32
+ }
33
+ };
34
+ }
35
+ // Paging
36
+ if ((shadOptions.enablePaging ?? true) && !options.getPaginationRowModel) {
37
+ options.getPaginationRowModel = getPaginationRowModel();
38
+ options.onPaginationChange = (updater) => {
39
+ if (typeof updater === "function") {
40
+ if (options.state?.pagination) {
41
+ options.state.pagination = updater(options.state.pagination);
42
+ }
43
+ else if (state.pagination) {
44
+ state.pagination = updater(state.pagination);
45
+ }
46
+ }
47
+ else {
48
+ if (options.state?.pagination) {
49
+ options.state.pagination = updater;
50
+ }
51
+ else {
52
+ state.pagination = updater;
53
+ }
54
+ }
55
+ };
56
+ }
57
+ // Row Selection
58
+ if ((options.enableRowSelection ?? true) && !options.onRowSelectionChange) {
59
+ options.onRowSelectionChange = (updater) => {
60
+ if (typeof updater === "function") {
61
+ if (options.state?.rowSelection) {
62
+ options.state.rowSelection = updater(options.state.rowSelection);
63
+ }
64
+ else if (state.rowSelection) {
65
+ state.rowSelection = updater(state.rowSelection);
66
+ }
67
+ }
68
+ else {
69
+ if (options.state?.rowSelection) {
70
+ options.state.rowSelection = updater;
71
+ }
72
+ else {
73
+ state.rowSelection = updater;
74
+ }
75
+ }
76
+ };
77
+ }
78
+ if (options.enableRowSelection && (shadOptions.enableRowSelectionUI ?? true)) {
79
+ const rowSelectionColumn = {
80
+ id: "select",
81
+ header: () => renderComponent(DataTableCheckbox, {
82
+ checked: table.getIsAllPageRowsSelected(),
83
+ onCheckedChange: () => table.toggleAllPageRowsSelected(),
84
+ }),
85
+ cell: (r) => renderComponent(DataTableCheckbox, {
86
+ checked: r.row.getIsSelected(),
87
+ onCheckedChange: () => r.row.toggleSelected(),
88
+ }),
89
+ enableResizing: false,
90
+ enableSorting: false,
91
+ };
92
+ options.columns.unshift(rowSelectionColumn);
93
+ }
94
+ // Column Visibility
95
+ if ((shadOptions.enableVisibility ?? false) && !options.onColumnVisibilityChange) {
96
+ options.onColumnVisibilityChange = (updater) => {
97
+ if (typeof updater === "function") {
98
+ if (options.state?.columnVisibility) {
99
+ options.state.columnVisibility = updater(options.state.columnVisibility);
100
+ }
101
+ else if (state.columnVisibility) {
102
+ state.columnVisibility = updater(state.columnVisibility);
103
+ }
104
+ }
105
+ else {
106
+ if (options.state?.columnVisibility) {
107
+ options.state.columnVisibility = updater;
108
+ }
109
+ else {
110
+ state.columnVisibility = updater;
111
+ }
112
+ }
113
+ };
114
+ }
115
+ const resolvedOptions = mergeObjects({
116
+ state: {},
117
+ onStateChange() { },
118
+ renderFallbackValue: null,
119
+ mergeOptions: (defaultOptions, options) => {
120
+ return mergeObjects(defaultOptions, options);
121
+ },
122
+ }, options);
123
+ const table = createTable(resolvedOptions);
124
+ let state = $state(table.initialState);
125
+ const updateOptions = (table, state) => {
126
+ table.setOptions((prev) => {
127
+ return mergeObjects(prev, options, {
128
+ state: mergeObjects(state, options.state || {}),
129
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
130
+ onStateChange: (updater) => {
131
+ if (updater instanceof Function)
132
+ state = updater(state);
133
+ else
134
+ state = mergeObjects(state, updater);
135
+ options.onStateChange?.(updater);
136
+ },
137
+ });
138
+ });
139
+ };
140
+ updateOptions(table, state);
141
+ // $effect.pre(() => {
142
+ // updateOptions(table, state);
143
+ // });
144
+ if (stateUpdate) {
145
+ $effect.pre(() => {
146
+ stateUpdate(state);
147
+ });
148
+ }
149
+ return table;
150
+ }
2
151
  export class ShadTable {
3
152
  columns;
4
153
  table;
5
- state = $state({});
154
+ #state = $state({});
155
+ #stateUpdate;
6
156
  options;
7
- constructor(initOptions) {
157
+ constructor(initOptions, stateUpdate) {
158
+ if (stateUpdate) {
159
+ this.#stateUpdate = stateUpdate;
160
+ }
161
+ else {
162
+ this.#stateUpdate = (state) => {
163
+ this.#state = state;
164
+ };
165
+ }
8
166
  this.options = initOptions;
9
167
  if (!this.options.getCoreRowModel) {
10
168
  this.options.getCoreRowModel = getCoreRowModel();
@@ -22,24 +180,27 @@ export class ShadTable {
22
180
  },
23
181
  }, plainOptions);
24
182
  this.table = createTable(resolvedOptions);
25
- this.state = this.table.initialState;
183
+ this.#state = this.table.initialState;
26
184
  this.columns = this.options.columns;
27
185
  this.features();
28
186
  this.updateOptions();
29
187
  $effect.pre(() => {
30
188
  this.updateOptions();
31
189
  });
190
+ $effect(() => {
191
+ this.#stateUpdate(this.#state);
192
+ });
32
193
  }
33
194
  updateOptions() {
34
195
  this.table.setOptions((prev) => {
35
196
  return mergeObjects(prev, this.options, {
36
- state: mergeObjects(this.state, this.options.state || {}),
197
+ state: mergeObjects(this.#state, this.options.state || {}),
37
198
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
38
199
  onStateChange: (updater) => {
39
200
  if (updater instanceof Function)
40
- this.state = updater(this.state);
201
+ this.#state = updater(this.#state);
41
202
  else
42
- this.state = mergeObjects(this.state, updater);
203
+ this.#state = mergeObjects(this.#state, updater);
43
204
  this.options.onStateChange?.(updater);
44
205
  },
45
206
  });
@@ -54,8 +215,8 @@ export class ShadTable {
54
215
  if (this.options.state?.sorting) {
55
216
  this.options.state.sorting = updater(this.options.state.sorting);
56
217
  }
57
- else if (this.state.sorting) {
58
- this.state.sorting = updater(this.state.sorting);
218
+ else if (this.#state.sorting) {
219
+ this.#state.sorting = updater(this.#state.sorting);
59
220
  }
60
221
  }
61
222
  else {
@@ -63,7 +224,7 @@ export class ShadTable {
63
224
  this.options.state.sorting = updater;
64
225
  }
65
226
  else {
66
- this.state.sorting = updater;
227
+ this.#state.sorting = updater;
67
228
  }
68
229
  }
69
230
  };
@@ -76,8 +237,8 @@ export class ShadTable {
76
237
  if (this.options.state?.pagination) {
77
238
  this.options.state.pagination = updater(this.options.state.pagination);
78
239
  }
79
- else if (this.state.pagination) {
80
- this.state.pagination = updater(this.state.pagination);
240
+ else if (this.#state.pagination) {
241
+ this.#state.pagination = updater(this.#state.pagination);
81
242
  }
82
243
  }
83
244
  else {
@@ -85,7 +246,7 @@ export class ShadTable {
85
246
  this.options.state.pagination = updater;
86
247
  }
87
248
  else {
88
- this.state.pagination = updater;
249
+ this.#state.pagination = updater;
89
250
  }
90
251
  }
91
252
  };
@@ -97,8 +258,8 @@ export class ShadTable {
97
258
  if (this.options.state?.rowSelection) {
98
259
  this.options.state.rowSelection = updater(this.options.state.rowSelection);
99
260
  }
100
- else if (this.state.rowSelection) {
101
- this.state.rowSelection = updater(this.state.rowSelection);
261
+ else if (this.#state.rowSelection) {
262
+ this.#state.rowSelection = updater(this.#state.rowSelection);
102
263
  }
103
264
  }
104
265
  else {
@@ -106,7 +267,7 @@ export class ShadTable {
106
267
  this.options.state.rowSelection = updater;
107
268
  }
108
269
  else {
109
- this.state.rowSelection = updater;
270
+ this.#state.rowSelection = updater;
110
271
  }
111
272
  }
112
273
  };
@@ -118,8 +279,8 @@ export class ShadTable {
118
279
  if (this.options.state?.columnVisibility) {
119
280
  this.options.state.columnVisibility = updater(this.options.state.columnVisibility);
120
281
  }
121
- else if (this.state.columnVisibility) {
122
- this.state.columnVisibility = updater(this.state.columnVisibility);
282
+ else if (this.#state.columnVisibility) {
283
+ this.#state.columnVisibility = updater(this.#state.columnVisibility);
123
284
  }
124
285
  }
125
286
  else {
@@ -127,7 +288,7 @@ export class ShadTable {
127
288
  this.options.state.columnVisibility = updater;
128
289
  }
129
290
  else {
130
- this.state.columnVisibility = updater;
291
+ this.#state.columnVisibility = updater;
131
292
  }
132
293
  }
133
294
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@kayord/ui",
3
3
  "private": false,
4
- "version": "0.16.2",
4
+ "version": "0.16.4",
5
5
  "exports": {
6
6
  ".": {
7
7
  "types": "./dist/index.d.ts",
@@ -46,7 +46,7 @@
46
46
  "vaul-svelte": "1.0.0-next.7"
47
47
  },
48
48
  "devDependencies": {
49
- "@lucide/svelte": "^0.484.0",
49
+ "@lucide/svelte": "^0.485.0",
50
50
  "@sveltejs/adapter-auto": "^5.0.0",
51
51
  "@sveltejs/kit": "^2.20.2",
52
52
  "@sveltejs/package": "^2.3.10",
@@ -68,7 +68,7 @@
68
68
  "svelte-check": "^4.1.5",
69
69
  "tailwindcss": "^4.0.17",
70
70
  "tslib": "^2.8.1",
71
- "tw-animate-css": "1.2.4",
71
+ "tw-animate-css": "1.2.5",
72
72
  "typescript": "^5.8.2",
73
73
  "vite": "^6.2.3",
74
74
  "vitest": "^3.0.9",