GridProps

The accessible label of the Grid.

Sets a set of custom components that the Grid will render instead of the built-in cell.

Determines the children nodes.

Sets a class of the Grid DOM element.

Specifies a React element that will be cloned and rendered inside the column menu of the Grid. Can be overridden on column level.

Enables virtualization of the columns. If virtualization is enabled, the columns outside the view are not rendered.

Sets the data of the Grid (see example). If you use paging, the data option has to contain only the items for the current page.

Sets the Grid row key prop to the value of this field in the dataItem. If not set, the dataItem index will be used for the row key, which might lead to row not updated during paging or scrolling.

Specifies a React element that will be cloned and rendered inside the detail rows of the currently expanded items (see example). An item will be rendered as expanded if the value of its expandField is true.

Defines the detail row height and forces an equal height to all detail rows.

Specifies the name of the field which will provide a Boolean representation of the edit state of the current item (more information and examples).

Specifies the name of the field which will provide a Boolean representation of the expanded state of the item (see example).

The descriptor by which the data is filtered (more information and examples). This affects the values and buttons in the FilterRow of the Grid.

Enables the filtering of the columns with their field option set (more information and examples).

The filter operators for the Grid filters.

Copy Codeconst customFilterOperators = {
    'text': [
        { text: 'grid.filterContainsOperator', operator: 'contains' }
    ],
    'numeric': [
        { text: 'grid.filterGtOperator', operator: 'gt' }
    ],
    'date': [
        { text: 'grid.filterAfterOperator', operator: 'gt' }
    ]
}

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 (
            <div>
                <Grid
                    data={this.state.data}
                    reorderable={true}
                    filterable
                    filterOperators={customFilterOperators}
                >
                    <GridColumn field="foo" />
                    <GridColumn field="bar" />
                </Grid>
            </div>
        );
    }
}
ReactDOM.render(<App />, document.querySelector('my-app'));

Determines if the scroll position will be updated after data change. If set to true the scroll will remain on the same position.

The descriptors by which the data will be grouped (more information and examples).

Determines if grouping by dragging and dropping the column headers is allowed (more information and examples).

Sets the id property of the top div element of the component.

Defines if the group descriptor columns are locked (frozen or sticky). Locked columns are the columns that are visible at all times while the user scrolls the component horizontally. Defaults to false.

If set to true, the user can use dedicated shortcuts to interact with the Grid. By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.

Configures the pager of the Grid (see example).

The available options are:

• buttonCount: Number—Sets the maximum numeric buttons count before the buttons are collapsed.
• info: Boolean—Toggles the information about the current page and the total number of records.
• type: PagerType—Accepts the numeric (buttons with numbers) and input (input for typing the page number) values.
• pageSizes: Boolean or Array<number>—Shows a menu for selecting the page size.
• previousNext: Boolean—Toggles the Previous and Next buttons.

The pager component that the Grid will render instead of the built-in pager.

Defines the page size that is used by the Grid pager (see example). Required by the paging functionality.

If set to true, the user can reorder columns by dragging their header cells (see example).

If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells (see example).

Defines the row height and forces an equal height to all rows (see example).

Defines the scroll mode that is used by the Grid (see example).

The available options are:

• none—Renders no scrollbar.
• scrollable—This is the default scroll mode. It requires the setting of the height option.
• virtual—Displays no pager and renders a portion of the data (optimized rendering) while the user is scrolling the content.

The Grid selectable settings.

Specifies the name of the field which will provide a:

• Boolean representation of the selected state of the item (see example) for row selection
• String array of the selected columns of the item for cell selection

Configures the size of the Grid.

The available options are:

• small
• medium

Defines the number of records that will be skipped by the pager (see example). Required by the paging functionality.

The descriptors by which the data is sorted. Applies the sorting styles and buttons to the affected columns.

Enables the sorting for the columns with their field option set (see example).

Represents the style HTML attribute.

Alias of pageSize property. If take is set, pageSize will be ignored.

Defines the total number of data items in all pages (see example). Required by the paging functionality.