fixed checkbox offset

packages/react-data-grid-examples/src/scripts/example13-all-features.js

@@ -5,6 +5,7 @@ const React = require('react');
 const { Editors, Toolbar, Formatters } = require('react-data-grid-addons');
 const { AutoComplete: AutoCompleteEditor, DropDownEditor } = Editors;
 const { ImageFormatter } = Formatters;
+const { Menu: { ContextMenu, MenuItem, SubMenu } } = require('react-data-grid-addons');
 
 faker.locale = 'en_GB';
 
@@ -246,6 +247,7 @@ const Example = React.createClass({
       <ReactDataGrid
         ref="grid"
         enableCellSelect={true}
+        contextMenu={<MyContextMenu onRowDelete={this.deleteRow} onRowInsertAbove={this.insertRowAbove} onRowInsertBelow={this.insertRowBelow} />}
         columns={this.getColumns()}
         rowGetter={this.getRowAt}
         rowsCount={this.getSize()}
@@ -258,6 +260,50 @@ const Example = React.createClass({
   }
 });
 
+
+// Create the context menu.
+// Use this.props.rowIdx and this.props.idx to get the row/column where the menu is shown.
+const MyContextMenu = React.createClass({
+  propTypes: {
+    onRowDelete: React.PropTypes.func.isRequired,
+    onRowInsertAbove: React.PropTypes.func.isRequired,
+    onRowInsertBelow: React.PropTypes.func.isRequired,
+    rowIdx: React.PropTypes.string.isRequired,
+    idx: React.PropTypes.string.isRequired
+  },
+
+  onRowDelete(e, data) {
+    if (typeof(this.props.onRowDelete) === 'function') {
+      this.props.onRowDelete(e, data);
+    }
+  },
+
+  onRowInsertAbove(e, data) {
+    if (typeof(this.props.onRowInsertAbove) === 'function') {
+      this.props.onRowInsertAbove(e, data);
+    }
+  },
+
+  onRowInsertBelow(e, data) {
+    if (typeof(this.props.onRowInsertBelow) === 'function') {
+      this.props.onRowInsertBelow(e, data);
+    }
+  },
+
+  render() {
+    return (
+      <ContextMenu>
+        <MenuItem data={{rowIdx: this.props.rowIdx, idx: this.props.idx}} onClick={this.onRowDelete}>Delete Row</MenuItem>
+        <SubMenu title="Insert Row">
+          <MenuItem data={{rowIdx: this.props.rowIdx, idx: this.props.idx}} onClick={this.onRowInsertAbove}>Above</MenuItem>
+          <MenuItem data={{rowIdx: this.props.rowIdx, idx: this.props.idx}} onClick={this.onRowInsertBelow}>Below</MenuItem>
+        </SubMenu>
+      </ContextMenu>
+    );
+  }
+});
+
+
 module.exports = exampleWrapper({
   WrappedComponent: Example,
   exampleName: 'All the features grid',

themes/react-data-grid-checkbox.css

@@ -41,7 +41,7 @@
    padding: 0px 10px;
 }
 .react-grid-HeaderCell > .react-grid-checkbox-container > .react-grid-checkbox-label {
-   margin : 0;
+   /*margin : 0;*/
 }
 .radio-custom + .radio-custom-label:before {
     border-radius: 50%;