flexitablesort 1.0.2 → 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 -71
- 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,52 +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 {
|
|
22
|
-
TableContainer, TableHeader, ColumnCell,
|
|
23
|
-
TableBody, BodyRow, RowCell,
|
|
24
|
-
} from "flexitablesort";
|
|
25
|
-
|
|
26
|
-
function MyTable() {
|
|
27
|
-
const [rows, setRows] = useState(data);
|
|
28
|
-
const [cols, setCols] = useState(columns);
|
|
29
|
-
|
|
30
|
-
const handleDragEnd = ({ sourceIndex, targetIndex, dragType }) => {
|
|
31
|
-
if (dragType === "row") {
|
|
32
|
-
const next = [...rows];
|
|
33
|
-
const [moved] = next.splice(sourceIndex, 1);
|
|
34
|
-
next.splice(targetIndex, 0, moved);
|
|
35
|
-
setRows(next);
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
return (
|
|
40
|
-
<TableContainer onDragEnd={handleDragEnd}>
|
|
41
|
-
<TableHeader>
|
|
42
|
-
{cols.map((col, i) => (
|
|
43
|
-
<ColumnCell key={col.id} id={col.id} index={i} width={150}>
|
|
44
|
-
{col.title}
|
|
45
|
-
</ColumnCell>
|
|
46
|
-
))}
|
|
47
|
-
</TableHeader>
|
|
48
|
-
<TableBody>
|
|
49
|
-
{rows.map((row, ri) => (
|
|
50
|
-
<BodyRow key={row.id} id={row.id} index={ri}>
|
|
51
|
-
{cols.map((col, ci) => (
|
|
52
|
-
<RowCell key={col.id} index={ci} width={150}>
|
|
53
|
-
{row[col.id]}
|
|
54
|
-
</RowCell>
|
|
55
|
-
))}
|
|
56
|
-
</BodyRow>
|
|
57
|
-
))}
|
|
58
|
-
</TableBody>
|
|
59
|
-
</TableContainer>
|
|
60
|
-
);
|
|
61
|
-
}
|
|
62
|
-
```
|
|
63
|
-
|
|
64
20
|
## Features
|
|
65
21
|
|
|
66
22
|
- **Row & column drag** — reorder independently, automatic direction detection
|
|
@@ -85,31 +41,6 @@ function MyTable() {
|
|
|
85
41
|
| `RowCell` | Cell within a row. Requires `index`. Optional `width`. |
|
|
86
42
|
| `DragHandle` | Wrap inside ColumnCell/BodyRow to restrict drag to this element only. |
|
|
87
43
|
|
|
88
|
-
## Options
|
|
89
|
-
|
|
90
|
-
```jsx
|
|
91
|
-
<TableContainer
|
|
92
|
-
onDragEnd={handleDragEnd}
|
|
93
|
-
options={{
|
|
94
|
-
columnDragRange: { start: 1 }, // column 0 is locked
|
|
95
|
-
rowDragRange: { start: 2, end: 95 }, // rows 0-1 and 96+ are locked
|
|
96
|
-
}}
|
|
97
|
-
/>
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
## DragHandle
|
|
101
|
-
|
|
102
|
-
```jsx
|
|
103
|
-
import { DragHandle } from "flexitablesort";
|
|
104
|
-
|
|
105
|
-
<ColumnCell id={col.id} index={i} width={150}>
|
|
106
|
-
<DragHandle><GripIcon /></DragHandle>
|
|
107
|
-
{col.title}
|
|
108
|
-
</ColumnCell>
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
When a `DragHandle` is inside a `ColumnCell` or `BodyRow`, only clicking the handle starts a drag.
|
|
112
|
-
|
|
113
44
|
## Types
|
|
114
45
|
|
|
115
46
|
```typescript
|