Data Grid Component

Configures summary rows with aggregate functions. The aggregates property allows you to add summary rows to the grid, such as totals, averages, or counts. Each aggregate row can contain multiple aggregations that apply functions like sum, average, min, max, or count to specific columns.

Controls whether keyboard navigation is enabled for the Data Grid. By default, navigation and interaction with grid elements can be performed using keyboard shortcuts and arrow keys. When set to false, the grid's default focus navigation behavior is disabled.

Defines the cell content's overflow mode. The available modes are:

• Clip - Truncates the cell content when it overflows its area.
• Ellipsis - Displays ellipsis when the cell content overflows its area.
• EllipsisWithTooltip - Applies an ellipsis to overflowing cell content and displays a tooltip on hover for enhanced readability.

Defines the configuration for the Column Chooser dialog, controlling both its behavior and appearance. Enables customization of:

• Search with customizable operators
• Diacritics‑insensitive search
• Column ordering and sorting
• Custom templates for header, footer, and column items

Defines the columns to be displayed in the grid. An array of ColumnProps objects that specify how each column in the grid should be configured. This includes properties like field, headerText, width, format, and more. The order of columns in the array determines their display order in the grid.

Configures the context menu settings for the Data Grid component. Enables and customizes the context menu that appears on right‑click interactions. Provides options to:

• Enable or disable the context menu
• Define default or custom menu items

Supplies the data to be displayed in the grid. The data source can be provided as:

• An array of JavaScript objects
• A DataManager instance for local/remote data operations
• A DataResponse object with processed data The grid will automatically bind to this data and render rows based on the provided records.

Specifies row indices that should be expanded by default when the grid loads. Applies only when the master-detail feature enabled using isMasterDetail={true} in the grid props. Rows at these indices automatically display their detail templates on initial render.

Defines the height of the detail row. By default, the detail row height is set to "300px". A custom height can be applied when the master‑detail feature is enabled isMasterDetail={true} in the grid props.

Template for rendering the content of a detail row. Invoked for each expanded master row, providing its row data. Commonly used to render a nested Grid or other custom components.

Configures the editing behavior of the Data Grid. The editSettings property enables and controls editing functionality. It defines which editing operations are permitted, such as adding, editing, and deleting rows, and specifies the editing mode to be used.

Template for displaying content when the grid has no records. Customizes what is displayed when the grid has no data to show. This can be provided as a string, React element, or a function that returns content. It provides better user experience by explaining why the grid is empty or suggesting actions to take.

Determines whether the sf-alt-row CSS class is added to alternate rows in the Data Grid. When set to true, the grid adds the sf-alt-row class to alternate row elements. This supports alternating row styles, which can improve readability in data-dense layouts. The grid does not apply any default styling for this class. Styling must be defined externally. When set to false, the grid does not add the sf-alt-row class to any row.

Enables automatic row and column span behavior for grid cells. When set to true, adjacent cells with matching values automatically merge using both row and column spanning. When set to false, automatic spanning is disabled and only explicit numeric span values are applied. Cells must have rowSpan={true} or colSpan={true} to participate in automatic spanning.

Enables development-specific diagnostics for the grid component. When set to true, the grid outputs additional console warnings, validation messages, and debugging information to assist in identifying configuration issues and improving integration. When set to false, these development diagnostics are suppressed to reduce console noise and minimize runtime overhead. This is a non-reactive property and applies only during initial render.

Controls whether hover effect is applied to grid rows. By default, rows are visually highlighted on pointer hover. When set to false, rows retain a static appearance regardless of pointer hover movement.

Controls HTML sanitization for grid content. When set to true, the grid will sanitize any suspected untrusted HTML content before rendering it. This helps prevent cross-site scripting (XSS) attacks by removing or neutralizing potentially malicious scripts and HTML.

Makes the grid header remain visible during scrolling. When enabled, column headers will "sticky" to the top of the viewport and remain visible even when the user scrolls down through the grid data. This improves usability by keeping column headers in view at all times.

Specifies the filtering configuration for the grid, controlling the filter UI and behavior. Includes options to enable/disable filtering, set the filter UI type, define custom operators, and configure case or accent sensitivity. Used to tailor the filtering experience to match application requirements and data types.

