| ActionType | 'Add' | 'BeginEdit' | 'ClearFiltering' | 'ClearSorting' | 'Delete' | 'Edit' | 'FilterDialogAfterOpen' | 'FilterDialogBeforeOpen' | 'Filtering' | 'Paging' | 'Searching' | 'Sorting' | Defines the set of supported actions triggered during component interactions or programmatic operations.
Used across event interfaces to identify the type of operation performed, such as sorting, filtering, or editing.
Enables consistent handling and conditional logic based on action context. Add - Represents the initiation of a new record creation process.
Used to distinguish between create and update operations.BeginEdit - Represents before modification of an existing record.
Used to dynamically modify update logic or validations.ClearFiltering - Represents the removal of all active filters.
Typically used to reset filtering state.ClearSorting - Represents the removal of an existing sort configuration.
Typically used to reset sorting state.Delete - Represents the deletion of an existing record.
Used to distinguish between delete operations.Edit - Represents the modification of an existing record.
Used to apply update logic or validations.FilterDialogAfterOpen - Represents the event triggered after the filter dialog has been opened.
Used to perform post-open actions such as focusing elements or logging interactions.FilterDialogBeforeOpen - Represents the event triggered before the filter dialog is opened.
Used to customize dialog content, modify configuration, or prevent opening based on conditions.Filtering - Represents a filtering operation applied to one or more fields.
Typically triggered by input changes or programmatic filter logic.Paging - Represents a pagination operation applied to Data Grid component.
Commonly triggered by interaction with pager component items or programmatic pagination logic.Searching - Represents a searching operation applied to fields.
Typically triggered by toolbar search input changes or programmatic search logic.Sorting - Represents a sorting operation applied to one or more fields.
Commonly triggered by interaction with column headers or programmatic sort logic.
|
| AggregateType | 'Average' | 'Count' | 'Custom' | 'FalseCount' | 'Max' | 'Min' | 'Sum' | 'TrueCount' | Enumerates the types of aggregate calculations supported by the Data Grid component.
Defines the available aggregation methods for summarizing data in the grid’s footer sections.
Used to configure how data is aggregated for display in aggregate rows or columns. AverageCountCustomFalseCountMaxMinSumTrueCount
|
| AutoSelectMode | 'Default' | 'Intermediate' | Specifies the header checkbox click behavior for remote data sources.
Controls how the header checkbox toggles between states for selection operations. Default - The header checkbox toggles between checked and unchecked (two-state behavior).
When checked, all rows on the current page are selected.
When unchecked, all rows on the current page are deselected.Intermediate - The header checkbox toggles through all three states: checked, unchecked, and intermediate (tri-state behavior).
Allows more granular control over selection state representation.
Particularly useful for partial selection scenarios.
|
| CellType | 'Aggregate' | 'Content' | 'Header' | Defines the structural category of a layout element.
Used to distinguish between header, content, and aggregate sections for styling and behavior customization.
Applicable to cell-level configurations in React Data Grid component. Aggregate - Represents the aggregate or summary section of a layout.
Typically used for totals, summaries, or computed values.Content - Represents the main content section of a layout.
Typically used for displaying primary data or interactive elements.Header - Represents the header section of a layout.
Commonly used for column titles, labels, or control elements.
|
| ClipMode | 'Clip' | 'Ellipsis' | 'EllipsisWithTooltip' | Defines the cell content's overflow handling mode.
Controls how text is displayed when it exceeds the cell's visible area. Clip - Truncates the cell content when it overflows its area.
No visual indication is provided for clipped content.Ellipsis - Displays an ellipsis (...) when the cell content overflows.
Provides a visual cue that content is truncated.EllipsisWithTooltip - Applies an ellipsis to overflowing cell content and shows a tooltip on hover.
Enhances readability by allowing users to view the full content.
|
| ColumnType | 'Boolean' | 'Checkbox' | 'Command' | 'Date' | 'DateTime' | 'Number' | 'String' | Defines the supported data types for grid columns.
Used to define how data is interpreted and rendered in each column.
If not explicitly defined, the type is inferred from the first row's data based on each cell value type. Boolean - Represents boolean values.
Used for true/false or yes/no type fields.Checkbox - Represents a column type that renders checkboxes for row selection.
Includes both header-level and row-level Checkbox components for bulk and individual selection.Command - Represents a special column type for rendering command buttons (Edit, Delete, Update, Cancel).
Used to define a column that displays action buttons instead of data values.Date - Represents date values.
Used for timestamps, birthdays, or scheduling data.DateTime - Represents date and time values.
Used for precise timestamps, scheduling data with time.Number - Represents numeric values.
Used for quantities, prices, or any numerical data.String - Represents text or string values.
Commonly used for names, descriptions, or identifiers.
|
| CommandItemType | 'Cancel' | 'Delete' | 'Edit' | 'Update' | Defines the built‑in command item types (action buttons) available in a command column.
These buttons provide standard CRUD operations within grid rows. Cancel - Displays in edit mode. Discards changes and restores the row to its previous state.Delete - Displays when the row is not in edit mode. Deletes the record.Edit - Displays when the row is not in edit mode. Initiates editing for the row.Update - Displays in edit mode. Saves changes made to the record.
|
| EditType | 'CheckBox' | 'DatePicker' | 'DropDownList' | 'NumericTextBox' | 'TextBox' | Defines the available edit types for grid columns.
Used to configure the input control rendered during column cell editing. CheckBox - Defines a checkbox for editing boolean values.
Used for true/false or yes/no type fields.DatePicker - Defines a date picker for editing date values.
Ideal for scheduling, timestamps, or calendar-based inputs.DropDownList - Defines a dropdown list for selecting string values.
Useful for predefined options or lookup fields.NumericTextBox - Defines a numeric input for editing number values.
Supports validation and formatting for numeric fields.TextBox - Defines a default standard text input for editing string values.
Suitable for general-purpose text fields.
|
| FilterBarMode | 'Immediate' | 'OnEnter' | Defines the filter bar mode options for grid filtering behavior.
Determines how and when the filter operation is triggered in the grid. Immediate - Initiates the filter operation automatically after a short delay (default: 500 ms).
Ideal for responsive filtering as the user types.OnEnter - Initiates the filter operation only after the Enter key is pressed.
Suitable for precise filtering and reducing unnecessary operations.
|
| FilterBarType | 'DatePicker' | 'NumericTextBox' | 'TextBox' | Enumerates the filter bar types supported by Data Grid component for column-level filtering.
Defines the type of filter UI and logic applied to a column, such as string, numeric, or date-based filtering.
Used to configure the filtering behavior and user interface for specific columns in the grid. DatePicker - Applies a date-based filter using a date picker.
Useful for filtering columns with date values.NumericTextBox - Applies a numeric filter using a number input.
Ideal for filtering numeric fields such as price, quantity, etc.TextBox - Applies a string-based filter using a text input.
Suitable for filtering textual data.
|
| GridLine | 'Both' | 'Default' | 'Horizontal' | 'None' | 'Vertical' | Defines the grid line display modes for the grid layout.
Controls the visibility of horizontal and vertical lines between cells, enhancing visual structure and readability. Both - Displays both horizontal and vertical grid lines.
Provides a fully bordered layout for clear separation of cells.Default - Displays only horizontal grid lines.
Useful for row-based separation while keeping columns visually merged.Horizontal - Displays only horizontal grid lines.
Useful for row-based separation while keeping columns visually merged.None - No grid lines are displayed.
Creates a clean, borderless layout for minimalistic design.Vertical - Displays only vertical grid lines.
Useful for column-based separation while keeping rows visually merged.
|
| LoadingIndicatorType | 'Shimmer' | 'Spinner' | Specifies the type of visual loading indicator displayed during grid data operations.
Used to provide user feedback when the grid is fetching, processing, or rendering data.
Configured through LoadingIndicatorSettings.indicatorType. Shimmer - Displays a shimmer (skeleton) effect as a loading placeholder.
Simulates the structure and shape of content being loaded, providing a more modern and engaging user experience.
Suitable for scenarios where previewing the expected content layout improves perceived performance.Spinner - Displays a circular or linear spinner animation.
Provides a traditional loading indicator suitable for data fetching, filtering, and paging operations.
Recommended for minimalistic loading feedback without placeholder content.
|
| NewRowPosition | 'Bottom' | 'Top' | Defines the available positions for inserting a new row within a data grid.
Used to control where the newly added record appears in the grid layout.
This enum is referenced by the newRowPosition property in EditSettings. Bottom - Inserts the new row at the end of the grid.
Suitable for chronological data entry or bottom-up workflows.Top - Inserts the new row at the beginning of the grid.
Useful for prioritizing newly added records or maintaining top-down workflows.
|
| RowType | 'Aggregate' | 'Content' | 'Header' | Defines the structural category of a layout element.
Used to distinguish between header, content, and aggregate sections for styling and behavior customization.
Applicable to row-level configurations in React Data Grid component. Aggregate - Represents the aggregate or summary section of a layout.
Typically used for totals, summaries, or computed values.Content - Represents the main content section of a layout.
Typically used for displaying primary data or interactive elements.Header - Represents the header section of a layout.
Commonly used for column titles, labels, or control elements.
|
| ScrollMode | 'Auto' | 'Infinite' | 'Virtual' | Defines the scrolling and data-loading strategy for the Data Grid component during virtualized row rendering.
Determines how rows are fetched and rendered based on the current scroll position and viewport.
This enum is used with VirtualizationSettings to control whether data is loaded dynamically from a server
or rendered from locally available data. Auto - Automatic scrolling mode with local data rendering.
Renders all available rows from the in-memory data source without making additional server requests.
No dynamic data loading occurs during scrolling.
Suitable for scenarios where the complete dataset is available locally or where data size is manageable without virtualization.Infinite - Infinite scrolling mode for progressive data loading.
Loads additional rows progressively as the user scrolls toward the end of the currently loaded dataset.
New data is appended to the existing grid content without clearing previous rows.
Suitable for continuous data feeds, real-time data streams, and incremental loading of large remote datasets.Virtual - Virtual scrolling mode with server-side data management.
Renders only the visible row range and requests the required data segment from the server based on the current viewport.
Works in conjunction with server-side paging and filtering.
|
| SelectionMode | 'Multiple' | 'Single' | Specifies the selection behavior supported by the Data Grid component.
Determines whether selection is limited to a Single row or can be applied to Multiple row simultaneously.
This enum is used internally to configure selection logic and user interactions. Multiple - Enables multi-row selection.
Users can select by multiple row in sequence, typically using the Ctrl or Shift key.Single - Allows selection by only one row at a time.
Selecting a new row will clear the previous row selection.
|
| SortDirection | 'Ascending' | 'Descending' | Defines the direction of sorting applied to grid columns.
Used to control the order in which data is displayed. Ascending - Sorts data in ascending order (e.g., A–Z, 0–9).
Commonly used for alphabetical or chronological sorting.Descending - Sorts data in descending order (e.g., Z–A, 9–0).
Useful for prioritizing higher values or latest entries.
|
| SortMode | 'Multiple' | 'Single' | Specifies the sorting behavior supported by the Data Grid component.
Determines whether sorting is limited to a single column or can be applied to multiple columns simultaneously.
This enum is used internally to configure sorting logic and user interactions. Multiple - Enables multi-column sorting.
Users can sort by multiple columns in sequence, typically using the Ctrl key.Single - Allows sorting by only one column at a time.
Selecting a new column will clear the previous sort.
|
| TextAlign | 'Center' | 'Justify' | 'Left' | 'Right' | Defines the horizontal text alignment within grid cells and headers.
Used to control the visual alignment of text for better readability and layout consistency. Center - Centers the text horizontally within the cell.
Useful for headers or balanced visual presentation.Justify - Justifies the text to evenly spread across the cell width.
Best suited for paragraph-style content or long descriptions.Left - Aligns text to the left edge of the cell.
Commonly used for textual and string-based data.Right - Aligns text to the right edge of the cell.
Ideal for numeric or financial data to maintain column alignment.
|
| Theme | 'Material' | Specifies the theme configuration for the Data Grid component.
Used internally to determine default values for theme-dependent properties (e.g., row height in virtualization).
The theme property defines static default values and calculations used during grid initialization and rendering,
such as the default rowHeight value when row DOM virtualization is enabled. Grid styling and visual appearance are controlled by importing the corresponding theme CSS files for the Data Grid,
not by the theme property alone. The theme property must be coordinated with the appropriate CSS import. Material - Material Design theme configuration for the Data Grid component.
Used internally for Material Design default calculations such as row height (50px) in the Data Grid.
Requires importing Material theme CSS for the Data Grid: '@syncfusion/react-grids/styles/material.css'.
|
| WrapMode | 'Both' | 'Content' | 'Header' | Defines the available text wrapping modes for grid cells.
Used to control how text is displayed within header and content cells, improving readability and layout flexibility. Both - Enables wrapping for both header and content cells.
Ensures full visibility of labels and cell values, especially useful for long or multilingual text.Content - Wraps only the content cells.
Header cells stay single-line to maintain alignment and layout consistency.Header - Wraps only the header cells.
Content cells remain single-line for a compact layout while preserving header readability.
|
| VirtualDomType | 'Both' | 'Column' | 'Row' | Specifies the virtualization rendering strategy for grid content.
Determines whether rows, columns, or both are virtualized in the DOM for optimal rendering performance.
Virtualization reduces the number of rendered DOM elements, improving performance with large datasets. Both - Virtualizes both rows and columns in the DOM.
Provides optimal performance for large datasets by rendering only visible cells.
Recommended for grids with large datasets containing many rows and columns.Column - Virtualizes only columns in the DOM.
Renders only the visible columns within the viewport while keeping all rows in the DOM.
Useful for grids with many columns and a manageable number of rows.Row - Virtualizes only rows in the DOM.
Renders only the visible rows within the viewport while keeping all columns in the DOM.
Suitable when column virtualization is not needed due to a manageable number of columns.
|