• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Data Grid / API / Grid / 

Grid

A subclass of React.Component.

Represents the KendoReact Grid component.

class App extends React.Component {
   constructor(props) {
       super(props);
       this.state = {
           data: [
               { 'foo': 'A1', 'bar': 'B1' },
               { 'foo': 'A2', 'bar': 'B2' },
               { 'foo': 'A3', 'bar': 'B2' }
           ]
       };
   }
   render() {
       return (
           <Grid
               data={this.state.data}
               reorderable={true}
           >
               <GridColumn field="foo" />
               <GridColumn field="bar" />
           </Grid>
       );
   }
}
ReactDOM.render(<App />, document.querySelector('my-app'));
NameTypeDefaultDescription

columns

GridColumnProps[]

A getter of the current columns. Gets the current column width or current columns, or any other GridColumnProps for each defined column. Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the ref callback. The following example demonstrates how to reorder the columns by dragging their handlers and check the properties afterwards. You can check the result in the browser console.

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                { 'foo': 'A1', 'bar': 'B1' },
                { 'foo': 'A2', 'bar': 'B2' },
                { 'foo': 'A3', 'bar': 'B2' }
            ]
        };
        this.grid = null;
    }
    render() {
        return (
            <div>
                <Grid
                    data={this.state.data}
                    reorderable={true}
                    ref={(g) => { this.grid = g; }}
                >
                    <GridColumn field="foo" />
                    <GridColumn field="bar" />
                </Grid>
                <button onClick={() => console.log(JSON.stringify(this.grid.columns))}>
                    log current properties into browser console.
                </button>
            </div>
        );
    }
}
ReactDOM.render(<App />, document.querySelector('my-app'));

element

"null" | HTMLDivElement

Returns the HTML element of the Grid component.

props

Readonly<GridProps>

The props of the Grid component.

Methods

fitColumns

Method to fit columns according to their content.

Parameters

columnIds

string[]

Array of column ids to be fitted.

scrollIntoView

Method to allow the scroll to be set to a specific row index when the Grid is scrollable. It is zero based.

Parameters

options

{ rowIndex: number; }

Object, containing the rowIndex to which is going to be scrolled.

In this article

Not finding the help you need?

Contact Support