Gets the height of a specific row dynamically at runtime. Accepts a callback function that returns the height in pixels based on row information, allowing row-specific height customization. This property enables dynamic row sizing based on content, data values, or other custom logic.

Configures the visibility of grid lines between cells. Determines which grid lines are displayed in the grid. Available options are:

• Default: Shows horizontal lines only.
• None: Displays no grid lines.
• Both: Shows both horizontal and vertical grid lines.
• Horizontal: Shows horizontal lines only.
• Vertical: Shows vertical lines only.

Specifies the grouping configuration for the grid, enabling hierarchical data organization by column values. Controls group expansion, drag-drop UI, caption formatting, and visibility of grouped columns. Used to organize data into collapsible groups for improved readability and analysis.

Sets the height of the grid component. Controls the vertical size of the grid. Can be specified as:

• A number (interpreted as pixels).
• A string with CSS units (e.g., '500px', '100%').
• auto to adjust to content. When a fixed height is set, scrollbars appear automatically when content exceeds the height.

Specifies a unique identifier for the grid component. Provides a distinct ID for the grid instance, enabling targeted interactions, styling, or accessibility features. Used to differentiate multiple grid instances within the same application or DOM.

Enable master-detail (expandable rows) feature for this grid. When enabled, all data rows become expandable master rows.

Callback to determine whether a row is selectable and how its checkbox renders.

Configures loading indicator settings for the Data Grid component. Applies spinner or skeleton customization during data operations.

Specifies the pagination configuration for the grid, controlling how data is divided and navigated. Includes options to enable/disable pagination, set the number of records per page, define the number of navigation links, and select the initial page. Used to tailor the pagination UI and behavior for efficient data handling.

Defines a query to execute against the data source. Allows you to apply a predefined Query object to the data source, which can include filtering, sorting, paging, and other data operations. This is especially useful when working with remote data sources or when you need complex data operations.

Applies a CSS class to each grid row either globally or conditionally. Accepts a static class name or a callback function that returns a class name based on row context. The callback receives a RowClassProps object with the following properties:

• rowType – Identifies the structural role of the row: Header, Content, or Aggregate. Useful for styling header, data, or summary rows.
• rowIndex – The zero-based index of the row.
• data – The full data object for the row, enabling conditional styling based on field values.

Specifies the height for all rows in the grid.

• When a numeric value is provided, all rows will have a fixed height in pixels.
• If rowHeight is undefined and row DOM virtualization is enabled, the height defaults to the theme property based value (e.g., Theme.Material = 50).
• When null (default), row height is automatically calculated based on content and applied styles for grids without row DOM virtualization.

Specifies a custom template for rendering rows in the grid. Allows complete customization of row rendering by providing a template that replaces the default row structure. This can be a string template, React element, or function that returns the row content.

Specifies the search configuration for the grid, controlling how data is searched. Defines settings for enabling the search bar, specifying searchable fields, initial search terms, operators, and case/accent sensitivity. Used to customize the search experience for filtering grid data.

Configures the grid's selection settings, determines whether Single or Multiple selections are allowed. Used to customize the selection experience for user interactions.

Determines whether the column chooser functionality is enabled. When set to false (default), the column chooser button will be disabled in the toolbar (but still visible if included in toolbar array). When set to true, the column chooser button will be enabled and the dialog can be opened. This property controls the enabled/disabled state of the column chooser feature, not its visibility. To show the column chooser button, you must include 'ColumnChooser' in the toolbar array.

Specifies the sorting configuration for the grid, includes options to enable/disable sorting and controlling how data is ordered. Used to customize sorting behavior for data presentation and user interactions.

Specifies the text wrapping configuration for the grid, controlling how text is displayed. Defines the wrap mode to determine which grid sections (header, content, or both) apply text wrapping. Used to customize text display for readability and layout optimization.

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, not by the theme property alone. The theme property must be coordinated with the appropriate CSS import.

Configures the grid toolbar with predefined or custom items. The toolbar property allows you to add a toolbar to the grid with both predefined actions (add, edit, delete, update, cancel, search) and custom items. Custom items can include text, template content, and click handlers.

Configures virtualization behavior for grid rendering. Includes options for enabling virtualization, defining DOM type, and customizing buffer and scroll settings.

