update readme

README.md

@@ -25,30 +25,16 @@ Always provide a [`getRowId`](https://www.ag-grid.com/javascript-data-grid/grid-
 npm install ag-grid-svelte5-extended
 ```
 
-<br />
+## Usage
 
-## `AgGrid` Component
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `gridOptions` | `GridOptions<TData>` | Yes | AG-Grid options |
-| `rowData` | `TData[]` | No | Array of data to display |
-| `modules` | `Module[]` | No | AG-Grid modules to include |
-| `gridClass` | `string` | No | CSS class for grid (defaults to "ag-theme-quartz") |
-| `gridStyle` | `string` | No | Inline styles for grid container (defaults to "height: 100%;") |
-| `quickFilterText` | `string` | No | Text for quick filtering |
-| `sizeColumnsToFit` | `boolean` | No | Auto-size columns (default: true) |
-| `theme` | `GridTheme` | No | AG-Grid theme object |
-
-#### Usage
-
-(See [demo page source](src/routes/+page.svelte) for more extended example)
+Copy and paste this into a svelte file for a very basic grid. (See [demo page source](src/routes/+page.svelte) for more extended example). The base packages (`@ag-grid-community/*`) are dependencies so will be installed along with this lib.
 
 ```svelte
 <script lang="ts">
     import { AgGrid } from "ag-grid-svelte5-extended";
     import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
     import { themeQuartz } from "@ag-grid-community/theming";
+    import {type GridOptions} from "@ag-grid-community/core"
 
     interface Person {
         id: string;
@@ -57,11 +43,12 @@ npm install ag-grid-svelte5-extended
     }
 
     let rowData = $state<Person[]>([
-        { id: "1", name: "John", age: 25 },
-        { id: "2", name: "Jane", age: 30 },
+        { id: "1", name: "Jane", age: 25 },
+        { id: "2", name: "Jimbo", age: 32 },
+        { id: "3", name: "Jensen", age: 41 },
     ]);
 
-    const gridOptions = {
+    const gridOptions: GridOptions = {
         columnDefs: [
             { field: "name" },
             { field: "age" }
@@ -73,15 +60,30 @@ npm install ag-grid-svelte5-extended
     const modules = [ClientSideRowModelModule];
 </script>
 
-
-<AgGrid {gridOptions} {rowData} {modules} />
+<div style="height: 200px; width: 640px; margin: 0 auto;">
+    <AgGrid {gridOptions} {rowData} {modules} />
+</div>
 ```
 
+
+## `AgGrid` Component
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `gridOptions` | `GridOptions<TData>` | Yes | AG-Grid options |
+| `rowData` | `TData[]` | No | Array of data to display |
+| `modules` | `Module[]` | No | AG-Grid modules to include |
+| `gridClass` | `string` | No | CSS class for grid (defaults to "ag-theme-quartz") |
+| `gridStyle` | `string` | No | Inline styles for grid container (defaults to "height: 100%;") |
+| `quickFilterText` | `string` | No | Text for quick filtering |
+| `sizeColumnsToFit` | `boolean` | No | Auto-size columns (default: true) |
+| `theme` | `GridTheme` | No | AG-Grid theme object |
+
 <br />
 
-## `makeSvelteCellRenderer` helper function
+## `makeSvelteCellRendererhelper` function
 
-A utility function to create [AG-Grid cell renderers](https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/) from Svelte components. Takes a svelte component and optionally the class for the container div. It's given [`ICellRendererParams`](https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/#:~:text=The%20provided%20props%20(interface%20ICellRendererParams)%20are%3A) as props (with the cell's value as the `value` prop)
+Can be ignored if you just want text in the grid.  A utility function to create [AG-Grid cell renderers](https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/) from Svelte components. Takes a svelte component and optionally the class for the container div. It's given [`ICellRendererParams`](https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/#:~:text=The%20provided%20props%20(interface%20ICellRendererParams)%20are%3A) as props (with the cell's value as the `value` prop)
 
 ```typescript
 function makeSvelteCellRenderer(
@@ -90,7 +92,7 @@ function makeSvelteCellRenderer(
 ): ICellRenderer
 ```
 
-#### Usage
+#### `makeSvelteCellRenderer` Usage
 
 (See [demo page source](src/routes/+page.svelte) for more extended example)
 
@@ -104,6 +106,7 @@ function makeSvelteCellRenderer(
     let { value }: ICellRendererParams = $props();
 </script>
 ```
+
 `+page.svelte`:
 
 ```svelte