Merge branch 'master' of github.com:grid-js/website into master

Author: afshinm

docs/integrations/angular.md

@@ -0,0 +1,118 @@
+---
+id: angular
+title: Angular
+---
+
+## Install
+
+```bash
+npm install gridjs gridjs-angular
+```
+
+## Usage
+
+In your module
+
+```ts
+import { GridjsAngularModule } from 'gridjs-angular';
+
+@NgModule({
+  imports: [CommonModule,GridjsAngularModule],
+  declarations: [...],
+  exports: [...],
+})
+export class AppModule {}
+```
+
+In your component template
+
+```ts
+import { Component } from "@angular/core";
+import { GridJsConfig } from "gridjs-angular";
+
+@Component({
+  template: `
+    <gridjs-angular
+      [gridConfig]="gridConfig"
+      (cellClick)="handleCellClick($event)"
+      (rowClick)="handleRowClick($event)"
+      (beforeLoad)="handleBeforeLoad($event)"
+      (gridLoad)="handleGridLoad($event)"
+    ></gridjs-angular>
+  `,
+})
+class ExampleComponent {
+  public gridConfig: GridJsConfig = {
+    columns: ["Name", "Email", "Phone Number"],
+    data: [
+      ["John", "[email protected]", "(353) 01 222 3333"],
+      ["Mark", "[email protected]", "(01) 22 888 4444"],
+      ["Eoin", "[email protected]", "0097 22 654 00033"],
+      ["Sarah", "[email protected]", "+322 876 1233"],
+      ["Afshin", "[email protected]", "(353) 22 87 8356"],
+    ],
+  };
+
+  handleCellClick(event: any) {
+    console.log("cellClicked", event);
+  }
+
+  handleRowClick(event: any) {
+    console.log("rowClicked", event);
+  }
+
+  handleBeforeLoad(event: any) {
+    console.log("beforeLoad", event);
+  }
+
+  handleGridLoad(event: any) {
+    console.log("load", event);
+  }
+}
+```
+
+Finally don't forget to add gridjs theme in your index.html
+
+```html
+<link
+  href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
+  rel="stylesheet"
+/>
+```
+
+## Inputs
+
+- You can pass all Grid.js configs to the `<gridjs-angular>` component as inputs. See [Grid.js Config](https://gridjs.io/docs/config) for more details.
+
+- `gridConfig` You can pass Grid.js config as one object and it will be merged with other Grid.js inputs.
+
+- `plugins` Grid.js plugins array. See [Grid.js Plugins](https://gridjs.io/docs/plugin/basics)
+
+## Outputs
+
+- You can pass all Grid.js events as outputs with a little difference `load` event renamed to `beforeLoad`. See [Grid.js Events](https://gridjs.io/docs/examples/event-handler)
+
+### Can I Grid.js rendering helpers? Yes
+
+- Using `h` function is working fine. See this example plugin.
+
+```ts
+ {
+    id: 'myplugin',
+    component: h(() => h('h1', {}, 'Hello world!'), {}),
+    position: PluginPosition.Header,
+  }
+```
+
+- You can also use `html` in column formatter like this.
+
+```ts
+ {
+    name: 'Email',
+    formatter: (_, row) => html(
+        `<a href='mailto:${row.cells[1].data}'>${row.cells[1].data}</a>`
+      )
+  }
+```
+
+### Can I use Angular components in plugins, formatters, etc? Not yet

docs/sponsors.md

@@ -0,0 +1,20 @@
+---
+id: sponsors
+title: Sponsors
+---
+
+Grid.js is an open-source, MIT licensed, software and is completely free to use and distribute. 
+However, the amount of effort needed to maintain and develop Grid.js is not sustainable without your support. Please
+consider supporting Grid.js via the following methods.
+
+## OpenCollective
+
+<a href="https://opencollective.com/gridjs/donate" target="_blank">
+  <img src="https://opencollective.com/gridjs/donate/[email protected]?color=blue" width="300" />
+</a>
+
+## One-time donation
+
+<a href="https://www.paypal.me/afshinmeh" target="_blank" rel="noopener">
+  <img src="/img/paypal.png" width="100" />
+</a>

docusaurus.config.js

@@ -38,6 +38,9 @@ module.exports = {
           label: 'Examples',
           position: 'left'
         },
+        {
+          to: 'docs/sponsors', label: 'Support Grid.js', position: 'left'
+        },
         {
           to: 'docs/community', label: 'Community', position: 'left'
         },