diff --git a/react-data-grid/react-data-grid-tests.tsx b/react-data-grid/react-data-grid-tests.tsx index 1b95fa8cc7..1895e1781e 100644 --- a/react-data-grid/react-data-grid-tests.tsx +++ b/react-data-grid/react-data-grid-tests.tsx @@ -247,7 +247,19 @@ class Example extends React.Component { return this.state.rows.length; } + onRowsSelected(rows: Array) { + var selectedIndexes = this.state.selectedIndexes as Array; + + this.setState({selectedIndexes: selectedIndexes.concat(rows.map(r => r.rowIdx))}); + } + onRowsDeselected(rows: Array) { + var rowIndexes = rows.map(r => r.rowIdx); + var selectedIndexes = this.state.selectedIndexes as Array; + this.setState({selectedIndexes: selectedIndexes.filter(i => rowIndexes.indexOf(i) === -1 )}); + } + render() { + let selectedRows = ['id1', 'id2']; return ( { rowHeight={50} minHeight={600} rowScrollTimeout={200} + rowSelection={{ + showCheckbox: true, + enableShiftSelect: true, + onRowsSelected: this.onRowsSelected, + onRowsDeselected: this.onRowsDeselected, + selectBy: { + keys: {rowKey: 'id', values: selectedRows} + } + }} /> ); diff --git a/react-data-grid/react-data-grid.d.ts b/react-data-grid/react-data-grid.d.ts index 0748270a57..0c512c9c70 100644 --- a/react-data-grid/react-data-grid.d.ts +++ b/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) => void, + onRowsDeselected?: (rows: Array) => void, + selectBy?: { + indexes?: Array; + keys?: { rowKey: string, values: Array }; + 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;