vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-08-11 12:30:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

React-data-grid: adding in onRowClick (#15220)

Browse Source 
* adding in onRowClick

* typo

* updating to keep v1 and fixing addons for v2

* adding in column cellClass and getRowMetaData

* adding in test for getRowMetaData

* fixing test

* adding filterRenderer

* fixing silly mistakes
This commit is contained in:
Kieran Peat
2017-04-03 14:44:55 -07:00
committed by Andy
parent 60c1f3c711
commit 2b5bb39244
5 changed files with 880 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
types/react-data-grid/index.d.ts
Vendored
+29 -10
View File
@@ -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 <https://github.com/SupernaviX>
// Definitions by: Simon Gellis <https://github.com/SupernaviX>, Kieran Peat <https://github.com/KieranPeat>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.1
// TypeScript Version: 2.2
/// <reference types="react" />
@@ -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<Object> | ((rowIdx: number) => Object)
rowGetter: Array<object> | ((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<Object>) => void
onRowSelect?: (rows: Array<object>) => 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<any> | React.ComponentClass<any> | React.StatelessComponent<any>;
/**
* 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;
types/react-data-grid/react-data-grid-tests.tsx
+38 -4
View File
@@ -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<any, any> {
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 (
<div>
<input type="text" value={this.state.filterTerm} onChange={(e) => this.handleChange(e)} />
</div>
);
}
}
faker.locale = 'en_GB';
function createFakeRowObjectData(index:number):Object {
@@ -103,7 +126,10 @@ var columns:ReactDataGrid.Column[] = [
name: 'County',
editor: <AutoCompleteEditor options={counties}/>,
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<any, any> {
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<any, any> {
keys: {rowKey: 'id', values: selectedRows}
}
}}
onRowClick={this.onRowClick}
/>
);
types/react-data-grid/v1/index.d.ts
Vendored
+501
View File
@@ -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 <https://github.com/SupernaviX>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.1
/// <reference types="react" />
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<Object> | ((rowIdx: number) => Object)
/**
* The total number of rows to render. Required.
*/
rowsCount: number
/**
* The columns to render.
*/
columns?: Array<Column>
/**
* 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<any>
/**
* 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<any>
/**
* A react component to customize how rows are rendered.
* If you want to define your own, consider extending ReactDataGrid.Row.
*/
rowRenderer?: React.ReactElement<any> | React.ComponentClass<any> | React.StatelessComponent<any>
/**
* A component to display when there are no rows to render.
*/
emptyRowsView?: React.ComponentClass<any> | React.StatelessComponent<any>
/**
* 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<Object>) => 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<SelectionParams>) => void,
onRowsDeselected?: (rows: Array<SelectionParams>) => void,
selectBy?: {
indexes?: Array<number>;
keys?: { rowKey: string, values: Array<any> };
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<any>
/**
* A custom read-only formatter for this column. An image formatter is available in "react-data-grid/addons".
*/
formatter?: React.ReactElement<any> | React.ComponentClass<any> | React.StatelessComponent<any>
/**
* A custom formatter for this column's header.
*/
headerRenderer?: React.ReactElement<any> | React.ComponentClass<any> | React.StatelessComponent<any>
/**
* 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<any>, 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<any>
}
/**
* 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<GridProps, {}> { }
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<any, any> { }
/**
* A react coponent that renders a cell of the grid
*/
export class Cell extends React.Component<any, any> { }
}
}
declare namespace AdazzleReactDataGridPlugins {
// TODO: refine types for these addons
export namespace Editors {
export class AutoComplete extends React.Component<any, {}> { }
export class DropDownEditor extends React.Component<any, {}> { }
export class SimpleTextEditor extends React.Component<any, {}> { }
export class CheckboxEditor extends React.Component<any, {}> { }
}
export namespace Formatters {
export class ImageFormatter extends React.Component<any, {}> { }
export class DropDownFormatter extends React.Component<any, {}> { }
}
export class Toolbar extends React.Component<any, any> {}
// 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<any, {}> { }
export class MenuHeader extends React.Component<any, {}> { }
export class MenuItem extends React.Component<any, {}> { }
export class SubMenu extends React.Component<any, {}> { }
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
}
}
}
}
types/react-data-grid/v1/react-data-grid-tests.tsx
+285
View File
@@ -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: <ReactDataGridPlugins.Formatters.ImageFormatter value={faker.image.cats()}/>
},
{
key: 'county',
name: 'County',
editor: <AutoCompleteEditor options={counties}/>,
width: 200,
resizable: true
},
{
key: 'title',
name: 'Title',
editor: <DropDownEditor options={titles}/>,
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<any, any> {
getInitialState() {
var fakeRows = createRows(2000);
return {rows: fakeRows};
}
getColumns() {
var clonedColumns = columns.slice();
clonedColumns[2].events = {
onClick: function (ev:React.SyntheticEvent<any>, 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<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'
enableCellSelect={true}
columns={this.getColumns()}
rowGetter={this.getRowAt}
rowsCount={this.getSize()}
onGridRowsUpdated={this.handleGridRowsUpdated}
toolbar={<Toolbar onAddRow={this.handleAddRow}/>}
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}
}
}}
/>
);
}
}
types/react-data-grid/v1/tsconfig.json
+27
View File
@@ -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"
]
}