flexitablesort 1.1.7 → 1.1.8
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 +72 -72
- package/package.json +73 -73
package/README.md
CHANGED
|
@@ -1,72 +1,72 @@
|
|
|
1
|
-
# flexitablesort
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/flexitablesort)
|
|
4
|
-
[](https://bundlephobia.com/package/flexitablesort)
|
|
5
|
-
[](https://github.com/samiodeh1337/sortable-table/blob/main/LICENSE)
|
|
6
|
-
[](https://www.npmjs.com/package/flexitablesort)
|
|
7
|
-
|
|
8
|
-
Drag-and-drop row and column reordering for React tables. Smooth animations, auto-scroll, virtual scrolling support, and zero external UI dependencies.
|
|
9
|
-
|
|
10
|
-
**[Live Demos & Full Documentation](https://samiodeh1337.github.io/sortable-table/)**
|
|
11
|
-
|
|
12
|
-
## Examples
|
|
13
|
-
<!-- Desktop demo -->
|
|
14
|
-
<p>
|
|
15
|
-
<img src="./docs/desktop.gif" alt="Desktop demo" width="800" />
|
|
16
|
-
</p>
|
|
17
|
-
|
|
18
|
-
<!-- Mobile demo -->
|
|
19
|
-
<p>
|
|
20
|
-
<img src="./docs/mobile.gif" alt="Mobile demo" width="360" />
|
|
21
|
-
</p>
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
## Install
|
|
25
|
-
|
|
26
|
-
```bash
|
|
27
|
-
npm install flexitablesort
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
Peer dependencies: `react` and `react-dom` >= 17.0.0
|
|
31
|
-
|
|
32
|
-
## Features
|
|
33
|
-
|
|
34
|
-
- **Row & column drag** — reorder independently, automatic direction detection
|
|
35
|
-
- **Smooth animations** — direct DOM transforms, no React re-renders during drag
|
|
36
|
-
- **Auto-scroll** — scrolls when dragging near edges with acceleration
|
|
37
|
-
- **Drag range constraints** — lock specific rows/columns via `options`
|
|
38
|
-
- **DragHandle** — restrict drag to a grip icon instead of the whole row
|
|
39
|
-
- **Virtual scrolling** — works with `@tanstack/react-virtual` for 100k+ rows
|
|
40
|
-
- **Fully styleable** — every component accepts `className` and `style`
|
|
41
|
-
- **Event delegation** — single mousedown listener regardless of row count
|
|
42
|
-
- **TypeScript** — full type definitions included
|
|
43
|
-
|
|
44
|
-
## Components
|
|
45
|
-
|
|
46
|
-
| Component | Description |
|
|
47
|
-
|---|---|
|
|
48
|
-
| `TableContainer` | Root wrapper. Provides drag context. Accepts `onDragEnd`, `options`, `renderPlaceholder`. |
|
|
49
|
-
| `TableHeader` | Header row container. |
|
|
50
|
-
| `ColumnCell` | Draggable column header cell. Requires `id`, `index`. Optional `width`. |
|
|
51
|
-
| `TableBody` | Body container. Pass a `ref` for virtual scrolling. |
|
|
52
|
-
| `BodyRow` | Draggable row. Requires `id`, `index`. |
|
|
53
|
-
| `RowCell` | Cell within a row. Requires `index`. Optional `width`. |
|
|
54
|
-
| `DragHandle` | Wrap inside ColumnCell/BodyRow to restrict drag to this element only. |
|
|
55
|
-
|
|
56
|
-
## Types
|
|
57
|
-
|
|
58
|
-
```typescript
|
|
59
|
-
interface DragEndResult {
|
|
60
|
-
sourceIndex: number;
|
|
61
|
-
targetIndex: number;
|
|
62
|
-
dragType: "row" | "column";
|
|
63
|
-
}
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
## Browser Support
|
|
67
|
-
|
|
68
|
-
Tested on Chrome, Firefox, and Safari (desktop). Mobile touch events are supported but not extensively tested across devices.
|
|
69
|
-
|
|
70
|
-
## License
|
|
71
|
-
|
|
72
|
-
MIT
|
|
1
|
+
# flexitablesort
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/flexitablesort)
|
|
4
|
+
[](https://bundlephobia.com/package/flexitablesort)
|
|
5
|
+
[](https://github.com/samiodeh1337/sortable-table/blob/main/LICENSE)
|
|
6
|
+
[](https://www.npmjs.com/package/flexitablesort)
|
|
7
|
+
|
|
8
|
+
Drag-and-drop row and column reordering for React tables. Smooth animations, auto-scroll, virtual scrolling support, and zero external UI dependencies.
|
|
9
|
+
|
|
10
|
+
**[Live Demos & Full Documentation](https://samiodeh1337.github.io/sortable-table/)**
|
|
11
|
+
|
|
12
|
+
## Examples
|
|
13
|
+
<!-- Desktop demo -->
|
|
14
|
+
<p>
|
|
15
|
+
<img src="./docs/desktop.gif" alt="Desktop demo" width="800" />
|
|
16
|
+
</p>
|
|
17
|
+
|
|
18
|
+
<!-- Mobile demo -->
|
|
19
|
+
<p>
|
|
20
|
+
<img src="./docs/mobile.gif" alt="Mobile demo" width="360" />
|
|
21
|
+
</p>
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
## Install
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install flexitablesort
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Peer dependencies: `react` and `react-dom` >= 17.0.0
|
|
31
|
+
|
|
32
|
+
## Features
|
|
33
|
+
|
|
34
|
+
- **Row & column drag** — reorder independently, automatic direction detection
|
|
35
|
+
- **Smooth animations** — direct DOM transforms, no React re-renders during drag
|
|
36
|
+
- **Auto-scroll** — scrolls when dragging near edges with acceleration
|
|
37
|
+
- **Drag range constraints** — lock specific rows/columns via `options`
|
|
38
|
+
- **DragHandle** — restrict drag to a grip icon instead of the whole row
|
|
39
|
+
- **Virtual scrolling** — works with `@tanstack/react-virtual` for 100k+ rows
|
|
40
|
+
- **Fully styleable** — every component accepts `className` and `style`
|
|
41
|
+
- **Event delegation** — single mousedown listener regardless of row count
|
|
42
|
+
- **TypeScript** — full type definitions included
|
|
43
|
+
|
|
44
|
+
## Components
|
|
45
|
+
|
|
46
|
+
| Component | Description |
|
|
47
|
+
|---|---|
|
|
48
|
+
| `TableContainer` | Root wrapper. Provides drag context. Accepts `onDragEnd`, `options`, `renderPlaceholder`. |
|
|
49
|
+
| `TableHeader` | Header row container. |
|
|
50
|
+
| `ColumnCell` | Draggable column header cell. Requires `id`, `index`. Optional `width`. |
|
|
51
|
+
| `TableBody` | Body container. Pass a `ref` for virtual scrolling. |
|
|
52
|
+
| `BodyRow` | Draggable row. Requires `id`, `index`. |
|
|
53
|
+
| `RowCell` | Cell within a row. Requires `index`. Optional `width`. |
|
|
54
|
+
| `DragHandle` | Wrap inside ColumnCell/BodyRow to restrict drag to this element only. |
|
|
55
|
+
|
|
56
|
+
## Types
|
|
57
|
+
|
|
58
|
+
```typescript
|
|
59
|
+
interface DragEndResult {
|
|
60
|
+
sourceIndex: number;
|
|
61
|
+
targetIndex: number;
|
|
62
|
+
dragType: "row" | "column";
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Browser Support
|
|
67
|
+
|
|
68
|
+
Tested on Chrome, Firefox, and Safari (desktop). Mobile touch events are supported but not extensively tested across devices.
|
|
69
|
+
|
|
70
|
+
## License
|
|
71
|
+
|
|
72
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,73 +1,73 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "flexitablesort",
|
|
3
|
-
"version": "1.1.
|
|
4
|
-
"type": "module",
|
|
5
|
-
"description": "Sortable table with draggable rows and columns",
|
|
6
|
-
"main": "dist/index.cjs.js",
|
|
7
|
-
"module": "dist/index.es.js",
|
|
8
|
-
"types": "dist/index.d.ts",
|
|
9
|
-
"exports": {
|
|
10
|
-
".": {
|
|
11
|
-
"import": "./dist/index.es.js",
|
|
12
|
-
"require": "./dist/index.cjs.js",
|
|
13
|
-
"types": "./dist/index.d.ts"
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
"sideEffects": false,
|
|
17
|
-
"files": [
|
|
18
|
-
"dist"
|
|
19
|
-
],
|
|
20
|
-
"scripts": {
|
|
21
|
-
"build": "tsc -b && vite build",
|
|
22
|
-
"dev": "vite --config vite.config.docs.ts",
|
|
23
|
-
"build:docs": "vite build --config vite.config.docs.ts",
|
|
24
|
-
"lint": "eslint ."
|
|
25
|
-
},
|
|
26
|
-
"keywords": [
|
|
27
|
-
"react",
|
|
28
|
-
"table",
|
|
29
|
-
"sortable",
|
|
30
|
-
"draggable",
|
|
31
|
-
"draggable table",
|
|
32
|
-
"draggable rows",
|
|
33
|
-
"draggable columns",
|
|
34
|
-
"react table",
|
|
35
|
-
"data grid",
|
|
36
|
-
"row reordering",
|
|
37
|
-
"column reordering"
|
|
38
|
-
],
|
|
39
|
-
"author": "Sami Odeh",
|
|
40
|
-
"license": "MIT",
|
|
41
|
-
"repository": {
|
|
42
|
-
"type": "git",
|
|
43
|
-
"url": "git+https://github.com/samiodeh1337/sortable-table.git"
|
|
44
|
-
},
|
|
45
|
-
"homepage": "https://github.
|
|
46
|
-
"peerDependencies": {
|
|
47
|
-
"react": ">=17.0.0",
|
|
48
|
-
"react-dom": ">=17.0.0"
|
|
49
|
-
},
|
|
50
|
-
"dependencies": {
|
|
51
|
-
"classnames": "^2.5.1",
|
|
52
|
-
"styled-components": "^6.3.11"
|
|
53
|
-
},
|
|
54
|
-
"devDependencies": {
|
|
55
|
-
"@tanstack/react-virtual": "^3.13.22",
|
|
56
|
-
"highlight.js": "^11.11.1",
|
|
57
|
-
"@eslint/js": "^9.39.4",
|
|
58
|
-
"@types/node": "^24.12.0",
|
|
59
|
-
"@types/react": "^19.2.14",
|
|
60
|
-
"@types/react-dom": "^19.2.3",
|
|
61
|
-
"@vitejs/plugin-react": "^6.0.0",
|
|
62
|
-
"eslint": "^9.39.4",
|
|
63
|
-
"eslint-plugin-react-hooks": "^7.0.1",
|
|
64
|
-
"eslint-plugin-react-refresh": "^0.5.2",
|
|
65
|
-
"globals": "^17.4.0",
|
|
66
|
-
"react": "^19.2.4",
|
|
67
|
-
"react-dom": "^19.2.4",
|
|
68
|
-
"typescript": "~5.9.3",
|
|
69
|
-
"typescript-eslint": "^8.56.1",
|
|
70
|
-
"vite": "^8.0.0",
|
|
71
|
-
"vite-plugin-dts": "^4.5.4"
|
|
72
|
-
}
|
|
73
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "flexitablesort",
|
|
3
|
+
"version": "1.1.8",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "Sortable table with draggable rows and columns",
|
|
6
|
+
"main": "dist/index.cjs.js",
|
|
7
|
+
"module": "dist/index.es.js",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./dist/index.es.js",
|
|
12
|
+
"require": "./dist/index.cjs.js",
|
|
13
|
+
"types": "./dist/index.d.ts"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"sideEffects": false,
|
|
17
|
+
"files": [
|
|
18
|
+
"dist"
|
|
19
|
+
],
|
|
20
|
+
"scripts": {
|
|
21
|
+
"build": "tsc -b && vite build",
|
|
22
|
+
"dev": "vite --config vite.config.docs.ts",
|
|
23
|
+
"build:docs": "vite build --config vite.config.docs.ts",
|
|
24
|
+
"lint": "eslint ."
|
|
25
|
+
},
|
|
26
|
+
"keywords": [
|
|
27
|
+
"react",
|
|
28
|
+
"table",
|
|
29
|
+
"sortable",
|
|
30
|
+
"draggable",
|
|
31
|
+
"draggable table",
|
|
32
|
+
"draggable rows",
|
|
33
|
+
"draggable columns",
|
|
34
|
+
"react table",
|
|
35
|
+
"data grid",
|
|
36
|
+
"row reordering",
|
|
37
|
+
"column reordering"
|
|
38
|
+
],
|
|
39
|
+
"author": "Sami Odeh",
|
|
40
|
+
"license": "MIT",
|
|
41
|
+
"repository": {
|
|
42
|
+
"type": "git",
|
|
43
|
+
"url": "git+https://github.com/samiodeh1337/sortable-table.git"
|
|
44
|
+
},
|
|
45
|
+
"homepage": "https://samiodeh1337.github.io/sortable-table/",
|
|
46
|
+
"peerDependencies": {
|
|
47
|
+
"react": ">=17.0.0",
|
|
48
|
+
"react-dom": ">=17.0.0"
|
|
49
|
+
},
|
|
50
|
+
"dependencies": {
|
|
51
|
+
"classnames": "^2.5.1",
|
|
52
|
+
"styled-components": "^6.3.11"
|
|
53
|
+
},
|
|
54
|
+
"devDependencies": {
|
|
55
|
+
"@tanstack/react-virtual": "^3.13.22",
|
|
56
|
+
"highlight.js": "^11.11.1",
|
|
57
|
+
"@eslint/js": "^9.39.4",
|
|
58
|
+
"@types/node": "^24.12.0",
|
|
59
|
+
"@types/react": "^19.2.14",
|
|
60
|
+
"@types/react-dom": "^19.2.3",
|
|
61
|
+
"@vitejs/plugin-react": "^6.0.0",
|
|
62
|
+
"eslint": "^9.39.4",
|
|
63
|
+
"eslint-plugin-react-hooks": "^7.0.1",
|
|
64
|
+
"eslint-plugin-react-refresh": "^0.5.2",
|
|
65
|
+
"globals": "^17.4.0",
|
|
66
|
+
"react": "^19.2.4",
|
|
67
|
+
"react-dom": "^19.2.4",
|
|
68
|
+
"typescript": "~5.9.3",
|
|
69
|
+
"typescript-eslint": "^8.56.1",
|
|
70
|
+
"vite": "^8.0.0",
|
|
71
|
+
"vite-plugin-dts": "^4.5.4"
|
|
72
|
+
}
|
|
73
|
+
}
|