Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.telerik.com/kendo-react-ui/components/grid/api/gridprops below:

React Data Grid API GridProps

Providing different rendering of the popup element based on the screen dimensions.

Specifies the text that is rendered as title in the adaptive popup.

Enables data-processing inside the GridComponent based on its state. Provides an easy, built-in way to handle data operations like sorting, filtering, grouping, and paging.

<Grid
  autoProcessData={{
    filter: true,
    search: true,
    sort: true,
    group: true,
    page: true
  }}
/>

Defines a set of custom cell components that the Grid will render instead of the default cells.

import { GridCustomCellProps } from '@progress/kendo-react-grid';

const CustomCell = (props: GridCustomCellProps) => (
  <td {...props.tdProps}>
    {props.dataItem[props.field]}
  </td>
);

<Grid
  cells={{
    data: CustomCell
  }}
/>

Determines the children nodes.

Sets a class for the Grid DOM element.

<Grid className="custom-grid-class" />

Enables clipboard copy, cut, and paste manipulations. Accepts ClipboardSettings or a boolean value.

<Grid clipboard={true}  />

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

<Grid columnMenu={() => <div>Custom Column Menu</div>} />

Globally overrides the default (three vertical dots) column menu icon for the whole Grid. If set, the prop can be overridden on column level using the (menuIcon) property.

The collection of column states of the grid.

<Grid columnsState={[{ field: 'ProductName', locked: true }]} />

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

<Grid columnVirtualization={true} />

Specifies the context menu settings applied to the Grid.

<Grid contextMenu={true} />

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. It takes values of type null, any or DataResult Accepts values of type null, any[], or DataResult.

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 rows not updating during paging or scrolling.

<Grid dataItemKey="id" />

The default columns state, used only for the initial load.

<Grid defaultColumnsState={[{ field: 'ProductName', locked: false }]} />

The default detailExpand state applied to the Grid when using uncontrolled mode.

<Grid defaultDetailExpand={{ ['item-data-key-id']: true }} />

The default edit state applied to the Grid when using uncontrolled mode.

<Grid defaultEdit={{ ['item-data-key-id']: true }} />

The default filter state applied to the Grid when using uncontrolled mode.

<Grid defaultFilter={{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'John' }] }} />

The default group state applied to the Grid when using uncontrolled mode.

<Grid defaultGroup={[{ field: 'CategoryName' }]} />

The default groupExpand state applied to the Grid when using uncontrolled mode.

<Grid defaultGroupExpand={[{ field: 'CategoryName', expanded: true }]} />

The descriptor by which the data is searched by default. Its first FilterDescriptor populates the GridSearchBox.

<Grid defaultSearch={{ logic: 'or', filters: [{ field: 'category', operator: 'eq', value: 'electronics' }] }} />

The default select state applied to the Grid when using uncontrolled mode.

<Grid defaultSelect={{ ['item-data-key-id']: true }} />

The default skip state applied to the Grid when using uncontrolled mode.

<Grid defaultSkip={10} />

The default sort state applied to the Grid when using uncontrolled mode. (see example)

<Grid defaultSort={[{ field: 'name', dir: 'asc' }]} />

The default take state applied to the Grid when using uncontrolled mode.

<Grid defaultTake={20} />

Specifies a React element that will be cloned and rendered inside the detail rows of the currently expanded items (see example).

<Grid detail={()=>(<div>Detail Content</div>)} />

The descriptor by which the detail row is expanded.

<Grid detailExpand={{ ['item-data-key-id']: true }} />

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

<Grid detailRowHeight={100} />

The descriptor by which the in-edit mode of an item is defined.

<Grid edit={{ ['item-data-key-id']: true }} />

The Grid editable settings.

<Grid editable={{ enabled: true, mode: 'inline' }} />

Sets a custom edit dialog component that the Grid will render instead of the built-in edit dialog.

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

