diff --git a/types/react-data-grid/index.d.ts b/types/react-data-grid/index.d.ts index 3ec11776f9..3db701477b 100644 --- a/types/react-data-grid/index.d.ts +++ b/types/react-data-grid/index.d.ts @@ -1,8 +1,8 @@ -// Type definitions for react-data-grid 1.0.4 +// Type definitions for react-data-grid 2.0 // Project: https://github.com/adazzle/react-data-grid.git -// Definitions by: Simon Gellis +// Definitions by: Simon Gellis , Kieran Peat // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.1 +// TypeScript Version: 2.2 /// @@ -18,7 +18,7 @@ declare namespace AdazzleReactDataGrid { * Gets the data to render in each row. Required. * Can be an array or a function that takes an index and returns an object. */ - rowGetter: Array | ((rowIdx: number) => Object) + rowGetter: Array | ((rowIdx: number) => object) /** * The total number of rows to render. Required. */ @@ -148,7 +148,7 @@ declare namespace AdazzleReactDataGrid { * Called when a row is selected. * @param rows The (complete) current selection of rows. */ - onRowSelect?: (rows: Array) => void + onRowSelect?: (rows: Array) => void /** * A property that's unique to every row. * This property is required to enable row selection. @@ -191,6 +191,13 @@ declare namespace AdazzleReactDataGrid { isSelectedKey?: string; } } + /** + * An event function called when a row is clicked. + * Clicking the header row will trigger a call with -1 for the rowIdx. + * @param rowIdx zero index number of row clicked + * @param row object behind the row + */ + onRowClick?: (rowIdx : number, row : object) => void } /** @@ -235,7 +242,11 @@ declare namespace AdazzleReactDataGrid { * Whether the rows in the grid can be filtered by this column. * @default false */ - filterable?: boolean + filterable?: boolean; + /** + * A custom formatter for this column's filter. + */ + filterRenderer?: React.ReactElement | React.ComponentClass | React.StatelessComponent; /** * The editor for this column. Several editors are available in "react-data-grid/addons". * @default A simple text editor @@ -258,6 +269,14 @@ declare namespace AdazzleReactDataGrid { events?: { [name: string]: ColumnEventCallback } + /** + * Retrieve meta data about the row, optionally provide column as a second argument + */ + getRowMetaData?: (rowdata: any, column?: Column) => any; + /** + * A class name to be applied to the cells in the column + */ + cellClass?: string; } interface ColumnEventCallback { @@ -280,7 +299,7 @@ declare namespace AdazzleReactDataGrid { /** * The columns that were updated and their values. */ - updated: Object + updated: object /** * The name of the column that was updated. */ @@ -328,7 +347,7 @@ declare namespace AdazzleReactDataGrid { /** * The values of the row. */ - rowData: Object + rowData: object /** * The double click event. */ @@ -380,7 +399,7 @@ declare namespace AdazzleReactDataGrid { /** * The columns that were updated and their values. */ - updated: Object + updated: object /** * The action that occurred to trigger this event. * One of 'cellUpdate', 'cellDrag', 'columnFill', or 'copyPaste'. @@ -472,7 +491,7 @@ declare module "react-data-grid" { export = ReactDataGrid; } -declare module "react-data-grid/addons" { +declare module "react-data-grid-addons" { import Plugins = AdazzleReactDataGridPlugins; import Editors = Plugins.Editors; import Formatters = Plugins.Formatters; diff --git a/types/react-data-grid/react-data-grid-tests.tsx b/types/react-data-grid/react-data-grid-tests.tsx index bff860ee02..287a74c449 100644 --- a/types/react-data-grid/react-data-grid-tests.tsx +++ b/types/react-data-grid/react-data-grid-tests.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as ReactDataGrid from 'react-data-grid'; -import * as ReactDataGridPlugins from 'react-data-grid/addons'; +import * as ReactDataGridPlugins from 'react-data-grid-addons'; import faker = require('faker'); var Editors = ReactDataGridPlugins.Editors; @@ -8,6 +8,29 @@ var Toolbar = ReactDataGridPlugins.Toolbar; var AutoCompleteEditor = Editors.AutoComplete; var DropDownEditor = Editors.DropDownEditor; + +class CustomFilterHeaderCell extends React.Component { + constructor(props: any, context: any) { + super(props, context); + + this.state = { + filterTerm: "" + }; + } + handleChange(e: any) { + let val = e.target.value; + this.setState({filterTerm: val}); + this.props.onChange({filterTerm: val, column: this.props.column}); + } + render() { + return ( +
+ this.handleChange(e)} /> +
+ ); + } +} + faker.locale = 'en_GB'; function createFakeRowObjectData(index:number):Object { @@ -103,7 +126,10 @@ var columns:ReactDataGrid.Column[] = [ name: 'County', editor: , width: 200, - resizable: true + resizable: true, + getRowMetaData: (rowdata: any, column: ReactDataGrid.Column) => { + return {}; + } }, { key: 'title', @@ -178,14 +204,17 @@ var columns:ReactDataGrid.Column[] = [ name: 'Company Name', editable: true, width: 200, - resizable: true + resizable: true, + filterable: true, + filterRenderer: CustomFilterHeaderCell }, { key: 'sentence', name: 'Sentence', editable: true, width: 200, - resizable: true + resizable: true, + cellClass: 'sentence-class' } ]; @@ -220,6 +249,10 @@ class Example extends React.Component { this.setState({rows: rows}); } + onRowClick(rowIdx:number, row: Object) { + // Do nothing, just test that it accepts an event + } + handleAddRow(e:any) { var newRow = { value: e.newRowIndex, @@ -278,6 +311,7 @@ class Example extends React.Component { keys: {rowKey: 'id', values: selectedRows} } }} + onRowClick={this.onRowClick} /> ); diff --git a/types/react-data-grid/v1/index.d.ts b/types/react-data-grid/v1/index.d.ts new file mode 100644 index 0000000000..3ec11776f9 --- /dev/null +++ b/types/react-data-grid/v1/index.d.ts @@ -0,0 +1,501 @@ +// Type definitions for react-data-grid 1.0.4 +// Project: https://github.com/adazzle/react-data-grid.git +// Definitions by: Simon Gellis +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.1 + +/// + +declare namespace AdazzleReactDataGrid { + + interface SelectionParams { + rowIdx: number, + row: any + } + + interface GridProps { + /** + * Gets the data to render in each row. Required. + * Can be an array or a function that takes an index and returns an object. + */ + rowGetter: Array | ((rowIdx: number) => Object) + /** + * The total number of rows to render. Required. + */ + rowsCount: number + /** + * The columns to render. + */ + columns?: Array + + /** + * Invoked when the user changes the value of a single cell. + * Should update that cell's value. + * @param e Information about the event + */ + onRowUpdated?: (e: RowUpdateEvent) => void + /** + * Invoked when the user pulls down the drag handle of an editable cell. + * Should update the values of the selected cells. + * @param e Information about the event + */ + onCellsDragged?: (e: CellDragEvent) => void + /** + * Invoked when the user double clicks on the drag handle of an editable cell. + * Should update the values of the cells beneath the selected cell. + * @param e Information about the event + */ + onDragHandleDoubleClick?: (e: DragHandleDoubleClickEvent) => void + /** + * Invoked when the user copies a value from one cell and pastes it into another (in the same column). + * Should update the value of the cell in row e.toRow. + * @param e Information about the event + */ + onCellCopyPaste?: (e: CellCopyPasteEvent) => void + /** + * Invoked after the user updates the grid rows in any way. + * @param e Information about the event + */ + onGridRowsUpdated?: (e: GridRowsUpdatedEvent) => void + + /** + * A toolbar to display above the grid. + * Consider using the toolbar included in "react-data-grid/addons". + */ + toolbar?: React.ReactElement + /** + * A context menu to disiplay when the user right-clicks a cell. + * Consider using "react-contextmenu", included in "react-data-grid/addons". + */ + contextMenu?: React.ReactElement + /** + * A react component to customize how rows are rendered. + * If you want to define your own, consider extending ReactDataGrid.Row. + */ + rowRenderer?: React.ReactElement | React.ComponentClass | React.StatelessComponent + /** + * A component to display when there are no rows to render. + */ + emptyRowsView?: React.ComponentClass | React.StatelessComponent + + /** + * The minimum width of the entire grid in pixels. + */ + minWidth?: number + /** + * The minimum height of the entire grid in pixels. + * @default 350 + */ + minHeight?: number + /** + * The height of each individual row in pixels. + * @default 35 + */ + rowHeight?: number + /** + * The height of the header row in pixels. + * @default rowHeight + */ + headerRowHeight?: number + /** + * The minimum width of each column in pixels. + * @default 80 + */ + minColumnWidth?: number + /** + * Invoked when a column has been resized. + * @param index The index of the column + * @param width The new width of the column + */ + onColumnResize?: (index: number, width: number) => void + + /** + * Controls what happens when the user navigates beyond the first or last cells. + * 'loopOverRow' will navigate to the beginning/end of the current row. + * 'changeRow' will navigate to the beginning of the next row or the end of the last. + * 'none' will do nothing. + * @default none + */ + cellNavigationMode?: 'none' | 'loopOverRow' | 'changeRow' + + /** + * Called when the user sorts the grid by some column. + * Should update the order of the rows returned by rowGetter. + * @param sortColumn The name of the column being sorted by + * @param sortDirection The direction to sort ('ASC'/'DESC'/'NONE') + */ + onGridSort?: (sortColumn: string, sortDirection: 'ASC' | 'DESC' | 'NONE') => void + /** + * Called when the user filters a column by some value. + * Should restrict the rows in rowGetter to only things that match the filter. + * @param filter The filter being added + */ + onAddFilter?: (filter: Filter) => void + /** + * Called when the user clears all filters. + * Should restore the rows in rowGetter to their original state. + */ + onClearFilters?: () => void + + /** + * When set to true or 'multi', enables multiple row select. + * When set to 'single', enables single row select. + * When set to false or not set, disables row select. + * @default false + */ + enableRowSelect?: boolean | 'single' | 'multi' + /** + * Called when a row is selected. + * @param rows The (complete) current selection of rows. + */ + onRowSelect?: (rows: Array) => void + /** + * A property that's unique to every row. + * This property is required to enable row selection. + * @default 'id' + */ + rowKey?: string + + /** + * Enables cells to be selected when clicked. + * @default false + */ + enableCellSelect?: boolean + /** + * Called when a cell is selected. + * @param coordinates The row and column indices of the selected cell. + */ + onCellSelected?: (coordinates: {rowIdx: number, idx: number}) => void + /** + * Called when a cell is deselected. + * @param coordinates The row and column indices of the deselected cell. + */ + onCellDeSelected?: (coordinates: {rowIdx: number, idx: number}) => void + + /** + * How long to wait before rendering a new row while scrolling in milliseconds. + * @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; + } + } + } + + /** + * Information about a specific column to be rendered. + */ + interface Column { + /** + * A unique key for this column. Required. + * Each row should have a property with this name, which contains this column's value. + */ + key: string + /** + * This column's display name. Required. + */ + name: string + /** + * A custom width for this specific column. + * @default minColumnWidth from the ReactDataGrid + */ + width?: number + /** + * Whether this column can be resized by the user. + * @default false + */ + resizable?: boolean + /** + * Whether this column should stay fixed on the left as the user scrolls horizontally. + * @default false + */ + locked?: boolean + /** + * Whether this column can be edited. + * @default false + */ + editable?: boolean + /** + * Whether the rows in the grid can be sorted by this column. + * @default false + */ + sortable?: boolean + /** + * Whether the rows in the grid can be filtered by this column. + * @default false + */ + filterable?: boolean + /** + * The editor for this column. Several editors are available in "react-data-grid/addons". + * @default A simple text editor + */ + editor?: React.ReactElement + /** + * A custom read-only formatter for this column. An image formatter is available in "react-data-grid/addons". + */ + formatter?: React.ReactElement | React.ComponentClass | React.StatelessComponent + /** + * A custom formatter for this column's header. + */ + headerRenderer?: React.ReactElement | React.ComponentClass | React.StatelessComponent + /** + * Events to be bound to the cells in this specific column. + * Each event must respect this standard in order to work correctly: + * @example + * function onXxx(ev :SyntheticEvent, (rowIdx, idx, name): args) + */ + events?: { + [name: string]: ColumnEventCallback + } + } + + interface ColumnEventCallback { + /** + * A callback for a native react event on a specific cell. + * @param ev The react event + * @param args The row and column coordinates of the cell, and the name of the event. + */ + (ev: React.SyntheticEvent, args: {rowIdx: number, idx: number, name: string}): void + } + + /** + * Information about a row update + */ + interface RowUpdateEvent { + /** + * The index of the updated row. + */ + rowIdx: number + /** + * The columns that were updated and their values. + */ + updated: Object + /** + * The name of the column that was updated. + */ + cellKey: string + /** + * The name of the key pressed to trigger the event ('Tab', 'Enter', etc.). + */ + key: string + } + + /** + * Information about a cell drag + */ + interface CellDragEvent { + /** + * The name of the column that was dragged. + */ + cellKey: string + /** + * The row where the drag began. + */ + fromRow: number + /** + * The row where the drag ended. + */ + toRow: number + /** + * The value of the cell that was dragged. + */ + value: any + } + + /** + * Information about a drag handle double click + */ + interface DragHandleDoubleClickEvent { + /** + * The row where the double click occurred. + */ + rowIdx: number + /** + * The column where the double click occurred. + */ + idx: number + /** + * The values of the row. + */ + rowData: Object + /** + * The double click event. + */ + e: React.SyntheticEvent + } + + /** + * Information about a copy paste + */ + interface CellCopyPasteEvent { + /** + * The row that was pasted to. + */ + rowIdx: number + /** + * The value that was pasted. + */ + value: any + /** + * The row that was copied from. + */ + fromRow: number + /** + * The row that was pasted to. + */ + toRow: number + /** + * The key of the column where the copy paste occurred. + */ + cellKey: string + } + + /** + * Information about some update to the grid's contents + */ + interface GridRowsUpdatedEvent { + /** + * The key of the column where the event occurred. + */ + cellKey: string + /** + * The top row affected by the event. + */ + fromRow: number + /** + * The bottom row affected by the event. + */ + toRow: number + /** + * The columns that were updated and their values. + */ + updated: Object + /** + * The action that occurred to trigger this event. + * One of 'cellUpdate', 'cellDrag', 'columnFill', or 'copyPaste'. + */ + action: 'cellUpdate' | 'cellDrag' | 'columnFill' | 'copyPaste' + } + + /** + * Some filter to be applied to the grid's contents + */ + interface Filter { + /** + * The key of the column being filtered. + */ + columnKey: string + /** + * The term to filter by. + */ + filterTerm: string + } + + /** + * Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like + * http://adazzle.github.io/react-data-grid/ + */ + export class ReactDataGrid extends React.Component { } + export namespace ReactDataGrid { + // Useful types + export import Column = AdazzleReactDataGrid.Column; + export import Filter = AdazzleReactDataGrid.Filter; + + // 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; + export import GridRowsUpdatedEvent = AdazzleReactDataGrid.GridRowsUpdatedEvent; + + // Actual classes exposed on module.exports + /** + * A react component that renders a row of the grid + */ + export class Row extends React.Component { } + /** + * A react coponent that renders a cell of the grid + */ + export class Cell extends React.Component { } + } +} + +declare namespace AdazzleReactDataGridPlugins { + // TODO: refine types for these addons + export namespace Editors { + export class AutoComplete extends React.Component { } + export class DropDownEditor extends React.Component { } + export class SimpleTextEditor extends React.Component { } + export class CheckboxEditor extends React.Component { } + } + export namespace Formatters { + export class ImageFormatter extends React.Component { } + export class DropDownFormatter extends React.Component { } + } + export class Toolbar extends React.Component {} + // TODO: re-export the react-contextmenu typings once those exist + // https://github.com/vkbansal/react-contextmenu/issues/10 + export namespace Menu { + export class ContextMenu extends React.Component { } + export class MenuHeader extends React.Component { } + export class MenuItem extends React.Component { } + export class SubMenu extends React.Component { } + export const monitor: { + getItem(): any + getPosition(): any + hideMenu(): void + }; + export function connect(Menu: any): any; + export function ContextMenuLayer( + identifier: any, + configure?: (props: any) => any + ): (Component: any) => any + } +} + +declare module "react-data-grid" { + import ReactDataGrid = AdazzleReactDataGrid.ReactDataGrid; + + // commonjs export + export = ReactDataGrid; +} + +declare module "react-data-grid/addons" { + import Plugins = AdazzleReactDataGridPlugins; + import Editors = Plugins.Editors; + import Formatters = Plugins.Formatters; + import Toolbar = Plugins.Toolbar; + import Menu = Plugins.Menu; + + // ES6 named exports + export { + Editors, + Formatters, + Toolbar, + Menu + } + + // attach to window + global { + interface Window { + ReactDataGridPlugins: { + Editors: typeof Editors + Formatters: typeof Formatters + Toolbar: typeof Toolbar + Menu: typeof Menu + } + } + } +} diff --git a/types/react-data-grid/v1/react-data-grid-tests.tsx b/types/react-data-grid/v1/react-data-grid-tests.tsx new file mode 100644 index 0000000000..bff860ee02 --- /dev/null +++ b/types/react-data-grid/v1/react-data-grid-tests.tsx @@ -0,0 +1,285 @@ +import * as React from 'react'; +import * as ReactDataGrid from 'react-data-grid'; +import * as ReactDataGridPlugins from 'react-data-grid/addons'; +import faker = require('faker'); + +var Editors = ReactDataGridPlugins.Editors; +var Toolbar = ReactDataGridPlugins.Toolbar; +var AutoCompleteEditor = Editors.AutoComplete; +var DropDownEditor = Editors.DropDownEditor; + +faker.locale = 'en_GB'; + +function createFakeRowObjectData(index:number):Object { + return { + id: 'id_' + index, + avartar: faker.image.avatar(), + county: faker.address.county(), + email: faker.internet.email(), + title: faker.name.prefix(), + firstName: faker.name.firstName(), + lastName: faker.name.lastName(), + street: faker.address.streetName(), + zipCode: faker.address.zipCode(), + date: faker.date.past().toLocaleDateString(), + bs: faker.company.bs(), + catchPhrase: faker.company.catchPhrase(), + companyName: faker.company.companyName(), + words: faker.lorem.words(), + sentence: faker.lorem.sentence() + }; +} + +function createRows(numberOfRows:number) { + var rows:Object[] = []; + for (var i = 0; i < numberOfRows; i++) { + rows[i] = createFakeRowObjectData(i); + } + return rows; +} + +var counties = [ + {id: 0, title: 'Bedfordshire'}, + {id: 1, title: 'Berkshire'}, + {id: 2, title: 'Buckinghamshire'}, + {id: 3, title: 'Cambridgeshire'}, + {id: 4, title: 'Cheshire'}, + {id: 5, title: 'Cornwall'}, + {id: 6, title: 'Cumbria, (Cumberland)'}, + {id: 7, title: 'Derbyshire'}, + {id: 8, title: 'Devon'}, + {id: 9, title: 'Dorset'}, + {id: 10, title: 'Durham'}, + {id: 11, title: 'Essex'}, + {id: 12, title: 'Gloucestershire'}, + {id: 13, title: 'Hampshire'}, + {id: 14, title: 'Hertfordshire'}, + {id: 15, title: 'Huntingdonshire'}, + {id: 16, title: 'Kent'}, + {id: 17, title: 'Lancashire'}, + {id: 18, title: 'Leicestershire'}, + {id: 19, title: 'Lincolnshire'}, + {id: 20, title: 'Middlesex'}, + {id: 21, title: 'Norfolk'}, + {id: 22, title: 'Northamptonshire'}, + {id: 23, title: 'Northumberland'}, + {id: 24, title: 'Nottinghamshire'}, + {id: 25, title: 'Northamptonshire'}, + {id: 26, title: 'Oxfordshire'}, + {id: 27, title: 'Northamptonshire'}, + {id: 28, title: 'Rutland'}, + {id: 29, title: 'Shropshire'}, + {id: 30, title: 'Somerset'}, + {id: 31, title: 'Staffordshire'}, + {id: 32, title: 'Suffolk'}, + {id: 33, title: 'Surrey'}, + {id: 34, title: 'Sussex'}, + {id: 35, title: 'Warwickshire'}, + {id: 36, title: 'Westmoreland'}, + {id: 37, title: 'Wiltshire'}, + {id: 38, title: 'Worcestershire'}, + {id: 39, title: 'Yorkshire'} +]; + +var titles = ['Dr.', 'Mr.', 'Mrs.', 'Miss', 'Ms.']; + +var columns:ReactDataGrid.Column[] = [ + { + key: 'id', + name: 'ID', + width: 80, + resizable: true + }, + { + key: 'avartar', + name: 'Avartar', + width: 60, + formatter: ReactDataGridPlugins.Formatters.ImageFormatter, + resizable: true, + headerRenderer: + }, + { + key: 'county', + name: 'County', + editor: , + width: 200, + resizable: true + }, + { + key: 'title', + name: 'Title', + editor: , + width: 200, + resizable: true, + events: { + onDoubleClick: function () { + console.log("The user double clicked on title column"); + } + } + }, + { + key: 'firstName', + name: 'First Name', + editable: true, + width: 200, + resizable: true + }, + { + key: 'lastName', + name: 'Last Name', + editable: true, + width: 200, + resizable: true + }, + { + key: 'email', + name: 'Email', + editable: true, + width: 200, + resizable: true + }, + { + key: 'street', + name: 'Street', + editable: true, + width: 200, + resizable: true + }, + { + key: 'zipCode', + name: 'ZipCode', + editable: true, + width: 200, + resizable: true + }, + { + key: 'date', + name: 'Date', + editable: true, + width: 200, + resizable: true + }, + { + key: 'bs', + name: 'bs', + editable: true, + width: 200, + resizable: true + }, + { + key: 'catchPhrase', + name: 'Catch Phrase', + editable: true, + width: 200, + resizable: true + }, + { + key: 'companyName', + name: 'Company Name', + editable: true, + width: 200, + resizable: true + }, + { + key: 'sentence', + name: 'Sentence', + editable: true, + width: 200, + resizable: true + } +]; + +class Example extends React.Component { + getInitialState() { + var fakeRows = createRows(2000); + return {rows: fakeRows}; + } + + getColumns() { + var clonedColumns = columns.slice(); + clonedColumns[2].events = { + onClick: function (ev:React.SyntheticEvent, args:{idx:number, rowIdx:number}) { + var idx = args.idx; + var rowIdx = args.rowIdx; + this.refs.grid.openCellEditor(rowIdx, idx); + }.bind(this) + }; + + return clonedColumns; + } + + handleGridRowsUpdated(updatedRowData:ReactDataGrid.GridRowsUpdatedEvent) { + var rows = this.state.rows; + + for (var i = updatedRowData.fromRow; i <= updatedRowData.toRow; i++) { + var rowToUpdate = rows[i]; + var updatedRow = Object.assign({}, rowToUpdate, updatedRowData.updated); + rows[i] = updatedRow; + } + + this.setState({rows: rows}); + } + + handleAddRow(e:any) { + var newRow = { + value: e.newRowIndex, + userStory: '', + developer: '', + epic: '' + }; + var rows = this.state.rows; + rows.push(newRow); + this.setState({rows: rows}); + } + + getRowAt(index:number) { + if (index < 0 || index > this.getSize()) { + return undefined; + } + return this.state.rows[index]; + } + + getSize() { + 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 ( + } + enableRowSelect={true} + 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/types/react-data-grid/v1/tsconfig.json b/types/react-data-grid/v1/tsconfig.json new file mode 100644 index 0000000000..96020e8aac --- /dev/null +++ b/types/react-data-grid/v1/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": false, + "strictNullChecks": false, + "baseUrl": "../../", + "jsx": "react", + "typeRoots": [ + "../../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "paths": { + "react-data-grid": [ "react-data-grid/v1" ] + } + }, + "files": [ + "index.d.ts", + "react-data-grid-tests.tsx" + ] +}