fix: updating selector to data + adding the row selection example

Author: afshinm

docs/config/columns.md

@@ -37,7 +37,7 @@ new Grid({
 | Name                  | Description                |  Type                        | Example                                         |
 |-----------------------|----------------------------|------------------------------|-------------------------------------------------|
 | id `optional`         | column ID                  | `string`                     | `phoneNumber`                                   |
-| selector `optional`   | Cell selector fo JSON data | `function`                   | `(row) => row.name.firstName`                   |
+| data `optional`       | Cell default data          | `function` or TCell          | `(row) => row.name.firstName` or `myData`       |
 | name                  | column name                | `string`                     | `Name`                                          |
 | width `optional`      | width of the column        | `string`                     | `200px` or `30%`                                |
 | sort `optional`       | to enable/disable sort     | `boolean`                    | `true` or `0`                                   |

docs/examples/cell-formatting.md

@@ -48,13 +48,13 @@ const grid = new Grid({
       'Salary 2',
       { 
         name: 'Sum',
+        data: null,
         formatter: (_, row) => \`$\${(row.cells[0].data + row.cells[1].data).toLocaleString()} USD\`
       },
    ],
   data: Array(5).fill().map(x => [
     Math.round(Math.random() * 100000),
-    Math.round(Math.random() * 100000),
-    null
+    Math.round(Math.random() * 100000)
   ])
 });
 `

docs/examples/import-json.md

@@ -79,10 +79,10 @@ const grid = new Grid({
 `
 const grid = new Grid({
   columns: [{
-    selector: (row) => row.name.first,
+    data: (row) => row.name.first,
     name: 'First Name'
   }, {
-    selector: (row) => row.name.last,
+    data: (row) => row.name.last,
     name: 'Last Name'
   }, {
     id: 'email',

docs/examples/row-selection.md

@@ -0,0 +1,129 @@
+---
+id: row-selection 
+title: Row selection
+keywords:
+ - javascript
+ - table
+ - javascript table
+ - gridjs
+ - grid js
+ - checkbox
+ - cell checkbox
+ - row selection 
+ 
+---
+
+import { LiveExample } from "../../lib/liveExample.js";
+import { RowSelection } from "gridjs-selection";
+
+## Install
+
+Install the `gridjs-selection` package using yarn/npm:
+
+```bash
+npm install gridjs-selection --save
+```
+
+or use a CDN:
+
+```html
+<script src="https://unpkg.com/gridjs-selection/dist/gridjs-selection.production.min.js"></script>
+```
+
+then import the `RowSelection` plugin:
+
+```js
+import { RowSelection } from "gridjs-selection";
+```
+
+In UMD, `gridjs-selection` plugin globally exposed `gridjs.selection`, e.g:
+
+```js
+gridjs.selection.RowSelection
+```
+
+## Example
+
+Add a new column to your table definition and install the plugin:
+
+<LiveExample children={
+`
+const grid = new Grid({
+  columns: [
+      {
+        id: 'myCheckbox',
+        name: 'Select',
+        plugin: {
+          // install the RowSelection plugin
+          component: RowSelection,
+          // RowSelection config
+          props: {
+            // use the "email" column as the row identifier
+            id: (row) => row.cell(2).data
+          }
+        }
+      },
+      { 
+        name: 'Name',
+        formatter: (cell) => \`Name: \${cell}\`
+      },
+      'Email',
+  ],
+  sort: true,
+  data: Array(5).fill().map(x => [
+    faker.name.findName(),
+    faker.internet.email(),
+  ])
+});
+`
+} scope={{RowSelection}} />
+
+:::note
+In the example above, the 3rd cell (which is `row.cell(2).data`) has been selected as the row identifier which is 
+the "Email" field. Note that the first cell is the checkbox column.
+:::
+
+## Events
+
+You can also subscribe to the `RowSelection` store and receive updates as soon as a row is checked or unchecked:
+
+<LiveExample children={
+`
+const grid = new Grid({
+  columns: [
+      {
+        id: 'awesomeCheckbox',
+        name: 'Select',
+        plugin: {
+          component: RowSelection,
+          props: {
+            id: (row) => row.cell(2).data
+          }
+        }
+      },
+      { 
+        name: 'Name',
+        formatter: (cell) => \`Name: \${cell}\`
+      },
+      'Email',
+  ],
+  sort: true,
+  data: Array(5).fill().map(x => [
+    faker.name.findName(),
+    faker.internet.email(),
+  ])
+});
+  
+grid.on('ready', () => {
+  // find the plugin with the give plugin ID
+  const checkboxPlugin = grid.config.plugin.get('awesomeCheckbox');
+  
+  // subscribe to the store events
+  checkboxPlugin.props.store.on('updated', function (state, prevState) {
+    console.log('checkbox updated', state, prevState);
+  });
+})
+`
+} scope={{RowSelection}} />
+
+