Skip to content

Commit 37a6005

Browse files
petera2cpetera2c
committed
Readme updates
1 parent 18ceffe commit 37a6005

16 files changed

Lines changed: 265 additions & 38 deletions

‎packages/angular/README.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Simple Table for Angular
2+
3+
[![npm version](https://img.shields.io/npm/v/@simple-table/angular.svg)](https://www.npmjs.com/package/@simple-table/angular)
4+
[![npm downloads](https://img.shields.io/npm/dm/@simple-table/angular.svg)](https://www.npmjs.com/package/@simple-table/angular)
5+
[![License](https://img.shields.io/npm/l/@simple-table/angular.svg)](LICENSE)
6+
7+
Angular adapter for [Simple Table](https://www.simple-table.com/) — a lightweight, high-performance data grid with full Angular component support for all renderers.
8+
9+
## Installation
10+
11+
```bash
12+
npm install @simple-table/angular
13+
```
14+
15+
**Peer dependencies:** `@angular/core >=17.0.0 <22.0.0`, `@angular/common >=17.0.0 <22.0.0`
16+
17+
## Features
18+
19+
- Standalone `SimpleTableComponent` with the `<simple-table>` selector
20+
- Use Angular components for cell renderers, header renderers, footer renderers, and more
21+
- Access the imperative `TableAPI` via `(tableReady)` output or `@ViewChild` for sorting, filtering, pagination, export, and more
22+
- All types exported directly — no need to install `simple-table-core` separately
23+
24+
## Documentation
25+
26+
- **Quick Start**: [simple-table.com/docs/quick-start](https://www.simple-table.com/docs/quick-start)
27+
- **Full Documentation**: [simple-table.com/docs/installation](https://www.simple-table.com/docs/installation)
28+
- **Examples**: [simple-table.com/examples/crm](https://www.simple-table.com/examples/crm)
29+
30+
## Community & Support
31+
32+
- **Discord**: [Join us on Discord](https://discord.gg/RvKHCfg3PC)
33+
- **GitHub**: [Report bugs or suggest features](https://github.com/petera2c/simple-table/issues)
34+
35+
## License
36+
37+
Dual licensed — MIT for individuals & startups, proprietary Pro tier for revenue-generating companies. See [LICENSE](LICENSE) and [EULA.txt](../../EULA.txt) for details.

‎packages/angular/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@simple-table/angular",
3-
"version": "3.0.0-beta.11",
3+
"version": "3.0.0-beta.12",
44
"main": "dist/cjs/index.js",
55
"module": "dist/index.es.js",
66
"types": "dist/types/index.d.ts",

‎packages/core/README.md‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,34 @@
55
[![GitHub stars](https://img.shields.io/github/stars/petera2c/simple-table.svg)](https://github.com/petera2c/simple-table)
66
[![License](https://img.shields.io/npm/l/simple-table-core.svg)](LICENSE)
77

8-
Simple Table is a **lightweight**, **high-performance** React table and 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.
8+
Simple Table is a **lightweight**, **high-performance**, **framework-agnostic** data grid and table component for building modern, scalable applications. With a **simple API**, **completely free features**, and a focus on developer experience, Simple Table works with any framework — or no framework at all.
99

1010
<div align="center">
1111
<img src="https://github.com/petera2c/simple-table-marketing/blob/main/src/assets/infrastructure-light.png?raw=true" alt="Simple Table Infrastructure Dashboard" width="800" />
1212
</div>
1313

14-
## 🚀 Quick Start
14+
## Framework Support
1515

16-
Get started with Simple Table in just a few lines of code!
16+
Simple Table provides first-class adapters for the most popular frameworks:
1717

18-
### Installation
18+
| Framework | Package | Version |
19+
|-----------|---------|---------|
20+
| **Vanilla JS** | [`simple-table-core`](https://www.npmjs.com/package/simple-table-core) | [![npm](https://img.shields.io/npm/v/simple-table-core.svg)](https://www.npmjs.com/package/simple-table-core) |
21+
| **React** | [`@simple-table/react`](https://www.npmjs.com/package/@simple-table/react) | [![npm](https://img.shields.io/npm/v/@simple-table/react.svg)](https://www.npmjs.com/package/@simple-table/react) |
22+
| **Vue 3** | [`@simple-table/vue`](https://www.npmjs.com/package/@simple-table/vue) | [![npm](https://img.shields.io/npm/v/@simple-table/vue.svg)](https://www.npmjs.com/package/@simple-table/vue) |
23+
| **Svelte** | [`@simple-table/svelte`](https://www.npmjs.com/package/@simple-table/svelte) | [![npm](https://img.shields.io/npm/v/@simple-table/svelte.svg)](https://www.npmjs.com/package/@simple-table/svelte) |
24+
| **Solid** | [`@simple-table/solid`](https://www.npmjs.com/package/@simple-table/solid) | [![npm](https://img.shields.io/npm/v/@simple-table/solid.svg)](https://www.npmjs.com/package/@simple-table/solid) |
25+
| **Angular** | [`@simple-table/angular`](https://www.npmjs.com/package/@simple-table/angular) | [![npm](https://img.shields.io/npm/v/@simple-table/angular.svg)](https://www.npmjs.com/package/@simple-table/angular) |
26+
27+
## Quick Start
1928

2029
```bash
2130
npm install simple-table-core
2231
```
2332

24-
### 📖 Complete Guide
25-
26-
**[👉 Follow our Quick Start Guide](https://www.simple-table.com/docs/quick-start)** for step-by-step instructions and live examples.
33+
**[Follow our Quick Start Guide](https://www.simple-table.com/docs/quick-start)** for step-by-step instructions and live examples.
2734

28-
## Quick Examples
29-
30-
Explore Simple Table's capabilities with these focused examples:
35+
## Features
3136

3237
### Column Features
3338

@@ -69,9 +74,7 @@ Explore Simple Table's capabilities with these focused examples:
6974
- **[Themes](https://www.simple-table.com/docs/themes)** - Apply built-in themes or create your own
7075
- **[Custom Icons](https://www.simple-table.com/docs/custom-icons)** - Replace default icons with your own
7176

72-
## 🎯 Examples & Use Cases
73-
74-
### Real-World Examples
77+
## Examples
7578

7679
See Simple Table in action across different industries:
7780

@@ -104,12 +107,12 @@ See Simple Table in action across different industries:
104107

105108
</div>
106109

107-
## 📚 Resources
110+
## Resources
108111

109-
- **🌐 Website**: [simple-table.com](https://www.simple-table.com/)
110-
- **📖 Documentation**: [Complete Documentation](https://www.simple-table.com/docs/installation)
112+
- **Website**: [simple-table.com](https://www.simple-table.com/)
113+
- **Documentation**: [Complete Documentation](https://www.simple-table.com/docs/installation)
111114

112-
## 💰 Pricing
115+
## Pricing
113116

114117
Simple, transparent pricing that never changes based on your revenue or team size:
115118

‎packages/core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "simple-table-core",
3-
"version": "3.0.0-beta.11",
3+
"version": "3.0.0-beta.12",
44
"main": "dist/cjs/index.js",
55
"module": "dist/index.es.js",
66
"types": "dist/src/index.d.ts",

‎packages/core/simple-table-core-3.0.0-beta.10.tgz‎

-238 KB
Binary file not shown.

‎packages/react/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Simple Table for React
2+
3+
[![npm version](https://img.shields.io/npm/v/@simple-table/react.svg)](https://www.npmjs.com/package/@simple-table/react)
4+
[![npm downloads](https://img.shields.io/npm/dm/@simple-table/react.svg)](https://www.npmjs.com/package/@simple-table/react)
5+
[![License](https://img.shields.io/npm/l/@simple-table/react.svg)](LICENSE)
6+
7+
React adapter for [Simple Table](https://www.simple-table.com/) — a lightweight, high-performance data grid with full React component support for all renderers.
8+
9+
## Installation
10+
11+
```bash
12+
npm install @simple-table/react
13+
```
14+
15+
**Peer dependencies:** `react >=18.0.0`, `react-dom >=18.0.0`
16+
17+
## Features
18+
19+
- Use React components for cell renderers, header renderers, footer renderers, and more
20+
- Access the full imperative `TableAPI` via a ref for sorting, filtering, pagination, export, and more
21+
- All types exported directly — no need to install `simple-table-core` separately
22+
23+
## Documentation
24+
25+
- **Quick Start**: [simple-table.com/docs/quick-start](https://www.simple-table.com/docs/quick-start)
26+
- **Full Documentation**: [simple-table.com/docs/installation](https://www.simple-table.com/docs/installation)
27+
- **Examples**: [simple-table.com/examples/crm](https://www.simple-table.com/examples/crm)
28+
29+
## Community & Support
30+
31+
- **Discord**: [Join us on Discord](https://discord.gg/RvKHCfg3PC)
32+
- **GitHub**: [Report bugs or suggest features](https://github.com/petera2c/simple-table/issues)
33+
34+
## License
35+
36+
Dual licensed — MIT for individuals & startups, proprietary Pro tier for revenue-generating companies. See [LICENSE](LICENSE) and [EULA.txt](../../EULA.txt) for details.

‎packages/react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@simple-table/react",
3-
"version": "3.0.0-beta.11",
3+
"version": "3.0.0-beta.12",
44
"main": "dist/cjs/index.js",
55
"module": "dist/index.es.js",
66
"types": "dist/types/index.d.ts",

‎packages/react/simple-table-react-3.0.0-beta.10.tgz‎

-52.8 KB
Binary file not shown.

‎packages/react/src/SimpleTable.tsx‎

Lines changed: 53 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,58 @@ import type { SimpleTableReactProps, TableInstance } from "./types";
2626
* footerRenderer={MyFooter}
2727
* />
2828
*/
29-
const SimpleTable = () => {
30-
return <div>hello</div>;
31-
};
29+
const SimpleTable = React.forwardRef<TableAPI, SimpleTableReactProps>(
30+
function SimpleTable(props, ref) {
31+
const containerRef = useRef<HTMLDivElement>(null);
32+
33+
// Typed as the local TableInstance interface — not the concrete
34+
// SimpleTableVanilla class — so the component stays decoupled from
35+
// internal implementation details.
36+
const instanceRef = useRef<TableInstance | null>(null);
37+
38+
// forwardRef omits `ref` from props at the type level; cast it back so
39+
// buildVanillaConfig receives the complete SimpleTableReactProps shape.
40+
const reactProps = props as SimpleTableReactProps;
41+
42+
// Mount the vanilla instance exactly once.
43+
useEffect(() => {
44+
if (!containerRef.current) return;
45+
46+
const instance = new SimpleTableVanilla(
47+
containerRef.current,
48+
buildVanillaConfig(reactProps)
49+
);
50+
instance.mount();
51+
instanceRef.current = instance;
52+
53+
if (ref) {
54+
const api = instance.getAPI();
55+
if (typeof ref === "function") {
56+
ref(api);
57+
} else {
58+
ref.current = api;
59+
}
60+
}
61+
62+
return () => {
63+
instance.destroy();
64+
instanceRef.current = null;
65+
if (ref && typeof ref !== "function") {
66+
ref.current = null;
67+
}
68+
};
69+
// eslint-disable-next-line react-hooks/exhaustive-deps
70+
}, []);
71+
72+
// Sync prop changes to the vanilla instance after every render.
73+
useEffect(() => {
74+
instanceRef.current?.update(buildVanillaConfig(reactProps));
75+
});
76+
77+
return <div ref={containerRef} />;
78+
}
79+
);
80+
81+
SimpleTable.displayName = "SimpleTable";
3282

3383
export default SimpleTable;

‎packages/react/src/utils/wrapReactRenderer.tsx‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,20 @@
11
import React from "react";
2-
import { createRoot } from "react-dom/client";
3-
import { flushSync } from "react-dom";
42
import { renderToStaticMarkup } from "react-dom/server";
53

64
/**
75
* Wraps a React component into a function that returns an HTMLElement, matching
86
* the vanilla renderer contract expected by simple-table-core.
97
*
10-
* Uses flushSync to ensure the React tree is fully painted into the container
11-
* before it is returned to the vanilla rendering pipeline.
8+
* Uses renderToStaticMarkup for synchronous rendering that is safe to call from
9+
* any context (including inside useEffect) without triggering React 18's
10+
* "flushSync was called from inside a lifecycle method" warning.
1211
*/
1312
export function wrapReactRenderer<P extends object>(
1413
Component: React.ComponentType<P>
1514
): (props: P) => HTMLElement {
1615
return (props: P): HTMLElement => {
1716
const container = document.createElement("div");
18-
const root = createRoot(container);
19-
flushSync(() => {
20-
root.render(<Component {...(props as any)} />);
21-
});
17+
container.innerHTML = renderToStaticMarkup(<Component {...(props as any)} />);
2218
return container;
2319
};
2420
}
@@ -29,10 +25,7 @@ export function wrapReactRenderer<P extends object>(
2925
*/
3026
export function wrapReactNode(node: React.ReactNode): HTMLElement {
3127
const container = document.createElement("div");
32-
const root = createRoot(container);
33-
flushSync(() => {
34-
root.render(<>{node}</>);
35-
});
28+
container.innerHTML = renderToStaticMarkup(<>{node}</>);
3629
return container;
3730
}
3831

0 commit comments

Comments
 (0)