<Grid filter={{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'John' }] }} />

Enables filtering for the columns with their field option set.

<Grid filterable={true} />

The filter operators for the Grid filters.

<Grid filterOperators={{ text: [{ text: 'grid.filterContainsOperator', operator: 'contains' }] }} />

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

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

<Grid group={[{ field: 'CategoryName' }]} />

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

<Grid groupable={true} />

The descriptor by which the group is expanded.

<Grid groupExpand={[{ field: 'CategoryName', expanded: true }]} />

The descriptor by which the highlight state of an item is defined. Passing a boolean value will highlight the whole row, while passing an object will highlight individual cells by their field.

<Grid highlight={{ ['item-data-key-id']: true }} />
<Grid highlight={{ ['item-data-key-id']: [2, 3] }} />

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

<Grid id="custom-grid-id" />

Sets the language of the Grid when used as a server component. Have not effect when the Grid is used as a client component.

A custom component that the Grid will render instead of the built-in loader.

<Grid loader={<div>Custom Loader...</div>} />

Sets the locale of the Grid when used as a server component. Have not effect when the Grid is used as a client 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.

<Grid lockGroups={true} />

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.

<Grid navigatable={true} />

Fires when clipboard support is enabled, and one of the actions (e.g., copy) is triggered. Accepts a GridClipboardEvent object.

<Grid
  clipboard={true}
  onClipboard={(event) => console.log('Clipboard action:', event.action)}
/>

Fires when the columns are reordered.

<Grid onColumnReorder={(event) => console.log('Column reordered:', event)} />

Fires when a column is resized. Only fired when the Grid is run as a client component.

<Grid onColumnResize={(event) => console.log('Column resized:', event)} />

Fires when the columns state of the Grid is changed.

<Grid onColumnsStateChange={(event) => console.log('Columns state changed:', event)} />

The event that is fired when the ContextMenu is activated. Only fired when the Grid is run as a client component.

<Grid onContextMenu={(event) => console.log('Context menu activated:', event)} />

The event that is fired when the ContextMenu item is clicked. Only fired when the Grid is run as a client component.

<Grid onContextMenuItemClick={(event) => console.log('Context menu item clicked:', event)} />

Fires when the data state of the Grid is changed (more information and example).

<Grid onDataStateChange={(event) => console.log('Data state changed:', event)} />

Fires when the user expands or collapses a detail row.

<Grid onDetailExpandChange={(event) => console.log('Detail expand changed:', event)} />

Fires when the user enters or exits an in-edit mode of a row or cell.

<Grid onEditChange={(event) => console.log('Edit changed:', event)} />

Fires when the Grid filter is modified through the UI. You must handle the event and filter the data.

<Grid
  filterable={true}
  onFilterChange={(event) => console.log('Filter changed:', event.filter)}
/>

Fires when the grouping of the Grid is changed. You have to handle the event yourself and group the data (more information and examples).

<Grid onGroupChange={(event) => console.log('Group changed:', event.group)} />

Fires when the user expands or collapses a group.

<Grid onGroupExpandChange={(event) => console.log('Group expand changed:', event)} />

Fires when the user clicks the checkbox of a column header whose type is set to checkbox.

<Grid onHeaderSelectionChange={(event) => console.log('Header selection changed:', event)} />

Fires when the Grid highlight is modified. You must handle the event and filter the data.

<Grid
  onHighlightChange={(event) => console.log('Highlight changed:', event.highlight)}
/>

Fires when the user changes the values of the item.

<Grid onItemChange={(event) => console.log('Item changed:', event)} />

Fires when the user press keyboard key. Only fired when the Grid is run as a client component.

<Grid onKeyDown={(event) => console.log('Key pressed:', event)} />

Fires when Grid keyboard navigation position is changed. Only fired when the Grid is run as a client component.

<Grid onNavigationAction={(event) => console.log('Navigation action:', event)} />

