Merge pull request #12719 from computerlove/master

Added rowSelection property

react-data-grid/react-data-grid-tests.tsx

@@ -247,7 +247,19 @@ class Example extends React.Component<any, any> {
         return this.state.rows.length;
     }
 
+    onRowsSelected(rows: Array<ReactDataGrid.SelectionParams>) {
+        var selectedIndexes = this.state.selectedIndexes as Array<number>;
+
+        this.setState({selectedIndexes: selectedIndexes.concat(rows.map(r => r.rowIdx))});
+    }
+    onRowsDeselected(rows: Array<ReactDataGrid.SelectionParams>) {
+        var rowIndexes = rows.map(r => r.rowIdx);
+        var selectedIndexes = this.state.selectedIndexes as Array<number>;
+        this.setState({selectedIndexes: selectedIndexes.filter(i => rowIndexes.indexOf(i) === -1 )});
+    }
+
     render() {
+        let selectedRows = ['id1', 'id2'];
         return (
             <ReactDataGrid
                 ref='grid'
@@ -261,6 +273,15 @@ class Example extends React.Component<any, any> {
                 rowHeight={50}
                 minHeight={600}
                 rowScrollTimeout={200}
+                rowSelection={{
+                    showCheckbox: true,
+                    enableShiftSelect: true,
+                    onRowsSelected: this.onRowsSelected,
+                    onRowsDeselected: this.onRowsDeselected,
+                    selectBy: {
+                        keys: {rowKey: 'id', values: selectedRows}
+                    }
+                }}
             />
 
         );

react-data-grid/react-data-grid.d.ts

@@ -9,6 +9,11 @@
 declare namespace AdazzleReactDataGrid {
     import React = __React;
 
+    interface SelectionParams {
+        rowIdx: number,
+        row: any
+    }
+
     interface GridProps {
         /**
          * Gets the data to render in each row. Required.
@@ -173,6 +178,20 @@ declare namespace AdazzleReactDataGrid {
          * @default 0
          */
         rowScrollTimeout?: number
+        /**
+         * Options object for selecting rows
+         */
+        rowSelection?: {
+            showCheckbox?: boolean
+            enableShiftSelect?: boolean
+            onRowsSelected?: (rows: Array<SelectionParams>) => void,
+            onRowsDeselected?: (rows: Array<SelectionParams>) => void,
+            selectBy?: {
+                indexes?: Array<number>;
+                keys?: { rowKey: string, values: Array<any> };
+                isSelectedKey?: string;
+            }
+        }
     }
 
     /**
@@ -396,6 +415,7 @@ declare namespace AdazzleReactDataGrid {
 
         // Various events
         export import RowUpdateEvent = AdazzleReactDataGrid.RowUpdateEvent;
+        export import SelectionParams = AdazzleReactDataGrid.SelectionParams;
         export import CellDragEvent = AdazzleReactDataGrid.CellDragEvent;
         export import DragHandleDoubleClickEvent = AdazzleReactDataGrid.DragHandleDoubleClickEvent;
         export import CellCopyPasteEvent = AdazzleReactDataGrid.CellCopyPasteEvent;