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 disable

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 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.

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 DataResult object with processed data The grid will automatically bind to this data and render rows based on the provided records.

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.

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 "stick" 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.

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.

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.

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.

Sets a fixed height for all rows in the grid. This property sets a uniform height for all rows in the grid. When set to a number, all rows will have exactly that height in pixels. When null (default), row height is determined automatically based on content and styles.

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.

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.

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.

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.

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 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.

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.

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.

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

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 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 data objects of the currently selected rows in the grid. Used to access the data of selected rows for processing or display.

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.

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.

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.

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 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.

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 when a grid cell gains focus. Provides details about the focused cell.

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 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 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. Useful for initial configurations or showing loading indicators.

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.