@humanspeak/svelte-headless-table 5.0.4 → 6.0.0
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/README.md +8 -5
- package/dist/bodyRows.d.ts +6 -2
- package/dist/createViewModel.d.ts +3 -3
- package/dist/createViewModel.js +1 -1
- package/dist/plugins/addDataExport.js +0 -2
- package/dist/plugins/addFlatten.d.ts +1 -1
- package/dist/plugins/addGroupBy.js +0 -1
- package/dist/plugins/addPagination.d.ts +1 -1
- package/package.json +41 -31
package/README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
</p>
|
|
4
|
-
<h1 align="center">Svelte Headless Table</h1>
|
|
5
|
-
|
|
1
|
+
<!-- trunk-ignore-all(markdownlint/MD033) -->
|
|
2
|
+
<!-- trunk-ignore(markdownlint/MD041) -->
|
|
6
3
|
<div align="center">
|
|
7
4
|
|
|
5
|
+
<img src="https://user-images.githubusercontent.com/42545742/169733428-295e2678-e509-4175-aeb3-cb3a9c9894e1.svg" alt="svelte-headless-table" width="400" />
|
|
6
|
+
|
|
7
|
+
# Svelte Headless Table
|
|
8
|
+
|
|
9
|
+
</div>
|
|
10
|
+
|
|
8
11
|
[](https://www.npmjs.com/package/@humanspeak/svelte-headless-table)
|
|
9
12
|
[](https://github.com/humanspeak/svelte-headless-table/actions/workflows/npm-publish.yml)
|
|
10
13
|
[](https://coveralls.io/github/humanspeak/svelte-headless-table?branch=main)
|
package/dist/bodyRows.d.ts
CHANGED
|
@@ -60,7 +60,11 @@ export interface BodyRowsOptions<Item> {
|
|
|
60
60
|
* @param flatColumns The column structure.
|
|
61
61
|
* @returns An array of `BodyRow`s representing the table structure.
|
|
62
62
|
*/
|
|
63
|
-
export declare const getBodyRows: <Item, Plugins extends AnyPlugins = AnyPlugins>(data: Item[],
|
|
63
|
+
export declare const getBodyRows: <Item, Plugins extends AnyPlugins = AnyPlugins>(data: Item[],
|
|
64
|
+
/**
|
|
65
|
+
* Flat columns before column transformations.
|
|
66
|
+
*/
|
|
67
|
+
flatColumns: FlatColumn<Item, Plugins>[], { rowDataId }?: BodyRowsOptions<Item>) => DataBodyRow<Item, Plugins>[];
|
|
64
68
|
/**
|
|
65
69
|
* Arranges and hides columns in an array of `BodyRow`s based on
|
|
66
70
|
* `columnIdOrder` by transforming the `cells` property of each row.
|
|
@@ -71,7 +75,7 @@ export declare const getBodyRows: <Item, Plugins extends AnyPlugins = AnyPlugins
|
|
|
71
75
|
* @param columnIdOrder The column order to transform to.
|
|
72
76
|
* @returns A new array of `BodyRow`s with corrected row references.
|
|
73
77
|
*/
|
|
74
|
-
export declare const getColumnedBodyRows: <Item, Plugins extends AnyPlugins = AnyPlugins>(rows:
|
|
78
|
+
export declare const getColumnedBodyRows: <Item, Plugins extends AnyPlugins = AnyPlugins>(rows: DataBodyRow<Item, Plugins>[], columnIdOrder: string[]) => DataBodyRow<Item, Plugins>[];
|
|
75
79
|
/**
|
|
76
80
|
* Converts an array of items into an array of table `BodyRow`s based on a parent row.
|
|
77
81
|
* @param subItems The sub data to display.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type Readable, type Writable } from 'svelte/store';
|
|
2
|
-
import { BodyRow } from './bodyRows.js';
|
|
2
|
+
import { BodyRow, DataBodyRow } from './bodyRows.js';
|
|
3
3
|
import { FlatColumn, type Column } from './columns.js';
|
|
4
4
|
import type { Table } from './createTable.js';
|
|
5
5
|
import { HeaderRow } from './headerRows.js';
|
|
@@ -19,8 +19,8 @@ export interface TableViewModel<Item, Plugins extends AnyPlugins = AnyPlugins> {
|
|
|
19
19
|
visibleColumns: Readable<FlatColumn<Item, Plugins>[]>;
|
|
20
20
|
headerRows: Readable<HeaderRow<Item, Plugins>[]>;
|
|
21
21
|
originalRows: Readable<BodyRow<Item, Plugins>[]>;
|
|
22
|
-
rows: Readable<
|
|
23
|
-
pageRows: Readable<
|
|
22
|
+
rows: Readable<DataBodyRow<Item, Plugins>[]>;
|
|
23
|
+
pageRows: Readable<DataBodyRow<Item, Plugins>[]>;
|
|
24
24
|
pluginStates: PluginStates<Plugins>;
|
|
25
25
|
}
|
|
26
26
|
export type ReadOrWritable<T> = Readable<T> | Writable<T>;
|
package/dist/createViewModel.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { derived, readable, writable } from 'svelte/store';
|
|
2
|
-
import { BodyRow, getBodyRows, getColumnedBodyRows } from './bodyRows.js';
|
|
2
|
+
import { BodyRow, DataBodyRow, getBodyRows, getColumnedBodyRows } from './bodyRows.js';
|
|
3
3
|
import { FlatColumn, getFlatColumns } from './columns.js';
|
|
4
4
|
import { getHeaderRows, HeaderRow } from './headerRows.js';
|
|
5
5
|
import { finalizeAttributes } from './utils/attributes.js';
|
|
@@ -8,7 +8,6 @@ const getObjectsFromRows = (rows, ids, childrenKey) => {
|
|
|
8
8
|
return [id, cell.value];
|
|
9
9
|
}
|
|
10
10
|
if (cell.isDisplay() && cell.column.data !== undefined) {
|
|
11
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12
11
|
let data = cell.column.data(cell, row.state);
|
|
13
12
|
if (isReadable(data)) {
|
|
14
13
|
data = get(data);
|
|
@@ -31,7 +30,6 @@ const getCsvFromRows = (rows, ids) => {
|
|
|
31
30
|
return cell.value;
|
|
32
31
|
}
|
|
33
32
|
if (cell.isDisplay() && cell.column.data !== undefined) {
|
|
34
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
35
33
|
let data = cell.column.data(cell, row.state);
|
|
36
34
|
if (isReadable(data)) {
|
|
37
35
|
data = get(data);
|
|
@@ -7,7 +7,7 @@ export interface FlattenConfig {
|
|
|
7
7
|
export interface FlattenState {
|
|
8
8
|
depth: Writable<number>;
|
|
9
9
|
}
|
|
10
|
-
export interface FlattenColumnOptions<Item> {
|
|
10
|
+
export interface FlattenColumnOptions<Item> extends Record<string, never> {
|
|
11
11
|
}
|
|
12
12
|
export type FlattenPropSet = NewTablePropSet<{
|
|
13
13
|
'tbody.tr.td': {
|
|
@@ -21,7 +21,6 @@ const deepenIdAndDepth = (row, parentId) => {
|
|
|
21
21
|
row.depth = row.depth + 1;
|
|
22
22
|
row.subRows?.forEach((subRow) => deepenIdAndDepth(subRow, parentId));
|
|
23
23
|
};
|
|
24
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
25
24
|
export const getGroupedRows = (rows, groupByIds, columnOptions, { repeatCellIds, aggregateCellIds, groupCellIds, allGroupByIds }) => {
|
|
26
25
|
if (groupByIds.length === 0) {
|
|
27
26
|
return rows;
|
|
@@ -19,7 +19,7 @@ export interface PaginationState {
|
|
|
19
19
|
}
|
|
20
20
|
export declare const createPageStore: ({ items, initialPageSize, initialPageIndex, serverSide, serverItemCount }: PageStoreConfig) => {
|
|
21
21
|
pageSize: {
|
|
22
|
-
subscribe: (this: void, run: import("svelte/store").Subscriber<number>, invalidate?:
|
|
22
|
+
subscribe: (this: void, run: import("svelte/store").Subscriber<number>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
|
|
23
23
|
update: (fn: Updater<number>) => void;
|
|
24
24
|
set: (newPageSize: number) => void;
|
|
25
25
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@humanspeak/svelte-headless-table",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0",
|
|
4
4
|
"description": "A powerful, headless table library for Svelte that provides complete control over table UI while handling complex data operations like sorting, filtering, pagination, grouping, and row expansion. Build custom, accessible data tables with zero styling opinions.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"svelte",
|
|
@@ -59,6 +59,7 @@
|
|
|
59
59
|
],
|
|
60
60
|
"scripts": {
|
|
61
61
|
"build": "vite build && npm run package",
|
|
62
|
+
"changeset": "npx @changesets/cli",
|
|
62
63
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
63
64
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
64
65
|
"dev": "vite dev",
|
|
@@ -75,46 +76,55 @@
|
|
|
75
76
|
"test:e2e:report": "playwright show-report",
|
|
76
77
|
"test:e2e:ui": "playwright test --ui",
|
|
77
78
|
"test:only": "vitest run",
|
|
79
|
+
"test:unit": "vitest",
|
|
80
|
+
"test:unit:ui": "vitest --ui",
|
|
78
81
|
"test:watch": "vitest"
|
|
79
82
|
},
|
|
80
83
|
"dependencies": {
|
|
81
84
|
"@humanspeak/svelte-keyed": "^5.0.1",
|
|
82
|
-
"@humanspeak/svelte-render": "^5.
|
|
85
|
+
"@humanspeak/svelte-render": "^5.1.1",
|
|
83
86
|
"@humanspeak/svelte-subscribe": "^5.0.0"
|
|
84
87
|
},
|
|
85
88
|
"devDependencies": {
|
|
86
|
-
"@
|
|
87
|
-
"@
|
|
88
|
-
"@
|
|
89
|
-
"@
|
|
90
|
-
"@sveltejs/
|
|
91
|
-
"@sveltejs/
|
|
92
|
-
"@
|
|
93
|
-
"@
|
|
94
|
-
"@
|
|
95
|
-
"@
|
|
96
|
-
"@
|
|
97
|
-
"@
|
|
98
|
-
"@
|
|
99
|
-
"eslint": "^
|
|
100
|
-
"
|
|
101
|
-
"eslint
|
|
102
|
-
"
|
|
103
|
-
"
|
|
89
|
+
"@eslint/compat": "^1.2.9",
|
|
90
|
+
"@eslint/js": "^9.27.0",
|
|
91
|
+
"@faker-js/faker": "^9.8.0",
|
|
92
|
+
"@playwright/test": "^1.52.0",
|
|
93
|
+
"@sveltejs/adapter-auto": "^6.0.1",
|
|
94
|
+
"@sveltejs/kit": "^2.21.0",
|
|
95
|
+
"@sveltejs/package": "^2.3.11",
|
|
96
|
+
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
97
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
98
|
+
"@testing-library/svelte": "^5.2.7",
|
|
99
|
+
"@types/eslint": "9.6.1",
|
|
100
|
+
"@types/node": "^22.15.18",
|
|
101
|
+
"@typescript-eslint/eslint-plugin": "^8.32.1",
|
|
102
|
+
"@typescript-eslint/parser": "^8.32.1",
|
|
103
|
+
"@vitest/coverage-v8": "^3.1.3",
|
|
104
|
+
"eslint": "^9.27.0",
|
|
105
|
+
"eslint-config-prettier": "^10.1.5",
|
|
106
|
+
"eslint-plugin-import": "^2.31.0",
|
|
107
|
+
"eslint-plugin-svelte": "^3.8.1",
|
|
108
|
+
"eslint-plugin-unused-imports": "^4.1.4",
|
|
109
|
+
"globals": "^16.1.0",
|
|
110
|
+
"prettier": "^3.5.3",
|
|
104
111
|
"prettier-plugin-organize-imports": "^4.1.0",
|
|
105
|
-
"prettier-plugin-svelte": "^3.
|
|
112
|
+
"prettier-plugin-svelte": "^3.4.0",
|
|
106
113
|
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
107
|
-
"publint": "^0.
|
|
108
|
-
"svelte": "^
|
|
109
|
-
"svelte-check": "^
|
|
110
|
-
"tslib": "^2.
|
|
111
|
-
"type-fest": "^4.
|
|
112
|
-
"typescript": "^5.
|
|
113
|
-
"typescript-eslint": "^8.
|
|
114
|
-
"vite": "^
|
|
115
|
-
"vitest": "^1.
|
|
114
|
+
"publint": "^0.3.12",
|
|
115
|
+
"svelte": "^5.30.2",
|
|
116
|
+
"svelte-check": "^4.2.1",
|
|
117
|
+
"tslib": "^2.8.1",
|
|
118
|
+
"type-fest": "^4.41.0",
|
|
119
|
+
"typescript": "^5.8.3",
|
|
120
|
+
"typescript-eslint": "^8.32.1",
|
|
121
|
+
"vite": "^6.3.5",
|
|
122
|
+
"vitest": "^3.1.3"
|
|
123
|
+
},
|
|
124
|
+
"peerDependencies": {
|
|
125
|
+
"svelte": "^5.30.0"
|
|
116
126
|
},
|
|
117
127
|
"volta": {
|
|
118
|
-
"node": "22.
|
|
128
|
+
"node": "22.15.1"
|
|
119
129
|
}
|
|
120
130
|
}
|