simple-table-core 0.7.96 → 0.7.98
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 +93 -7
- package/package.json +12 -5
package/README.md
CHANGED
|
@@ -1,22 +1,108 @@
|
|
|
1
1
|
# Simple Table
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/simple-table-core)
|
|
4
|
+
[](https://www.npmjs.com/package/simple-table-core)
|
|
5
|
+
[](https://github.com/petera2c/simple-table-marketing)
|
|
6
|
+
[](https://github.com/petera2c/simple-table/actions)
|
|
7
|
+
[](LICENSE)
|
|
4
8
|
|
|
5
|
-
- **
|
|
6
|
-
|
|
7
|
-
|
|
9
|
+
Simple Table is a **lightweight**, **high-performance** React data grid component for building modern, scalable applications. With a **simple API**, **completely free features**, and a focus on developer experience, Simple Table makes it easy to create powerful, responsive tables.
|
|
10
|
+
|
|
11
|
+
## Why Simple Table?
|
|
12
|
+
|
|
13
|
+
- **100% Free**: All features included at no cost - no premium versions or paid add-ons
|
|
14
|
+
- **Lightweight**: Only 16 kB (minified + gzipped) for fast loading
|
|
15
|
+
- **Intuitive**: Minimal boilerplate with a clean, React-first API
|
|
16
|
+
- **TypeScript-ready**: Full TypeScript support for type-safe development
|
|
17
|
+
|
|
18
|
+
## Quick Start
|
|
19
|
+
|
|
20
|
+
Get started with Simple Table in just a few lines of code!
|
|
21
|
+
|
|
22
|
+
### Installation
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install simple-table-core
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Example
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import { SimpleTable, HeaderObject } from "simple-table-core";
|
|
32
|
+
import "simple-table-core/styles.css";
|
|
33
|
+
|
|
34
|
+
const QuickStartDemo = () => {
|
|
35
|
+
// Sample data for a quick start demo
|
|
36
|
+
const data = [
|
|
37
|
+
{ id: 1, name: "John Doe", age: 28, role: "Developer" },
|
|
38
|
+
{ id: 2, name: "Jane Smith", age: 32, role: "Designer" },
|
|
39
|
+
{ id: 3, name: "Bob Johnson", age: 45, role: "Manager" },
|
|
40
|
+
];
|
|
41
|
+
|
|
42
|
+
// Define headers
|
|
43
|
+
const headers: HeaderObject[] = [
|
|
44
|
+
{ accessor: "id", label: "ID", width: 80, isSortable: true, type: "number" },
|
|
45
|
+
{ accessor: "name", label: "Name", minWidth: 80, width: "1fr", type: "string" },
|
|
46
|
+
{ accessor: "age", label: "Age", width: 100, isSortable: true, type: "number" },
|
|
47
|
+
{ accessor: "role", label: "Role", width: 150, isSortable: true, type: "string" },
|
|
48
|
+
];
|
|
49
|
+
|
|
50
|
+
// Map data to rows format expected by SimpleTable
|
|
51
|
+
const rows = data.map((item) => ({
|
|
52
|
+
rowMeta: { rowId: item.id },
|
|
53
|
+
rowData: item,
|
|
54
|
+
}));
|
|
55
|
+
|
|
56
|
+
return (
|
|
57
|
+
<SimpleTable defaultHeaders={headers} editColumns rows={rows} rowHeight={48} selectableCells />
|
|
58
|
+
);
|
|
59
|
+
};
|
|
8
60
|
|
|
9
|
-
|
|
61
|
+
export default QuickStartDemo;
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## Features
|
|
65
|
+
|
|
66
|
+
- **Data Management**
|
|
67
|
+
|
|
68
|
+
- Sorting, filtering, and grouping
|
|
69
|
+
- Pagination and infinite scrolling
|
|
70
|
+
- Row and column virtualization for large datasets
|
|
71
|
+
- Export to CSV/Excel
|
|
72
|
+
|
|
73
|
+
- **Customization**
|
|
74
|
+
- Custom cell rendering and editors
|
|
75
|
+
- Responsive design
|
|
76
|
+
- Flexible styling options
|
|
77
|
+
- TypeScript support
|
|
10
78
|
|
|
11
79
|
## Live Demo
|
|
12
80
|
|
|
13
81
|
<div align="center">
|
|
14
82
|
<a href="https://github.com/petera2c/simple-table-marketing/blob/main/src/assets/simple-table-demo-fast.gif?raw=true" target="_blank" rel="noopener noreferrer">
|
|
15
|
-
<img src="https://github.com/petera2c/simple-table-marketing/blob/main/src/assets/simple-table-demo-fast.gif?raw=true" alt="Simple Table Demo" />
|
|
83
|
+
<img src="https://github.com/petera2c/simple-table-marketing/blob/main/src/assets/simple-table-demo-fast.gif?raw=true" alt="Simple Table Demo" width="600" />
|
|
16
84
|
</a>
|
|
17
85
|
</div>
|
|
18
86
|
|
|
19
|
-
|
|
87
|
+
## Examples
|
|
88
|
+
|
|
89
|
+
Check out our live examples with complete source code:
|
|
90
|
+
|
|
91
|
+
- [Finance Dashboard](https://www.simple-table.com/examples/finance?theme=light)
|
|
92
|
+
- [Sales Dashboard](https://www.simple-table.com/examples/sales?theme=light)
|
|
93
|
+
|
|
94
|
+
## Links
|
|
95
|
+
|
|
96
|
+
- **Website**: [Simple Table](https://www.simple-table.com/)
|
|
97
|
+
- **Documentation**: [Simple Table Documentation](https://www.simple-table.com/docs/installation)
|
|
98
|
+
- **Quick Start**: [Quick Start Guide](https://www.simple-table.com/docs/quick-start)
|
|
99
|
+
|
|
100
|
+
## Community & Support
|
|
101
|
+
|
|
102
|
+
Join our growing community to ask questions or share feedback:
|
|
103
|
+
|
|
104
|
+
- **Discord**: [Join us on Discord](https://discord.gg/RvKHCfg3PC)
|
|
105
|
+
- **GitHub**: [Report bugs or suggest features](https://github.com/petera2c/simple-table)
|
|
20
106
|
|
|
21
107
|
## License
|
|
22
108
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "simple-table-core",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.98",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.es.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -40,12 +40,13 @@
|
|
|
40
40
|
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@storybook/addon-a11y": "^8.6.2",
|
|
44
|
-
"@storybook/addon-controls": "^8.6.2",
|
|
45
|
-
"@storybook/addon-docs": "^8.6.2",
|
|
46
43
|
"@babel/preset-react": "^7.25.7",
|
|
47
44
|
"@chromatic-com/storybook": "^1.9.0",
|
|
48
45
|
"@rollup/plugin-node-resolve": "^15.3.0",
|
|
46
|
+
"@size-limit/preset-small-lib": "^11.2.0",
|
|
47
|
+
"@storybook/addon-a11y": "^8.6.2",
|
|
48
|
+
"@storybook/addon-controls": "^8.6.2",
|
|
49
|
+
"@storybook/addon-docs": "^8.6.2",
|
|
49
50
|
"@storybook/addon-essentials": "^8.4.1",
|
|
50
51
|
"@storybook/addon-interactions": "^8.4.1",
|
|
51
52
|
"@storybook/addon-links": "^8.4.1",
|
|
@@ -71,6 +72,7 @@
|
|
|
71
72
|
"rollup-plugin-postcss": "^4.0.2",
|
|
72
73
|
"rollup-plugin-terser": "^7.0.2",
|
|
73
74
|
"rollup-plugin-typescript2": "^0.36.0",
|
|
75
|
+
"size-limit": "^11.2.0",
|
|
74
76
|
"storybook": "^8.4.1",
|
|
75
77
|
"typescript": "^4.9.5",
|
|
76
78
|
"webpack": "^5.95.0"
|
|
@@ -93,5 +95,10 @@
|
|
|
93
95
|
"last 1 firefox version",
|
|
94
96
|
"last 1 safari version"
|
|
95
97
|
]
|
|
96
|
-
}
|
|
98
|
+
},
|
|
99
|
+
"size-limit": [
|
|
100
|
+
{
|
|
101
|
+
"path": "dist/index.js"
|
|
102
|
+
}
|
|
103
|
+
]
|
|
97
104
|
}
|