Add an example on how to wrap elements

examples/wrapping-elements/.eleventy.js

@@ -0,0 +1,21 @@
+const transformDomPlugin = require('eleventy-plugin-transformdom');
+
+const wrapTableInOverflowDiv = ({ elements, document }) => {
+  elements.forEach((table) => {
+    const wrapper = document.createElement('div');
+    wrapper.style.overflowX = 'auto';
+    wrapper.style.width = '100%';
+
+    table.parentElement.insertBefore(wrapper, table);
+    wrapper.appendChild(table); // Moves table into the newly created div
+  });
+};
+
+module.exports = function (eleventyConfig) {
+  eleventyConfig.addPlugin(transformDomPlugin, [
+    {
+      selector: 'table',
+      transform: wrapTableInOverflowDiv,
+    },
+  ]);
+};

examples/wrapping-elements/index.md

@@ -0,0 +1,18 @@
+# Element wrapping demo
+
+This is a demo of
+[eleventy-plugin-transformdom](https://github.com/liamfiddler/eleventy-plugin-transformdom)
+which shows to wrap elements.
+
+In this example a table will be wrapped as such:
+
+```html
+<table>
+    ...
+</table>
+
+<div style="overflow-x: auto; width: 100%;">
+    <table>
+        ...
+    </table>
+</div>

examples/wrapping-elements/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "eleventy-plugin-transformdom-examples-wrapping-elements",
+    "version": "1.0.0",
+    "scripts": {
+      "test": "echo \"Error: no test specified\" && exit 1",
+      "start": "eleventy --serve",
+      "build": "eleventy"
+    },
+    "author": "@rvxlab",
+    "license": "MIT",
+    "devDependencies": {
+      "@11ty/eleventy": "^0.11.0",
+      "eleventy-plugin-transformdom": "../../"
+    }
+  }