Sets the width of the grid component. Controls the horizontal size of the grid. Can be specified as:

• A number (interpreted as pixels).
• A string with CSS units (e.g., '800px', '100%').
• auto to adjust to parent container. When a fixed width is set, horizontal scrollbars appear automatically when content exceeds the width.

Adds a new record to the grid’s data source. Inserts a new row with the provided data at the specified index or at the start if no index is provided.

Cancels the current cell edit operation and discards all unsaved changes. This method can be used only when editSettings.mode is set to 'Cell'.

Aborts the active CRUD operation, exits edit mode, and restores the original row state. Typically invoked via the Cancel toolbar action or Escape key during editing.

Clears cell selections in the grid. If specific cells are provided, only those cells are cleared. If no cells are provided, all cell selections are cleared. Removes highlighting and resets the cell selection state. Uses data-based format for cell specification:

• Data-based: { rowKey: string|number, fieldNames: string[] }.

Clears filters applied to the specified fields or all columns in the grid. Removes filtering conditions, restoring the grid to display all data or data for specified fields. Used to programmatically reset filtering for a fresh data view.

Removes all active groupings and returns the grid to its default ungrouped state. Fires the onGroup event, passing 'removeall' as the operation argument to represent the clear grouping action.

Deselects specific rows by their indexes in the grid. Removes the specified rows from the current selection, updating the grid’s UI accordingly. Used to programmatically remove selection from specific rows.

Clears all currently selected rows in the grid. Removes the selection state from all rows, resetting the grid’s selection UI. Used to programmatically clear all row selections.

Clears sorting from all columns in the grid. Resets the grid to an unsorted state, removing all sorting applied to any columns. Used to programmatically revert the grid to its original data order.

Collapses all grouped rows in the grid. Fires the onGroup event, passing 'collapseall' as the operation argument to represent the collapse all groups action.

Deletes a record from the grid’s data source based on specified criteria or the selected row. Removes a record matching the provided field name and data, or deletes the currently selected row if no parameters are provided. Used to programmatically remove records, updating the grid’s display and data source accordingly.

Begins editing the specified cell in the grid. This method is available only when editSettings.mode is set to 'Cell'.

Initiates editing for a specified row or the currently selected row. Used to programmatically trigger the editing mode for a specific or selected row.

Expands all grouped rows in the grid. Fires the onGroup event with the argument 'expandall' as the operation argument to represent the expand all groups action.

Filters grid rows by a specified column with given options. Applies a filter to the column identified by its field name, using the provided operator and value, with optional predicate and sensitivity settings. Used to programmatically filter grid data based on column-specific criteria.

Retrieves the column configuration object for a specified field name. Returns the ColumnProps object matching the provided field, enabling access to column metadata like field, header text, or formatting. Used for dynamically accessing or modifying column properties at runtime.

Retrieves the current configuration of all columns in the grid. Returns an array of ColumnProps objects representing the grid’s column settings. Used to access column data for dynamic processing or modifications.

Retrieves all records from the grid based on current settings. Returns an array of data objects reflecting applied pagination, filters, sorting, and searching settings. For remote data sources, returns only the current view data.

Returns the data module used by the grid. Use this to access the current applied queries and data-related configuration settings for the grid. This includes filtering, sorting, pagination, and other data operations.

Retrieves an array of configuration objects for all currently hidden columns in the grid. Used to access metadata for hidden columns for dynamic processing or UI updates.

Retrieves the persistent selected data as an array of record objects. Provides access to the internal persistent selection storage maintained across paging, sorting, filtering, and other grid operations. Only returns data when persistSelection is enabled in selectionSettings.

Retrieves the field names of the primary key columns defined in the grid. Used to identify the primary keys for data operations like updates or deletions.

Retrieves detailed information about the row containing a specified cell element or event target. Returns a RowInfo object with metadata about the associated row, such as its index or data. Used to access row-specific details for dynamic processing or event handling.

Retrieves the selected cells grouped by row in data-based format with cell values. Returns an array of objects, each containing a row, its selected cells, and their values. Format: { rowKey: string|number, fieldNames: string[], data: { [fieldName]: value } }. In data-based mode, multiple cells in the same row are grouped together with their data values.

