flexitablesort 1.0.3 → 1.0.5
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 +2 -90
- package/package.json +73 -73
package/README.md
CHANGED
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
|
|
8
8
|
Drag-and-drop row and column reordering for React tables. Smooth animations, auto-scroll, virtual scrolling support, and zero external UI dependencies.
|
|
9
9
|
|
|
10
|
+
**[Live Demos & Full Documentation](https://samiodeh1337.github.io/sortable-table/)**
|
|
11
|
+
|
|
10
12
|
## Install
|
|
11
13
|
|
|
12
14
|
```bash
|
|
@@ -15,71 +17,6 @@ npm install flexitablesort
|
|
|
15
17
|
|
|
16
18
|
Peer dependencies: `react` and `react-dom` >= 17.0.0
|
|
17
19
|
|
|
18
|
-
## Quick Start
|
|
19
|
-
|
|
20
|
-
```jsx
|
|
21
|
-
import { useState } from "react";
|
|
22
|
-
import {
|
|
23
|
-
TableContainer, TableHeader, ColumnCell,
|
|
24
|
-
TableBody, BodyRow, RowCell,
|
|
25
|
-
} from "flexitablesort";
|
|
26
|
-
|
|
27
|
-
const INIT_COLS = [
|
|
28
|
-
{ id: "name", label: "Name", width: 150 },
|
|
29
|
-
{ id: "age", label: "Age", width: 100 },
|
|
30
|
-
{ id: "email",label: "Email", width: 200 },
|
|
31
|
-
];
|
|
32
|
-
|
|
33
|
-
const INIT_ROWS = [
|
|
34
|
-
{ id: "1", name: "Alice", age: 28, email: "alice@example.com" },
|
|
35
|
-
{ id: "2", name: "Bob", age: 34, email: "bob@example.com" },
|
|
36
|
-
{ id: "3", name: "Carol", age: 22, email: "carol@example.com" },
|
|
37
|
-
];
|
|
38
|
-
|
|
39
|
-
function arrayMove(arr, from, to) {
|
|
40
|
-
const next = [...arr];
|
|
41
|
-
const [item] = next.splice(from, 1);
|
|
42
|
-
next.splice(to, 0, item);
|
|
43
|
-
return next;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
function MyTable() {
|
|
47
|
-
const [cols, setCols] = useState(INIT_COLS);
|
|
48
|
-
const [rows, setRows] = useState(INIT_ROWS);
|
|
49
|
-
|
|
50
|
-
const handleDragEnd = ({ sourceIndex, targetIndex, dragType }) => {
|
|
51
|
-
if (dragType === "column") {
|
|
52
|
-
setCols(arrayMove(cols, sourceIndex, targetIndex));
|
|
53
|
-
} else {
|
|
54
|
-
setRows(arrayMove(rows, sourceIndex, targetIndex));
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
return (
|
|
59
|
-
<TableContainer onDragEnd={handleDragEnd}>
|
|
60
|
-
<TableHeader>
|
|
61
|
-
{cols.map((col, i) => (
|
|
62
|
-
<ColumnCell key={col.id} id={col.id} index={i} width={col.width}>
|
|
63
|
-
{col.label}
|
|
64
|
-
</ColumnCell>
|
|
65
|
-
))}
|
|
66
|
-
</TableHeader>
|
|
67
|
-
<TableBody>
|
|
68
|
-
{rows.map((row, ri) => (
|
|
69
|
-
<BodyRow key={row.id} id={row.id} index={ri}>
|
|
70
|
-
{cols.map((col, ci) => (
|
|
71
|
-
<RowCell key={col.id} index={ci} width={col.width}>
|
|
72
|
-
{row[col.id]}
|
|
73
|
-
</RowCell>
|
|
74
|
-
))}
|
|
75
|
-
</BodyRow>
|
|
76
|
-
))}
|
|
77
|
-
</TableBody>
|
|
78
|
-
</TableContainer>
|
|
79
|
-
);
|
|
80
|
-
}
|
|
81
|
-
```
|
|
82
|
-
|
|
83
20
|
## Features
|
|
84
21
|
|
|
85
22
|
- **Row & column drag** — reorder independently, automatic direction detection
|
|
@@ -104,31 +41,6 @@ function MyTable() {
|
|
|
104
41
|
| `RowCell` | Cell within a row. Requires `index`. Optional `width`. |
|
|
105
42
|
| `DragHandle` | Wrap inside ColumnCell/BodyRow to restrict drag to this element only. |
|
|
106
43
|
|
|
107
|
-
## Options
|
|
108
|
-
|
|
109
|
-
```jsx
|
|
110
|
-
<TableContainer
|
|
111
|
-
onDragEnd={handleDragEnd}
|
|
112
|
-
options={{
|
|
113
|
-
columnDragRange: { start: 1 }, // column 0 is locked
|
|
114
|
-
rowDragRange: { start: 2, end: 95 }, // rows 0-1 and 96+ are locked
|
|
115
|
-
}}
|
|
116
|
-
/>
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
## DragHandle
|
|
120
|
-
|
|
121
|
-
```jsx
|
|
122
|
-
import { DragHandle } from "flexitablesort";
|
|
123
|
-
|
|
124
|
-
<ColumnCell id={col.id} index={i} width={150}>
|
|
125
|
-
<DragHandle><GripIcon /></DragHandle>
|
|
126
|
-
{col.title}
|
|
127
|
-
</ColumnCell>
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
When a `DragHandle` is inside a `ColumnCell` or `BodyRow`, only clicking the handle starts a drag.
|
|
131
|
-
|
|
132
44
|
## Types
|
|
133
45
|
|
|
134
46
|
```typescript
|
package/package.json
CHANGED
|
@@ -1,73 +1,73 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "flexitablesort",
|
|
3
|
-
"version": "1.0.
|
|
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.com/samiodeh1337/sortable-table.git#readme",
|
|
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.0.5",
|
|
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.com/samiodeh1337/sortable-table.git#readme",
|
|
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
|
+
}
|