flexitablesort 1.0.3 → 1.0.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.
- package/README.md +2 -90
- package/package.json +1 -1
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
|