Retrieves the selected row data or selection metadata from the grid. Returns different types based on configuration:

• Local data: Array of selected row data objects (T[]).
• Remote data with persistent selection: Object with isSelectAll (boolean) and primaryKeys (string[]).
• No selection: Empty array or null.

Retrieves the indexes of the currently selected rows in the grid. Used to determine which rows are currently selected for further processing.

Retrieves an array of configuration objects for all currently visible columns in the grid. Used to access metadata for visible columns for dynamic processing or UI updates.

Navigates to a specific page in the grid’s paginated data. Updates the grid to display the data for the specified page number.

Groups the grid by the specified column fields. The column must have allowGroup set to true as the default. Triggers onGroup event with operation argument 'add'.

Hides the loading spinner overlay previously shown on the grid. Used to update the UI after completing asynchronous or time-consuming operations.

Determines whether the grid is using a remote data source. Remote data sources typically involve server-side operations for pagination, filtering, sorting, and searching.

Opens the column chooser dialog programmatically. Requires the Column Chooser to be enabled showColumnChooser={true} in the grid configuration.

Refreshes the grid’s data and view to reflect the latest state. Updates the grid’s display by re-rendering data based on current settings, such as filters, sorting, pagination or other. Used to synchronize the grid’s UI with changes in the data source or configuration.

Removes sorting from a specified column in the grid. Clears the sorting applied to the column identified by its name, reverting it to an unsorted state. Used to programmatically remove sorting from a specific column.

Saves the changes made in cell edit mode and closes the edit state. This method is available only when editSettings.mode is set to 'Cell'.. If validation is enabled, input is checked automatically; invalid cells are not saved.

Commits the edited or newly added row to the data source after validating inputs and triggering lifecycle events such as onDataChangeStart and onDataChangeComplete. Typically invoked via the Update toolbar action or Enter key during editing.

Searches grid records using a specified search string. Applies a search across the grid’s data based on the configured search settings, such as fields or operators. Used to programmatically filter data using a search term.

Selects a single cell specified by row key and field name. When in this mode, selection persists across paging, sorting, and filtering. This is the primary method for programmatic single-cell selection.

Selects multiple cells specified by row keys and field names (data-based mode). When in data-based mode, selections persist across paging, sorting, and filtering. This is the primary method for programmatic cell selection.

Selects a rectangular range of cells from start position to end position. Selection behavior depends on the configured type (Flow/Box/BoxWithBorder). Uses data-based position format to ensure selections persist across paging, sorting, and filtering. This is the primary method for programmatic range selection.

Selects a single row by its index in the grid. Updates the grid’s selection state to highlight the specified row, optionally toggling the existing selection. Used to programmatically select a row based on its position.

Selects a range of rows from a start index to an optional end index in the grid. Updates the grid’s selection state to highlight all rows within the specified range. Used to programmatically select a continuous set of rows.

Selects multiple rows by their indexes in the grid. Updates the grid’s selection state to highlight the specified rows, typically used in multi-selection mode. Used to programmatically select a collection of rows.

Updates a specific cell’s value in a row identified by its primary key. Modifies the cell value for the specified field in the record matching the provided key, optionally updating the data source. Requires a primary key column defined via columns.isPrimaryKey.

Updates the text of an external message displayed in the grid. Sets or clears a custom message, typically used for notifications or status updates in the grid’s UI.

Updates and refreshes a specific row’s data based on its primary key value. Replaces the row’s data for the record matching the provided key, optionally updating the data source. Requires a primary key column defined via columns.isPrimaryKey.

Displays a loading spinner overlay on the grid to indicate an ongoing operation. Used to enhance the user experience during asynchronous or time-consuming operations.

Sorts a specified column in the grid with given options. Applies sorting to the column identified by its name, using the specified direction and multi-sort behavior. Used to programmatically sort grid data by a column.

Removes grouping for the specified column fields. Triggers onGroup event with operation argument 'remove'.

Updates a specific row in the grid with new data. Replaces the data of the row at the specified index with the provided data object. Used to programmatically modify existing row data in the grid.

Validates all fields in the current edit or add form against their defined rules. Checks the input values in the editing form to ensure they meet column validation criteria. Used to verify data integrity before saving changes.

