simple-table-core 0.3.3 → 0.3.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 +121 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,32 +7,138 @@ Simple Table is a React grid package designed to provide a flexible and easy-to-
|
|
|
7
7
|
## Example Usage
|
|
8
8
|
|
|
9
9
|
```tsx
|
|
10
|
+
import { useState } from "react";
|
|
10
11
|
import { SimpleTable } from "simple-table-core";
|
|
11
|
-
import "simple-table-core/dist/
|
|
12
|
+
import CellChangeProps from "simple-table-core/dist/types/CellChangeProps";
|
|
12
13
|
|
|
13
14
|
export const SAMPLE_HEADERS: any[] = [
|
|
14
15
|
{ label: "Product ID", accessor: "id", width: 150 },
|
|
15
16
|
{ label: "Product Name", accessor: "productName", width: 200 },
|
|
16
17
|
{ label: "Category", accessor: "category", width: 150 },
|
|
17
18
|
{ label: "Quantity", accessor: "quantity", width: 100 },
|
|
19
|
+
{ label: "Price", accessor: "price", width: 100 },
|
|
20
|
+
{ label: "Supplier", accessor: "supplier", width: 150 },
|
|
21
|
+
{ label: "Location", accessor: "location", width: 150 },
|
|
22
|
+
{ label: "Reorder Level", accessor: "reorderLevel", width: 100 },
|
|
23
|
+
{ label: "SKU", accessor: "sku", width: 100 },
|
|
24
|
+
{ label: "Description", accessor: "description", width: 250 },
|
|
25
|
+
{ label: "Weight", accessor: "weight", width: 100 },
|
|
26
|
+
{ label: "Dimensions", accessor: "dimensions", width: 150 },
|
|
27
|
+
{ label: "Barcode", accessor: "barcode", width: 100 },
|
|
18
28
|
];
|
|
19
29
|
|
|
20
|
-
|
|
30
|
+
export const inventoryData: any[] = Array.from({ length: 50 }, (_, index) => ({
|
|
31
|
+
id: `P-${index + 1001}`,
|
|
32
|
+
productName: [
|
|
33
|
+
"Wireless Mouse",
|
|
34
|
+
"Bluetooth Speaker",
|
|
35
|
+
"LED Monitor",
|
|
36
|
+
"Gaming Keyboard",
|
|
37
|
+
"Smartphone",
|
|
38
|
+
"Laptop",
|
|
39
|
+
"Tablet",
|
|
40
|
+
"Headphones",
|
|
41
|
+
"Smartwatch",
|
|
42
|
+
"External Hard Drive",
|
|
43
|
+
][index % 10],
|
|
44
|
+
category: ["Electronics", "Furniture", "Clothing", "Food", "Books"][
|
|
45
|
+
Math.floor(Math.random() * 5)
|
|
46
|
+
],
|
|
47
|
+
quantity: Math.floor(Math.random() * 100) + 1,
|
|
48
|
+
price: (Math.random() * 100).toFixed(2),
|
|
49
|
+
supplier: [
|
|
50
|
+
"Tech Supplies Co.",
|
|
51
|
+
"Gadget World",
|
|
52
|
+
"Office Essentials",
|
|
53
|
+
"Home Comforts",
|
|
54
|
+
"Fashion Hub",
|
|
55
|
+
][Math.floor(Math.random() * 5)],
|
|
56
|
+
location: [
|
|
57
|
+
"Warehouse A - New York",
|
|
58
|
+
"Warehouse B - Los Angeles",
|
|
59
|
+
"Warehouse C - Chicago",
|
|
60
|
+
"Warehouse D - Houston",
|
|
61
|
+
"Warehouse E - Miami",
|
|
62
|
+
][Math.floor(Math.random() * 5)],
|
|
63
|
+
reorderLevel: Math.floor(Math.random() * 20) + 5,
|
|
64
|
+
sku: `SKU-${index + 1001}`,
|
|
65
|
+
description: `High-quality ${
|
|
66
|
+
[
|
|
67
|
+
"wireless mouse",
|
|
68
|
+
"bluetooth speaker",
|
|
69
|
+
"LED monitor",
|
|
70
|
+
"gaming keyboard",
|
|
71
|
+
"smartphone",
|
|
72
|
+
"laptop",
|
|
73
|
+
"tablet",
|
|
74
|
+
"headphones",
|
|
75
|
+
"smartwatch",
|
|
76
|
+
"external hard drive",
|
|
77
|
+
][index % 10]
|
|
78
|
+
} for everyday use.`,
|
|
79
|
+
weight: `${(Math.random() * 10).toFixed(2)} kg`,
|
|
80
|
+
dimensions: `${(Math.random() * 100).toFixed(2)}x${(
|
|
81
|
+
Math.random() * 100
|
|
82
|
+
).toFixed(2)}x${(Math.random() * 100).toFixed(2)} cm`,
|
|
83
|
+
barcode: `1234567890${index}`,
|
|
84
|
+
expirationDate: `2024-${Math.floor(Math.random() * 12) + 1}-${
|
|
85
|
+
Math.floor(Math.random() * 28) + 1
|
|
86
|
+
}`,
|
|
87
|
+
manufacturer: [
|
|
88
|
+
"Tech Innovators Inc.",
|
|
89
|
+
"Gadget Makers Ltd.",
|
|
90
|
+
"Office Producers",
|
|
91
|
+
"Home Creators",
|
|
92
|
+
"Fashion Designers",
|
|
93
|
+
][Math.floor(Math.random() * 5)],
|
|
94
|
+
}));
|
|
95
|
+
|
|
96
|
+
const SimpleTableExample = () => {
|
|
97
|
+
const [rows, setRows] = useState(inventoryData);
|
|
98
|
+
|
|
99
|
+
const updateCell = ({
|
|
100
|
+
accessor,
|
|
101
|
+
newRowIndex,
|
|
102
|
+
newValue,
|
|
103
|
+
originalRowIndex,
|
|
104
|
+
row,
|
|
105
|
+
}: CellChangeProps) => {
|
|
106
|
+
setRows((prevRows) => {
|
|
107
|
+
prevRows[originalRowIndex][accessor] = newValue;
|
|
108
|
+
return prevRows;
|
|
109
|
+
});
|
|
110
|
+
};
|
|
111
|
+
|
|
21
112
|
return (
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
113
|
+
<div style={{ padding: "2rem" }}>
|
|
114
|
+
<SimpleTable
|
|
115
|
+
// Enable column resizing
|
|
116
|
+
columnResizing
|
|
117
|
+
// Enable draggable columns
|
|
118
|
+
draggable
|
|
119
|
+
// Enable editing columns
|
|
120
|
+
editColumns
|
|
121
|
+
// Set the headers
|
|
122
|
+
defaultHeaders={SAMPLE_HEADERS}
|
|
123
|
+
// Set the rows
|
|
124
|
+
rows={inventoryData}
|
|
125
|
+
// Handle cell changes
|
|
126
|
+
onCellChange={updateCell}
|
|
127
|
+
// Enable selectable cells
|
|
128
|
+
selectableCells
|
|
129
|
+
// Use pagination
|
|
130
|
+
shouldPaginate
|
|
131
|
+
height="auto"
|
|
132
|
+
rowsPerPage={8}
|
|
133
|
+
|
|
134
|
+
// If you aren't using pagination a height is required
|
|
135
|
+
// height="calc(100dvh - 4rem)"`
|
|
136
|
+
/>
|
|
137
|
+
</div>
|
|
34
138
|
);
|
|
35
|
-
}
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
export default SimpleTableExample;
|
|
36
142
|
```
|
|
37
143
|
|
|
38
144
|
Import the CSS file to apply the styles to your table.
|