Fires when the page of the Grid is changed.

<Grid onPageChange={(event) => console.log('Page changed:', event.page)} />

Fires when the user clicks the PDF export button.

<Grid onPdfExport={async (event) => {
       const pdf = await import('@progress/kendo-react-pdf');
       await pdf.saveGridPDF(event.target);
 }} />

Fires when the user clicks a row.

<Grid onRowClick={(event) => console.log('Row clicked:', event)} />

Fires when the user double clicks a row.

<Grid onRowDoubleClick={(event) => console.log('Row double clicked:', event)} />

Fires when the user reorders a row.

<Grid onRowReorder={(event) => console.log('Row reordered:', event)} />

Fires when Grid is scrolled. Only fired when the Grid is run as a client component.

<Grid onScroll={(event) => console.log('Grid scrolled:', event)} />

Fires when the search value of the GridSearchBox is changed.

<Grid onSearchChange={(event) => console.log('Search changed:', event)} />

Fires when the user tries to select or deselect a row or cell.

<Grid onSelectionChange={(event) => console.log('Selection changed:', event)} />

Fires when the sorting of the Grid is changed. You must handle the event and sort the data. (see example)

<Grid
  sortable={true}
  onSortChange={(event) => console.log('Sort changed:', event.sort)}
/>

Configures the pager of the Grid. Accepts GridPagerSettings or a boolean value.(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.
• pageSizeValue: String or Number—Sets the selected value of the page size Dropdownlist. It is useful when the selected value could also be a string not only a number.
• previousNext: Boolean—Toggles the Previous and Next buttons.
• navigatable: Boolean—Defines if the pager will be navigatable.
• responsive: Boolean—Defines if the pager will be responsive. If true, hides the tools that do not fit to the available space.
• adaptive: Boolean—Providing different rendering of the page sizes select element based on the screen dimensions.
• adaptiveTitle: String—Specifies the text that is rendered as title in the adaptive page sizes select element.

<Grid pageable={{ pageSizes: true }} />

The pager component that the Grid will render instead of the built-in pager. It takes values of type null and ComponentType<PagerProps&gt

<Grid pager={() => <div>Custom Pager</div>} />

Defines the page size used by the Grid pager. Required for paging functionality.

When set to true the Grid pdf export will be enabled. If set to an object, the Grid will use the provided settings to export the PDF.

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

<Grid reorderable={true} />

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

<Grid resizable={true} />

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

Defines the row reorder settings.

<Grid rowReorderable={true} />

import { GridCustomRowProps } from '@progress/kendo-react-grid';

const CustomRow = (props: GridCustomRowProps) => (
  <tr {...props.trProps} style={{ backgroundColor: props.dataItem?.highlight ? 'yellow' : 'white' }}>
    {props.children}
  </tr>
);

<Grid
  rows={{
    data: CustomRow
  }}
/>

Enables the built-in row span feature of the Grid.

<Grid rowSpannable={true} />

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.

<Grid scrollable="virtual" />

The descriptor by which the data is searched. Its first FilterDescriptor populates the GridSearchBox.

<Grid search={{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'test' }] }} />

Defines the fields of the data that are filtered by the GridSearchBox.

<Grid searchFields={['name', 'category']} />

The descriptor by which the selected state of an item is defined. Passing a boolean value will select the whole row, while passing an array of strings will select individual.

<Grid select={{ ['item-data-key-id']: true }} />

The Grid selectable settings.

<Grid selectable={{ enabled: true, mode: 'single' }} />

Specifies whether the loader of the Grid will be displayed.

<Grid
  showLoader={true}
  loader={<div>Loading...</div>}
/>

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.

<Grid sort={[{ field: 'name', dir: 'asc' }]} />

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

Represents the style HTML attribute.

<Grid style={{ backgroundColor: 'lightblue' }} />

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

Defines the total number of data items in all pages. Required for paging functionality.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4