Validates a specific field against its defined column validation rules. Checks the value of the specified field to ensure it meets the configured validation criteria. Used to verify the validity of a single field during editing.

Fires when a grid cell is clicked. Provides details about the clicked cell.

Fires after cells are successfully deselected in the grid. Provides details about the deselected cells. Only fires when selectionSettings.type is 'Cell'.

Fires when cell editing begins in Cell edit mode. Provides an opportunity to validate the target cell or cancel the edit before the editor is presented.

Fires when a grid cell gains focus. Provides details about the focused cell.

Fires after cells are successfully selected in the grid. Provides details about the selected cells including data and positions. Only fires when selectionSettings.type is 'Cell'.

Fires when column changes are applied in the Column Chooser dialog. Triggered when the user clicks OK/Apply button with the final column visibility configuration. Used to track which columns were shown/hidden and perform post-apply actions.

Fires before the Column Chooser dialog is displayed or opened. Allows customization of column visibility or cancellation before the dialog appears.

Fires when a context menu item is selected or clicked by the user. Handles the action associated with the selected menu item, such as Edit, Delete, Sort, etc. Provides context about the selected item, target row/column, and triggering element.

Fires when the context menu is closed or hidden on the grid. Suitable for cleanup operations or resetting UI state after the context menu interaction completes. Triggered when the user dismisses the menu through selection, clicking outside, or pressing Escape.

Fires when the context menu is about to be opened or displayed on the grid. Allows customization, validation, or cancellation of the context menu before it appears. Provides access to the target element, menu items, and associated row/column data. Supports both synchronous and asynchronous menu item loading:

• Synchronous: Return the modified ContextMenuOpenEvent object.
• Asynchronous: Return a Promise that resolves to the modified ContextMenuOpenEvent object.

Fires when a CRUD operation is cancelled.

Fires when a create, update, or delete operation is completed.

Fires when the grid's data source is changed. Monitors and responds to updates in the grid's data source.

Fires when a create, update, or delete operation is started.

Fires after data is successfully bound to the grid. Suitable for actions requiring fully loaded data.

Fires when grid data state changes due to sorting or paging. Monitors and responds to changes in grid state.

Fires when the bulk‑delete confirmation dialog opens with cross‑page selection enabled. Allows customization of dialog options, such as disabling specific choices or setting the default selection. Use Cases:

• Disable "Delete Current Page": Prevents partial deletion when records are selected across multiple pages.
• Preselect "Delete All Selected Records": Ensures this option is the default, reducing errors and maintaining consistency.

Fires when grid operations like sorting or filtering fail. Provides error details for handling and user feedback.

Fires after a filtering operation completes on the grid. Provides filter state details for post-filter actions.

Fires after the filter Dialog is fully displayed and ready for interaction. Suitable for initializing custom filter components or DOM manipulation.

Fires when the edit or add form is fully loaded and ready for user input.

Fired when the grid is fully loaded and ready for user interaction. Suitable for actions requiring only on grid initially fully loaded data.

Fires at the start of grid initialization before data processing. and component mount. This event is triggered during the React render phase, before the component is mounted to the DOM. Useful for initial configurations or showing loading indicators. Do not perform state updates in this callback, as they will trigger React warnings about updating unmounted components. Use onGridRenderComplete instead for state updates.

Fires when a grouping operation occurs on the grid. Triggered by add/remove column, expand/collapse, or reorder group operations. Provides current grouped columns and operation type for custom handling.

Event triggered after a paging operation is completed on the grid.

Fired when the grid data is refreshed or updated.

Fires when the process of adding a new row starts.

Fires after a row is successfully deselected. Provides details about the deselected row.

Fires when a grid row is clicked. Provides details about the clicked row for custom actions.

Fires when editing begins on a grid record. Allows validation or field modification before editing.

Fires after a row is successfully selected. Provides details about the selected row.

Fires after a searching operation completes on the grid. Provides search result details for post-search actions.

Fires after a sorting operation completes on the grid. Provides sort state details for post-sort actions.

Fires when a toolbar item is clicked. Enables custom actions for toolbar buttons.

Fires before a group is expanded or collapsed. Allows validation or cancellation of group expand/collapse behavior.