How to use react-data-grid-addons - 10 common examples
To help you get started, we’ve selected a few react-data-grid-addons examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
DefinitelyTyped / DefinitelyTyped / types / react-data-grid / react-data-grid-tests.tsx View on Github 
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;
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});import * as React from 'react';
import ReactDataGrid = require('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;
var { Selectors } = ReactDataGridPlugins.Data;
class CustomFilterHeaderCell extends React.Component {
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 (};
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 value="{this.state.filterTerm}" type="text"> this.handleChange(e)} />
</div>
);
}
}
class CustomRowSelectorCell extends ReactDataGridPlugins.Editors.CheckboxEditor {
render(){
return super.render();
}
}
export interface ICustomSelectAllProps {
onChange: any;
inputRef: any;
}
class CustomSelectAll extends React.Component {
render() {
return (
<div>
</div>];
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,
getRowMetaData: (rowdata: any, column: ReactDataGrid.Column) => {
return {};
}
},
{
key: 'title',
name: 'Title',];
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,
getRowMetaData: (rowdata: any, column: ReactDataGrid.Column) => {
return {};
}
},
{
key: 'title',
name: 'Title',import * as React from 'react';
import ReactDataGrid = require('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;
var { Selectors } = ReactDataGridPlugins.Data;
class CustomFilterHeaderCell extends React.Component {
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></div>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;
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});import * as React from 'react';
import ReactDataGrid = require('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;
var { Selectors } = ReactDataGridPlugins.Data;
class CustomFilterHeaderCell extends React.Component {
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 value="{this.state.filterTerm}" type="text"> this.handleChange(e)} />
</div>
);var _DataField = require("metadata-react-ui/DataField");
var _reactDataGridAddons = require("react-data-grid-addons");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const AutoCompleteEditor = _reactDataGridAddons.Editors.AutoComplete; /**
* ### модификатор метод columns() справочника scheme_settings - добавляет форматтеры и редакторы
*
* @module rx_columns
*
* Created 10.01.2017
*/
const DropDownEditor = _reactDataGridAddons.Editors.DropDownEditor;
const DropDownFormatter = _reactDataGridAddons.Formatters.DropDownFormatter;
function rx_columns($p) {
const { moment } = $p.utils;
const date_formatter = {
date: v => {
const { presentation } = moment(v).format(moment._masks.date);
return _react2.default.createElement(
"div",
{ title: presentation },
presentation
);
},
date_time: v => {Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _DataField = require("metadata-react-ui/DataField");
var _reactDataGridAddons = require("react-data-grid-addons");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const AutoCompleteEditor = _reactDataGridAddons.Editors.AutoComplete; /**
* ### модификатор метод columns() справочника scheme_settings - добавляет форматтеры и редакторы
*
* @module rx_columns
*
* Created 10.01.2017
*/
const DropDownEditor = _reactDataGridAddons.Editors.DropDownEditor;
const DropDownFormatter = _reactDataGridAddons.Formatters.DropDownFormatter;
function rx_columns($p) {
const { moment } = $p.utils;
const date_formatter = {
date: v => {react-data-grid-addons
A set of addons for react-data-grid
