From 097b547a78a325fa47da89158d6cfc9dc80482ba Mon Sep 17 00:00:00 2001 From: ImmortalRabbit <29354535+ImmortalRabbit@users.noreply.github.com> Date: Thu, 14 Aug 2025 16:01:39 +0100 Subject: [PATCH 1/3] chore: enable Dependabot for all packages --- .github/dependabot.yml | 45 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 .github/dependabot.yml diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 000000000..a966c5f2b --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,45 @@ +version: 2 +updates: + - package-ecosystem: "npm" + directory: "/" + schedule: + interval: "weekly" + open-pull-requests-limit: 10 + commit-message: + prefix: "deps" + include: "scope" + labels: + - "dependencies" + + - package-ecosystem: "npm" + directory: "/packages/core" + schedule: + interval: "weekly" + open-pull-requests-limit: 10 + commit-message: + prefix: "deps" + include: "scope" + labels: + - "dependencies" + + - package-ecosystem: "npm" + directory: "/packages/cells" + schedule: + interval: "weekly" + open-pull-requests-limit: 10 + commit-message: + prefix: "deps" + include: "scope" + labels: + - "dependencies" + + - package-ecosystem: "npm" + directory: "/packages/source" + schedule: + interval: "weekly" + open-pull-requests-limit: 10 + commit-message: + prefix: "deps" + include: "scope" + labels: + - "dependencies" From 65f38f223964a59e2c67e97596c61c90bf5a6d36 Mon Sep 17 00:00:00 2001 From: ImmortalRabbit <29354535+ImmortalRabbit@users.noreply.github.com> Date: Thu, 14 Aug 2025 16:56:25 +0100 Subject: [PATCH 2/3] Improve Quickstart doc --- README.md | 39 +++++++++++++++++++++++++++++++++++++-- packages/core/API.md | 34 ---------------------------------- packages/core/README.md | 37 +++++++++++++++++++++++++++++++++++-- 3 files changed, 72 insertions(+), 38 deletions(-) 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?** From 0b52701ba97710d72d7f69b4c0b40237944b8337 Mon Sep 17 00:00:00 2001 From: ImmortalRabbit <29354535+ImmortalRabbit@users.noreply.github.com> Date: Thu, 14 Aug 2025 16:59:36 +0100 Subject: [PATCH 3/3] remove dependebot from this PR --- .github/dependabot.yml | 45 ------------------------------------------ 1 file changed, 45 deletions(-) delete mode 100644 .github/dependabot.yml diff --git a/.github/dependabot.yml b/.github/dependabot.yml deleted file mode 100644 index a966c5f2b..000000000 --- a/.github/dependabot.yml +++ /dev/null @@ -1,45 +0,0 @@ -version: 2 -updates: - - package-ecosystem: "npm" - directory: "/" - schedule: - interval: "weekly" - open-pull-requests-limit: 10 - commit-message: - prefix: "deps" - include: "scope" - labels: - - "dependencies" - - - package-ecosystem: "npm" - directory: "/packages/core" - schedule: - interval: "weekly" - open-pull-requests-limit: 10 - commit-message: - prefix: "deps" - include: "scope" - labels: - - "dependencies" - - - package-ecosystem: "npm" - directory: "/packages/cells" - schedule: - interval: "weekly" - open-pull-requests-limit: 10 - commit-message: - prefix: "deps" - include: "scope" - labels: - - "dependencies" - - - package-ecosystem: "npm" - directory: "/packages/source" - schedule: - interval: "weekly" - open-pull-requests-limit: 10 - commit-message: - prefix: "deps" - include: "scope" - labels: - - "dependencies"