fix: selection plugin

Author: afshinm

docs/plugins/selection/row-selection.md

@@ -35,11 +35,6 @@ const grid = new Grid({
         plugin: {
           // install the RowSelection plugin
           component: RowSelection,
-          // RowSelection config
-          props: {
-            // use the "email" column as the row identifier
-            id: (row) => row.cell(2).data
-          }
         }
       },
       { 
@@ -79,10 +74,7 @@ const grid = new Grid({
         // select all rows by default!
         data: () => true, 
         plugin: {
-          component: RowSelection,
-          props: {
-            id: (row) => row.cell(2).data
-          }
+          component: RowSelection
         }
       },
       { 
@@ -107,85 +99,6 @@ grid.on('ready', () => {
 `
 } scope={{RowSelection}} />
 
-## Row selection extension
-
-Grid.js enables you to write custom plugins and extend the core functionality. In this example, we are developing a custom
-plugin which listens to the Selection plugin events and populates a list of selected rows.
-
-
-<LiveExample children={
-`
-class SelectionsList extends BaseComponent {
-  constructor(props, context) {
-    super(props, context);
-    
-    this.state = {
-      selectedRows: []
-    };
-  }
-  
-  componentDidMount() {
-     const grid = this.config.instance;
-     
-     grid.on('ready', () => {
-       // find the plugin with the give plugin ID
-       const checkboxPlugin = this.config.plugin.get('selectRow');
-       
-       // subscribe to the store events
-       checkboxPlugin.props.store.on('updated', (state) => {
-         this.setState({
-           selectedRows: state.rowIds
-         });
-       });
-    });
-  }
-  
-  render() {
-    if (!this.state.selectedRows.length) {
-      return h('b', {}, 'Select some rows...');
-    }
-    
-    return h(
-      'ul', 
-      {}, 
-      this.state.selectedRows.map((rowId) => h('li', {}, rowId))
-    );
-  }
-}
-  
-const grid = new Grid({
-  columns: [
-      {
-        id: 'selectRow',
-        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.plugin.add({
-  id: 'selectionsList',
-  component: SelectionsList,
-  position: PluginPosition.Footer,
-});
-`
-} scope={{RowSelection}} />
-
 :::tip
 Follow the [Advanced Plugin](../advanced-plugins.md) article to learn more about writing Grid.js plugins!
 :::

docs/plugins/selection/selection-events.md

@@ -26,10 +26,7 @@ const grid = new Grid({
         id: 'awesomeCheckbox',
         name: 'Select',
         plugin: {
-          component: RowSelection,
-          props: {
-            id: (row) => row.cell(2).data
-          }
+          component: RowSelection
         }
       },
       { 
@@ -45,14 +42,9 @@ const grid = new Grid({
   ])
 });
 
-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);
-  });
+// subscribe to the store events
+grid.config.store.subscribe(function (state) {
+  console.log('checkbox updated', state.rowSelection);
 })
 `
 } scope={{RowSelection}} />