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.

github DefinitelyTyped / DefinitelyTyped / types / react-data-grid / react-data-grid-tests.tsx View on Github external
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<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});
github DefinitelyTyped / DefinitelyTyped / types / react-data-grid / v2 / react-data-grid-tests.tsx View on Github external
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<any, any> {
   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 (
github DefinitelyTyped / DefinitelyTyped / types / react-data-grid / v2 / react-data-grid-tests.tsx View on Github external
};
   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>
       );
   }
}

class CustomRowSelectorCell extends ReactDataGridPlugins.Editors.CheckboxEditor {
    render(){
        return super.render();
    }
}

export interface ICustomSelectAllProps {
    onChange: any;
    inputRef: any;
}

class CustomSelectAll extends React.Component<ICustomSelectAllProps> {
    render() {
        return (
            <div className='react-grid-checkbox-container checkbox-align'>
                <input
                    className='react-grid-checkbox'
github DefinitelyTyped / DefinitelyTyped / types / react-data-grid / v2 / react-data-grid-tests.tsx View on Github external
];

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,
        getRowMetaData: (rowdata: any, column: ReactDataGrid.Column) => {
            return {};
        }
    },
    {
        key: 'title',
        name: 'Title',
github DefinitelyTyped / DefinitelyTyped / types / react-data-grid / react-data-grid-tests.tsx View on Github external
];

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,
        getRowMetaData: (rowdata: any, column: ReactDataGrid.Column) => {
            return {};
        }
    },
    {
        key: 'title',
        name: 'Title',
github DefinitelyTyped / DefinitelyTyped / types / react-data-grid / v2 / react-data-grid-tests.tsx View on Github external
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<any, any> {
   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>
github DefinitelyTyped / DefinitelyTyped / types / react-data-grid / react-data-grid-tests.tsx View on Github external
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<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});
github DefinitelyTyped / DefinitelyTyped / types / react-data-grid / v2 / react-data-grid-tests.tsx View on Github external
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<any, any> {
   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>
       );
github oknosoft / metadata.js / packages / metadata-react-ui / plugin.js View on Github external
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 => {
github oknosoft / metadata.js / packages / metadata-react-ui / plugin.js View on Github external
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 => {