diff --git a/README.md b/README.md
index fd4c1b84b..9bcab3eee 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,12 @@ Don't forget to import mandatory CSS
import "@glideapps/glide-data-grid/dist/index.css";
```
+If you want to use the default Image overlay preview you must remember to include the react-responsive-carousel css file or it will not function correctly. This should be available in your node-modules.
+
+```ts
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+```
+
Making your columns is easy
```ts
@@ -102,6 +108,35 @@ function getData([col, row]: Item): GridCell {
}
```
+The Grid depends on there being a root level "portal" div in your HTML. Insert this snippet as the last child of your `` tag:
+
+```HTML
+
+```
+
+or you can create a portal element yourself using the `createPortal` function from `react-dom` and pass it to the DataEditor via the `portalElementRef` prop.
+
+```ts
+const portalRef = useRef(null);
+<>
+ {
+ createPortal(
+ ,
+ document.body
+ )
+ }
+
+
+```
+
+Once you've got that done, the easiest way to use the Data Grid is to give it a fixed size:
+
+```ts
+
+```
+
+
+
You can [edit this example live](https://codesandbox.io/s/glide-data-grid-template-ydvnnk) on CodeSandbox
## Full API documentation
@@ -112,11 +147,11 @@ The full [API documentation is on the main site](https://docs.grid.glideapps.com
**Nothing shows up!**
-Please read the [Prerequisites section in the docs](packages/core/API.md).
+Please read the [Quickstart section in the docs](#-quick-start).
**It crashes when I try to edit a cell!**
-Please read the [Prerequisites section in the docs](packages/core/API.md).
+Please read the [Quickstart section in the docs](#-quick-start).
**Does it work with screen readers and other a11y tools?**
diff --git a/packages/core/API.md b/packages/core/API.md
index 60cb16c5f..8ee600a38 100644
--- a/packages/core/API.md
+++ b/packages/core/API.md
@@ -1,45 +1,11 @@
# Basic Usage
-## HTML/CSS Prerequisites
-
-The Grid depends on there being a root level "portal" div in your HTML. Insert this snippet as the last child of your `` tag:
-
-```HTML
-
-```
-
-or you can create a portal element yourself using the `createPortal` function from `react-dom` and pass it to the DataEditor via the `portalElementRef` prop.
-
-```jsx
-const portalRef = useRef(null);
-<>
- {
- createPortal(
- ,
- document.body
- )
- }
-
-
-```
-
-Once you've got that done, the easiest way to use the Data Grid is to give it a fixed size:
-
-```jsx
-
-```
-
## Changes to your data
The Grid will never change any of your underlying data. You have to do so yourself when one of the callbacks is invoked. For example, when the user edits the value in a cell, the Grid will invoke the `onCellEdited` callback. If you don't implement that callback, or if it doesn't change the undelying data to the new value, the Grid will keep displaying the old value.
Note that there is currently no way to tell the grid that data has changed. It has to be forced to redraw by passing a different object to the `getCellContent` property. This triggers the entire grid to redraw. You should avoid changing the `getCellContent` object ID as much as possible otherwise.
-If you want to use the default Image overlay preview you must remember to include the react-responsive-carousel css file or it will not function correctly. This should be available in your node-modules.
-
-```ts
-import "react-responsive-carousel/lib/styles/carousel.min.css";
-```
## A note on col/row values
diff --git a/packages/core/README.md b/packages/core/README.md
index f79ccbf93..600de63ff 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -64,6 +64,12 @@ Don't forget to import mandatory CSS
import "@glideapps/glide-data-grid/dist/index.css";
```
+If you want to use the default Image overlay preview you must remember to include the react-responsive-carousel css file or it will not function correctly. This should be available in your node-modules.
+
+```ts
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+```
+
Making your columns is easy
```ts
@@ -102,6 +108,33 @@ function getData([col, row]: Item): GridCell {
}
```
+The Grid depends on there being a root level "portal" div in your HTML. Insert this snippet as the last child of your `` tag:
+
+```HTML
+
+```
+
+or you can create a portal element yourself using the `createPortal` function from `react-dom` and pass it to the DataEditor via the `portalElementRef` prop.
+
+```ts
+const portalRef = useRef(null);
+<>
+ {
+ createPortal(
+ ,
+ document.body
+ )
+ }
+
+
+```
+
+Once you've got that done, the easiest way to use the Data Grid is to give it a fixed size:
+
+```ts
+
+```
+
## Full API documentation
The full [API documentation is on the main site](https://grid.glideapps.com/docs/index.html).
@@ -110,11 +143,11 @@ The full [API documentation is on the main site](https://grid.glideapps.com/docs
**Nothing shows up!**
-Please read the [Prerequisites section in the docs](API.md).
+Please read the [Quickstart section in the docs](#-quick-start).
**It crashes when I try to edit a cell!**
-Please read the [Prerequisites section in the docs](API.md).
+Please read the [Quickstart section in the docs](#-quick-start).
**Does it work with screen readers and other a11y tools?**