``` -------------------------------- ### Row Marker Starting Index Configuration (TypeScript) Source: https://docs.grid.glideapps.com/api/dataeditor/row-markers Sets the initial index for row markers. The `rowMarkerStartIndex` property accepts a number to define the starting count for row numbers, defaulting to 1. ```typescript rowMarkerStartIndex?: number; ``` -------------------------------- ### Row Markers API Source: https://docs.grid.glideapps.com/api/dataeditor This section details the API endpoints related to configuring row markers in the grid, including enabling/disabling them, setting start index, theme, and width. ```APIDOC ## Row Markers Configuration ### Description This API allows for the configuration of row markers, which can display row numbers, selection boxes, or both on the left side of the grid. It also provides options to set the starting index, theme, and width of these markers. ### Method GET/POST (or relevant methods for configuration) ### Endpoint /websites/grid_glideapps_api/row-markers ### Parameters #### Query Parameters - **rowMarkers** (boolean) - Optional - Enable/disable row marker column on the left. Can show row numbers, selection boxes, or both. - **rowMarkerStartIndex** (integer) - Optional - The index of the first element in the grid. - **rowMarkerTheme** (object) - Optional - Overrides the theme for row markers. - **rowMarkerWidth** (integer) - Optional - The width of the row markers in pixels. ### Request Example ```json { "rowMarkers": true, "rowMarkerStartIndex": 1, "rowMarkerTheme": { "backgroundColor": "#f0f0f0", "textColor": "#333333" }, "rowMarkerWidth": 50 } ``` ### Response #### Success Response (200) - **status** (string) - Indicates the success of the operation. - **message** (string) - A confirmation message. #### Response Example ```json { "status": "success", "message": "Row markers configured successfully." } ``` ``` -------------------------------- ### Row Marker Configuration Interface (TypeScript) Source: https://docs.grid.glideapps.com/api/dataeditor/row-markers Defines the TypeScript interface for configuring row markers in the DataEditor component. It includes properties for display type, starting index, theming, and width. ```typescript interface DataEditorProps { // ...other props rowMarkers?: "number" | "none" | "checkbox" | "both" | "checkbox-visible" | "clickable-number"; rowMarkerStartIndex?: number; rowMarkerTheme?: Partial; rowMarkerWidth?: number; // ...other props } ``` -------------------------------- ### DataEditorRef - Get Cell Bounds Source: https://docs.grid.glideapps.com/api/index Retrieves the screen-space bounds (position and dimensions) of a specified cell within the data grid. ```APIDOC ## GET /websites/grid_glideapps_api/dataeditorref/getBounds ### Description Gets the current screen-space bounds of a desired cell. ### Method GET ### Endpoint /websites/grid_glideapps_api/dataeditorref/getBounds ### Parameters #### Query Parameters - **col** (integer) - Required - The column index of the cell. - **row** (integer) - Required - The row index of the cell. ### Request Example ```json { "col": 0, "row": 0 } ``` ### Response #### Success Response (200) - **x** (integer) - The x-coordinate of the cell's top-left corner. - **y** (integer) - The y-coordinate of the cell's top-left corner. - **width** (integer) - The width of the cell. - **height** (integer) - The height of the cell. #### Response Example ```json { "x": 10, "y": 20, "width": 100, "height": 30 } ``` ``` -------------------------------- ### Basic DataEditor Integration Source: https://docs.grid.glideapps.com/api/dataeditor Demonstrates the basic JSX syntax for rendering the DataEditor component with specified dimensions. It includes passing through additional props. ```jsx ``` -------------------------------- ### Grid Keybindings Configuration Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction This section details the configuration options for keybindings within the Grid Glide application. It includes a list of available key combinations, their default status, and the corresponding flags that can be used to customize their behavior. ```APIDOC ## Grid Keybindings ### Description This section details the configuration options for keybindings within the Grid Glide application. It includes a list of available key combinations, their default status, and the corresponding flags that can be used to customize their behavior. ### Method N/A (Configuration / Documentation) ### Endpoint N/A (Configuration / Documentation) ### Parameters #### Path Parameters N/A #### Query Parameters N/A #### Request Body N/A ### Keybindings Table | Key Combo | Default | Flag | Description | | ------------------------------- | ------- | --------------------- | ----------------------------------------------------------------------------- | | Arrow | ✔️ | N/A | Moves the currently selected cell and clears other selections | | Shift + Arrow | ✔️ | N/A | Extends the current selection range in the direction pressed. | | Alt + Arrow | ✔️ | N/A | Moves the currently selected cell and retains the current selection | | Ctrl/Cmd + Arrow | Home/End | ✔️ | N/A | Move the selection as far as possible in the direction pressed. | | Ctrl/Cmd + Shift + Arrow | ✔️ | N/A | Extends the selection as far as possible in the direction pressed. | | Shift + Home/End | ✔️ | N/A | Extends the selection as far as possible in the direction pressed. | | Ctrl/Cmd + A | ✔️ | `selectAll` | Selects all cells. | | Shift + Space | ✔️ | `selectRow` | Selects the current row. | | Ctrl + Space | ✔️ | `selectColumn` | Selects the current column. | | PageUp/PageDown | ✔️ | `pageUp`/`pageDown` | Moves the current selection up/down by one page. | | Escape | ✔️ | `clear` | Clears the current selection. | | Ctrl/Cmd + D | ❌ | `downFill` | Data from the first row of the range will be down-filled into the rows below. | | Ctrl/Cmd + R | ❌ | `rightFill` | Data from the first column of the range will be right-filled into the columns next to it. | | Ctrl/Cmd + C | ✔️ | `copy` | Copies the current selection. | | Ctrl/Cmd + V | ✔️ | `paste` | Pastes the current buffer into the grid. | | Ctrl/Cmd + F | ❌ | `search` | Opens the search interface. | | Ctrl/Cmd + Home/End | ✔️ | `first`/`last` | Move the selection to the first/last cell in the data grid. | | Ctrl/Cmd + Shift + Home/End | ✔️ | `first`/`last` | Extend the selection to the first/last cell in the data grid. | ### Available Flags (TypeScript Type Definition) ```typescript keybindings?: Partial<{ // Legacy deprecated flags readonly pageUp: boolean; readonly pageDown: boolean; readonly first: boolean; readonly last: boolean; // Non-rebindable readonly copy: boolean; readonly cut: boolean; readonly paste: boolean; readonly downFill: boolean | string; readonly rightFill: boolean | string; readonly clear: boolean | string; readonly closeOverlay: boolean | string; readonly acceptOverlayDown: boolean | string; readonly acceptOverlayUp: boolean | string; readonly acceptOverlayLeft: boolean | string; readonly acceptOverlayRight: boolean | string; readonly search: boolean | string; readonly delete: boolean | string; readonly activateCell: boolean | string; readonly scrollToSelectedCell: boolean | string; // Navigation readonly goToFirstColumn: boolean | string; readonly goToLastColumn: boolean | string; readonly goToFirstCell: boolean | string; readonly goToLastCell: boolean | string; readonly goToFirstRow: boolean | string; readonly goToLastRow: boolean | string; readonly goToNextPage: boolean | string; readonly goToPreviousPage: boolean | string; readonly goUpCell: boolean | string; readonly goDownCell: boolean | string; readonly goLeftCell: boolean | string; readonly goRightCell: boolean | string; readonly goUpCellRetainSelection: boolean | string; readonly goDownCellRetainSelection: boolean | string; readonly goLeftCellRetainSelection: boolean | string; readonly goRightCellRetainSelection: boolean | string; // Selection readonly selectToFirstColumn: boolean | string; readonly selectToLastColumn: boolean | string; readonly selectToFirstCell: boolean | string; readonly selectToLastCell: boolean | string; readonly selectToFirstRow: boolean | string; readonly selectToLastRow: boolean | string; readonly selectGrowUp: boolean | string; readonly selectGrowDown: boolean | string; readonly selectGrowLeft: boolean | string; readonly selectGrowRight: boolean | string; readonly selectAll: boolean | string; readonly selectRow: boolean | string; readonly selectColumn: boolean | string; }>; ``` ### Request Example N/A ### Response #### Success Response (200) N/A (This is documentation, not an API endpoint) #### Response Example N/A ``` -------------------------------- ### Input Interaction Settings Source: https://docs.grid.glideapps.com/api/dataeditor Configure user interaction behaviors within the grid, such as keybindings and column width constraints. ```APIDOC ## Input Interaction Settings ### Description Configure user interaction behaviors within the grid, such as keybindings and column width constraints. ### Method GET/POST/PUT (configurable through Glide Apps interface) ### Endpoint `/websites/grid_glideapps_api/input-interaction ### Parameters #### Query Parameters - **keybindings** (string) - Optional - Controls which keybindings are enabled while the grid is selected. - **maxColumnAutoWidth** (number) - Optional - Sets the maximum width a column can be auto-sized to. - **maxColumnWidth** (number) - Optional - Sets the maximum width the user can resize a column to. - **minColumnWidth** (number) - Optional - Sets the minimum width the user can resize a column to. ### Request Example ```json { "keybindings": "all", "maxColumnAutoWidth": 300, "maxColumnWidth": 500, "minColumnWidth": 50 } ``` ### Response #### Success Response (200) - **settings** (object) - Contains the current input interaction settings. #### Response Example ```json { "settings": { "keybindings": "all", "maxColumnAutoWidth": 300, "maxColumnWidth": 500, "minColumnWidth": 50 } } ``` ``` -------------------------------- ### Grid Configuration Props Source: https://docs.grid.glideapps.com/api/dataeditor Configuration options for the Grid component, including column definitions, cell content retrieval, and appearance settings. ```APIDOC ## Grid Configuration Props ### Description Configuration options for the Grid component, including column definitions, cell content retrieval, and appearance settings. ### Method N/A (Configuration Object) ### Endpoint N/A ### Parameters #### Path Parameters N/A #### Query Parameters N/A #### Request Body - **columns** (GridColumn[]) - Required - All columns in the data grid. - **getCellContent** (function) - Required - A callback to get the content of a given cell location. - **rows** (number) - Required - The number of rows in the data-grid. - **fixedShadowX** (boolean) - Optional - Enable/disable a shadow behind fixed columns on the X axis. - **fixedShadowY** (boolean) - Optional - Enable/disable a shadow behind the header(s) on the Y axis. - **freezeColumns** (number) - Optional - The number of columns which should remain in place when scrolling horizontally. - **freezeTrailingRows** (number) - Optional - The number of rows which should remain in place at the bottom of the grid when scrolling. - **getCellsForSelection** (function) - Optional - Used to fetch large amounts of cells at once for copy/paste functionality. - **height** (string | number) - Optional - Overrides the height of the grid. - **markdownDivCreateNode** (function) - Optional - A custom function to render Markdown. - **onVisibleRegionChanged** (function) - Optional - Emits whenever the visible rows/columns changes. - **provideEditor** (function) - Optional - Callback for providing a custom editor for a cell. - **rowHeight** (function | number) - Optional - Callback or number used to specify the height of a given row. - **smoothScrollX** (boolean) - Optional - Enable/disable smooth scrolling on the X axis. - **smoothScrollY** (boolean) - Optional - Enable/disable smooth scrolling on the Y axis. - **width** (string | number) - Optional - Overrides the width of the grid. - **validateCell** (function) - Optional - A callback to validate cell data before updating. - **verticalBorder** (boolean | function) - Optional - Determines if vertical borders should be displayed. - **tint** (boolean) - Optional - Applies a tint to the grid rows. ### Request Example ```json { "columns": [ { "id": "col1", "title": "Column 1" }, { "id": "col2", "title": "Column 2" } ], "rows": 100, "getCellContent": "(row, col) => data[row][col]", "height": 500, "freezeColumns": 1 } ``` ### Response #### Success Response (200) N/A (This represents a configuration object, not an API endpoint response) #### Response Example N/A ``` -------------------------------- ### Get Cell Bounds Source: https://docs.grid.glideapps.com/api/dataeditorref Retrieves the bounding box (Rectangle) of a specific cell identified by its column and row. If no column or row is provided, it returns the bounds of the entire scrollable area. ```typescript getBounds: (col?: number, row?: number) => Rectangle | undefined; ``` -------------------------------- ### Custom Renderers Source: https://docs.grid.glideapps.com/api/dataeditor/custom-cells Provides a way to add custom renderers to the DataEditor. Each renderer can offer its own drawing functionality and editing capabilities. Refer to the guide for detailed implementation instructions. ```APIDOC ## Custom Renderers ### Description Adds custom renderers to the `DataEditor`. Each renderer provides its own drawing functionality and editor. ### Endpoint `/websites/grid_glideapps_api/customRenderers` ### Parameters #### Query Parameters - **customRenderers** (readonly CustomRenderer[]) - Required - An array of custom renderer configurations. ### Request Example ```json { "customRenderers": [ // ... custom renderer configurations ... ] } ``` ### Response #### Success Response (200) - **message** (string) - Confirmation message. #### Response Example ```json { "message": "Custom renderers applied successfully." } ``` ``` -------------------------------- ### DataEditorRef - Emit Command Source: https://docs.grid.glideapps.com/api/index Emits commands that are normally triggered by keyboard shortcuts within the data grid. Useful for programmatic control. ```APIDOC ## POST /websites/grid_glideapps_api/dataeditorref/emit ### Description Emits commands normally emitted by keyboard shortcuts. ### Method POST ### Endpoint /websites/grid_glideapps_api/dataeditorref/emit ### Parameters #### Query Parameters - **command** (string) - Required - The command to emit (e.g., 'copy', 'paste'). ### Request Example ```json { "command": "copy" } ``` ### Response #### Success Response (200) - **status** (string) - The status of the command execution. #### Response Example ```json { "status": "executed" } ``` ``` -------------------------------- ### Selection Handling API Source: https://docs.grid.glideapps.com/api/dataeditor This section covers the properties and events that control and report on user selection within the grid interface. It includes configurations for column and row selection, range selection, fill handle behavior, and focus ring display. ```APIDOC ## Selection Handling API ### Description Provides control over how users can select cells, ranges, columns, and rows within the grid, as well as manages the visual feedback and interaction mechanisms like the fill handle and focus ring. ### Endpoints This documentation details properties and events rather than specific HTTP endpoints. The interactions are typically managed via client-side JavaScript or within the Grid Glide Apps framework. ### Properties #### `allowedFillDirections` - **Type**: `string[]` or `enum` (e.g., ['up', 'down', 'left', 'right']) - **Description**: Controls which directions the fill handle is allowed to extend selection. #### `columnSelect` - **Type**: `boolean` - **Description**: Determines if multiple columns can be selected simultaneously. If true, users can select disjointed or contiguous columns. #### `columnSelectionBlending` - **Type**: `string` or `enum` (e.g., 'none', 'add', 'intersect') - **Description**: Defines how column selections interact or blend with other selection types (e.g., cell selection, row selection). #### `drawFocusRing` - **Type**: `boolean` - **Description**: Controls whether a visual focus ring is rendered around the currently active or selected cell(s) in the grid. #### `fillHandle` - **Type**: `boolean` - **Description**: Enables or disables the presence and functionality of the fill handle, which allows users to extend selections or copy values. #### `gridSelection` - **Type**: `object` - **Description**: Represents the current selection state in the data grid. It typically includes information about the active cell and the boundaries of the selected range. - **Properties**: - `activeCell` (object): Details of the currently active cell. - `range` (object): Defines the start and end coordinates of the selected range. #### `highlightRegions` - **Type**: `array` of `object` - **Description**: Allows for adding supplementary visual highlights to specific cells or regions within the grid to provide contextual information or indicate special states. #### `rangeSelect` - **Type**: `boolean` - **Description**: Determines if users can select multiple, potentially non-contiguous, ranges of cells within the grid. #### `rangeSelectionBlending` - **Type**: `string` or `enum` (e.g., 'none', 'add', 'intersect') - **Description**: Specifies how range selections interact or blend with other selection types. #### `rowSelect` - **Type**: `boolean` - **Description**: Controls whether multiple rows can be selected simultaneously. Users can select disjointed or contiguous rows. #### `rowSelectionBlending` - **Type**: `string` or `enum` (e.g., 'none', 'add', 'intersect') - **Description**: Defines how row selections interact or blend with other selection types. #### `spanRangeBehavior` - **Type**: `string` or `enum` (e.g., 'allowPartial', 'exact') - **Description**: Dictates whether the `gridSelection` can include partial spans or must adhere to exact spanning rules. ### Events #### `onGridSelectionChange` - **Description**: This event is emitted whenever the `gridSelection` state is modified, providing the new selection details. - **Payload**: `gridSelection` object #### `onSelectionCleared` - **Description**: Triggered when the current selection within the grid is explicitly cleared by user action or programmatic command. ``` -------------------------------- ### Data Grid Required Properties Source: https://docs.grid.glideapps.com/api/dataeditor Essential properties for initializing a functional data grid. These include defining the grid's columns, providing cell content, and specifying the total number of rows. ```javascript const gridProps = { columns: [/* ... column definitions ... */], getCellContent: (cell) => { /* ... return cell content ... */ }, rows: 100 // Example: 100 rows }; ``` -------------------------------- ### Define Custom Cell Renderers in DataEditorProps Source: https://docs.grid.glideapps.com/api/dataeditor/custom-cells The `customRenderers` prop in `DataEditorProps` allows you to provide an array of `CustomRenderer` objects to the `DataEditor`. Each renderer can define its own drawing logic and editing behavior for cells. Refer to the Glideapps documentation for detailed implementation guides. ```typescript interface DataEditorProps { // ...other props customRenderers?: readonly CustomRenderer[]; drawCell?: DrawCellCallback; drawHeader?: DrawHeaderCallback; // ...other props } ``` -------------------------------- ### markdownDivCreateNode Source: https://docs.grid.glideapps.com/api/dataeditor/important-props Custom function to create a DOM node for rendering Markdown, allowing for custom processing or security. ```APIDOC ## markdownDivCreateNode ### Description If `markdownDivCreateNode` is specified, then it will be used to render Markdown, instead of the default Markdown renderer used by the Grid. You'll want to use this if you need to process your Markdown for security purposes, or if you want to use a renderer with different Markdown features. ### Method N/A (Configuration Prop) ### Endpoint N/A ### Parameters #### Path Parameters N/A #### Query Parameters N/A #### Request Body - **markdownDivCreateNode** (function) - Optional - A function that takes markdown content and returns a DocumentFragment. ``` -------------------------------- ### Handle Column Resize Events (TypeScript) Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction Provides callbacks for column resizing interactions. `onColumnResize` is called during resizing, `onColumnResizeStart` when resizing begins, and `onColumnResizeEnd` when it concludes, all providing column details and the new size. ```typescript onColumnResize?: (column: GridColumn, newSize: number, columnIndex: number) => void; onColumnResizeEnd?: (column: GridColumn, newSize: number, columnIndex: number) => void; onColumnResizeStart?: (column: GridColumn, newSize: number, columnIndex: number) => void; ``` -------------------------------- ### Input Interaction Events Source: https://docs.grid.glideapps.com/api/dataeditor Listen to and handle various user interaction events within the grid, such as cell activations, clicks, and column manipulations. ```APIDOC ## Input Interaction Events ### Description Listen to and handle various user interaction events within the grid, such as cell activations, clicks, and column manipulations. ### Method Event Listeners (configured through Glide Apps interface) ### Endpoint N/A (Event-driven) ### Event Handlers - **onCellActivated**: Emitted when a cell is activated (Enter, Space, double click). - **onCellClicked**: Emitted when a cell is clicked. - **onCellContextMenu**: Emitted when a cell context menu is triggered (e.g., right-click). - **onColumnMoved**: Emitted when a column is dragged to a new location. - **onColumnProposeMove**: Called when a column is proposed to be moved. Return `false` to prevent. - **onColumnResize**: Emitted when a column is resized. - **onColumnResizeEnd**: Emitted when a column resize operation ends. - **onColumnResizeStart**: Emitted when a column resize operation begins. - **onGroupHeaderClicked**: Emitted when a group header is clicked. - **onGroupHeaderContextMenu**: Emitted when a group header context menu is triggered. - **onHeaderClicked**: Emitted when a column header is clicked. - **onHeaderContextMenu**: Emitted when a column header context menu is triggered. - **onHeaderMenuClick**: Emitted when the menu dropdown on a column header is clicked. - **onItemHovered**: Emitted when the hovered item changes. - **onKeyDown**: Emitted when a key is pressed. ### Event Example (Conceptual) ```javascript // Example for onCellClicked event grid.onCellClicked((cellData) => { console.log('Cell clicked:', cellData); }); // Example for onColumnResizeEnd event grid.onColumnResizeEnd((columnInfo) => { console.log('Column resized to:', columnInfo); }); ``` ### Response N/A (Events trigger callbacks) ``` -------------------------------- ### provideEditor Source: https://docs.grid.glideapps.com/api/dataeditor/important-props Callback function to provide custom cell editors for the data grid. ```APIDOC ## provideEditor ### Description When provided the `provideEditor` callbacks job is to be a constructor for functional components which have the correct properties to be used by the data grid as an editor. The editor must implement `onChange` and `onFinishedEditing` callbacks as well support the `isHighlighted` flag which tells the editor to begin with any editable text pre-selected so typing will immediately begin to overwrite it. ### Method N/A (Configuration Prop) ### Endpoint N/A ### Parameters #### Path Parameters N/A #### Query Parameters N/A #### Request Body - **provideEditor** (function) - Optional - Callback to provide custom cell editor components. ``` -------------------------------- ### Styling API Source: https://docs.grid.glideapps.com/api/dataeditor This section covers the API endpoints for customizing the visual styling of the grid, including group headers, row themes, header heights, and borders. ```APIDOC ## Styling Configuration ### Description This API provides options to customize the styling of the grid, including group header details, row theme overrides, header and group header heights, additional header icons, overscrolling behavior, and border settings. ### Method GET/POST (or relevant methods for configuration) ### Endpoint /websites/grid_glideapps_api/styling ### Parameters #### Query Parameters - **getGroupDetails** (function) - Optional - Callback to provide additional details for group headers such as icons. - **getRowThemeOverride** (function) - Optional - Callback to provide theme override for any row. - **groupHeaderHeight** (integer) - Optional - The height in pixels of the column group headers. - **headerHeight** (integer) - Optional - The height in pixels of the column headers. - **headerIcons** (array) - Optional - Additional header icons for use by `GridColumn`. - **overscrollX** (integer) - Optional - Allows overscrolling the data grid horizontally by a set amount. - **overscrollY** (integer) - Optional - Allows overscrolling the data grid vertically by a set amount. - **rightElement** (node) - Optional - A node which will be placed at the right edge of the data grid. - **rightElementProps** (object) - Optional - Changes how the right element renders. - **scaleToRem** (boolean) - Optional - Scales most elements in the theme to match rem scaling automatically. - **verticalBorder** (boolean) - Optional - Enable/disable vertical borders for any `GridColumn`. ### Request Example ```json { "groupHeaderHeight": 40, "headerHeight": 60, "overscrollX": 20, "overscrollY": 20, "verticalBorder": true } ``` ### Response #### Success Response (200) - **status** (string) - Indicates the success of the operation. - **message** (string) - A confirmation message. #### Response Example ```json { "status": "success", "message": "Styling configured successfully." } ``` ``` -------------------------------- ### DataEditorRef - Focus Grid Source: https://docs.grid.glideapps.com/api/index Focuses the data grid, making it the active element for user interaction. ```APIDOC ## POST /websites/grid_glideapps_api/dataeditorref/focus ### Description Focuses the data grid. ### Method POST ### Endpoint /websites/grid_glideapps_api/dataeditorref/focus ### Request Example ```json {} ``` ### Response #### Success Response (200) - **message** (string) - A confirmation message. #### Response Example ```json { "message": "Grid focused successfully." } ``` ``` -------------------------------- ### Handle Header Context Menu Event (TypeScript) Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction Callback for when a column header's context menu should be displayed, usually on a right-click. It includes the column index and event arguments. ```typescript onHeaderContextMenu?: (colIndex: number, event: HeaderClickedEventArgs) => void; ``` -------------------------------- ### Data Grid Important Properties Source: https://docs.grid.glideapps.com/api/dataeditor Configuration options for enhancing data grid functionality, such as fixed column shadows, freeze rows/columns, and custom Markdown rendering. ```javascript const gridProps = { // ... other props fixedShadowX: true, freezeColumns: 2, freezeTrailingRows: 5, markdownDivCreateNode: (text) => { /* ... custom markdown node creation ... */ }, rowHeight: (row) => 50 // Example: row height of 50 pixels }; ``` -------------------------------- ### Data Editor Input Interaction Properties Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction This section details the properties and event handlers related to user input and interaction within the Grid GlideApps data editor. ```APIDOC ## Data Editor Input Interaction ### Description Provides properties and event handlers for customizing and responding to user interactions within the Grid GlideApps data editor, such as keyboard shortcuts, column resizing, row movement, and cell activation. ### Method N/A (Configuration of a component) ### Endpoint N/A (Component Properties) ### Parameters #### Component Properties - **keybindings** (Partial) - Optional - Allows customization of keyboard shortcuts. - **maxColumnAutoWidth** (number) - Optional - Sets the maximum auto-width for columns. - **maxColumnWidth** (number) - Optional - Sets the maximum width for columns. - **minColumnWidth** (number) - Optional - Sets the minimum width for columns. - **preventDiagonalScrolling** (boolean) - Optional - Prevents diagonal scrolling. - **rowSelectionMode** ('auto' | 'multi') - Optional - Defines the mode for row selection. #### Event Handlers - **onCellActivated** ((cell) => void) - Optional - Callback when a cell is activated. - **onCellClicked** ((cell, event) => void) - Optional - Callback when a cell is clicked. - **onCellContextMenu** ((cell, event) => void) - Optional - Callback when a cell context menu is triggered. - **onColumnMoved** ((startIndex, endIndex) => void) - Optional - Callback when a column is moved. - **onColumnResize** ((column, newSize, colIndex, newSizeWithGrow) => void) - Optional - Callback during column resizing. - **onColumnResizeEnd** ((column, newSize, colIndex, newSizeWithGrow) => void) - Optional - Callback when column resizing ends. - **onColumnResizeStart** ((column, newSize, colIndex, newSizeWithGrow) => void) - Optional - Callback when column resizing starts. - **onGroupHeaderClicked** ((colIndex, event) => void) - Optional - Callback when a group header is clicked. - **onGroupHeaderContextMenu** ((colIndex, event) => void) - Optional - Callback when a group header context menu is triggered. - **onGroupHeaderRenamed** ((groupName, newVal) => void) - Optional - Callback when a group header is renamed. - **onHeaderClicked** ((colIndex, event) => void) - Optional - Callback when a header is clicked. - **onHeaderContextMenu** ((colIndex, event) => void) - Optional - Callback when a header context menu is triggered. - **onHeaderMenuClick** ((col, screenPosition) => void) - Optional - Callback when a header menu item is clicked. - **onItemHovered** ((args) => void) - Optional - Callback when an item is hovered. - **onKeyDown** ((event) => void) - Optional - Callback when a key is pressed. - **onKeyUp** ((event) => void) - Optional - Callback when a key is released. - **onMouseMove** ((args) => void) - Optional - Callback during mouse movement. - **onRowMoved** ((startIndex, endIndex) => void) - Optional - Callback when a row is moved. ### Request Example ```typescript console.log('Cell clicked:', cell, event)} onColumnResizeEnd={(column, newSize) => console.log('Column resized to:', newSize)} onKeyDown={handleKeyDown} /> ``` ### Response #### Success Response (200) N/A (Component properties do not have a direct response in this context. Interactions trigger event handlers.) #### Response Example N/A ``` -------------------------------- ### Configure Row Selection Mode (TypeScript) Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction Determines the behavior of row selection. 'auto' mode adapts to the input environment (touch/mouse), while 'multi' mode always enables multi-selection similar to holding the Ctrl key. ```typescript rowSelectionMode?: "auto" | "multi"; ``` -------------------------------- ### TypeScript Keybindings Interface Definition Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction Defines the structure for keybinding configurations in the Grid GlideApps API. It includes various categories like legacy flags, non-rebindable actions, fill operations, navigation, and selection, specifying whether each keybinding is a boolean or a string type. ```typescript keybindings?: Partial<{ // Legacy deprecated flags readonly pageUp: boolean; readonly pageDown: boolean; readonly first: boolean; readonly last: boolean; // Non-rebindable readonly copy: boolean; readonly cut: boolean; readonly paste: boolean; readonly downFill: boolean | string; readonly rightFill: boolean | string; readonly clear: boolean | string; readonly closeOverlay: boolean | string; readonly acceptOverlayDown: boolean | string; readonly acceptOverlayUp: boolean | string; readonly acceptOverlayLeft: boolean | string; readonly acceptOverlayRight: boolean | string; readonly search: boolean | string; readonly delete: boolean | string; readonly activateCell: boolean | string; readonly scrollToSelectedCell: boolean | string; // Navigation readonly goToFirstColumn: boolean | string; readonly goToLastColumn: boolean | string; readonly goToFirstCell: boolean | string; readonly goToLastCell: boolean | string; readonly goToFirstRow: boolean | string; readonly goToLastRow: boolean | string; readonly goToNextPage: boolean | string; readonly goToPreviousPage: boolean | string; readonly goUpCell: boolean | string; readonly goDownCell: boolean | string; readonly goLeftCell: boolean | string; readonly goRightCell: boolean | string; readonly goUpCellRetainSelection: boolean | string; readonly goDownCellRetainSelection: boolean | string; readonly goLeftCellRetainSelection: boolean | string; readonly goRightCellRetainSelection: boolean | string; // Selectiona readonly selectToFirstColumn: boolean | string; readonly selectToLastColumn: boolean | string; readonly selectToFirstCell: boolean | string; readonly selectToLastCell: boolean | string; readonly selectToFirstRow: boolean | string; readonly selectToLastRow: boolean | string; readonly selectGrowUp: boolean | string; readonly selectGrowDown: boolean | string; readonly selectGrowLeft: boolean | string; readonly selectGrowRight: boolean | string; readonly selectAll: boolean | string; readonly selectRow: boolean | string; readonly selectColumn: boolean | string; }>; ``` -------------------------------- ### Enable REM-Based Scaling for Grid Elements Source: https://docs.grid.glideapps.com/api/dataeditor/styling The `scaleToRem` boolean property enables automatic scaling of grid elements (fonts, paddings, etc.) based on the root element's REM unit. When true, it ensures the grid's appearance aligns with the application's overall scaling and responsive design. Defaults to false. ```typescript interface DataEditorProps { // ...other props scaleToRem?: boolean; // ...other props } ``` -------------------------------- ### DataEditorRef - Remeasure Columns Source: https://docs.grid.glideapps.com/api/index Triggers a recomputation of the natural sizes for specified columns in the selection, emitting a resize event afterward. ```APIDOC ## POST /websites/grid_glideapps_api/dataeditorref/remeasureColumns ### Description Causes the columns in the selection to have their natural sizes recomputed and re-emitted as a resize event. ### Method POST ### Endpoint /websites/grid_glideapps_api/dataeditorref/remeasureColumns ### Parameters #### Query Parameters - **columnIndexes** (array) - Optional - An array of column indexes to remeasure. If not provided, all columns are considered. ### Request Example ```json { "columnIndexes": [1, 3] } ``` ### Response #### Success Response (200) - **status** (string) - Indicates the status of the remeasure operation. #### Response Example ```json { "status": "columns remeasured" } ``` ``` -------------------------------- ### Handle Group Header Context Menu Event (TypeScript) Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction Callback for when a group header's context menu should be displayed, typically on a right-click. It receives the column index and event arguments. ```typescript onGroupHeaderContextMenu?: (colIndex: number, event: GroupHeaderClickedEventArgs) => void ``` -------------------------------- ### UriCell Component Source: https://docs.grid.glideapps.com/api/cells/uricell Details on the UriCell interface and its properties for rendering URIs. ```APIDOC ## UriCell ### Description Renders URIs (usually URLs) with optional direct interaction. ### Method N/A (This is a component definition, not an API endpoint) ### Endpoint N/A ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example None ### Response #### Success Response (200) Represents the structure of a UriCell: - **kind** (GridCellKind.Uri) - The type of the grid cell, specifically for URIs. - **data** (string) - The URI itself. - **displayData** (string, optional) - A formatted version of the URI as a string. - **readonly** (boolean, optional) - Determines if the cell will accept edit events. Defaults to false. - **onClickUri** ((args: BaseGridMouseEventArgs & { readonly preventDefault: () => void }) => void, optional) - A callback function that is invoked when the URI cell text is clicked. Can be used to open a URL. - **hoverEffect** (boolean, optional) - If set to true, the URI will be underlined when hovered and receive a pointer cursor. Defaults to false. #### Response Example ```json { "kind": "Uri", "data": "https://www.example.com", "displayData": "Example Website", "readonly": false, "hoverEffect": true, "onClickUri": "(args) => { console.log('URI clicked:', args.data); }" } ``` ``` -------------------------------- ### Handle Header Menu Click Event (TypeScript) Source: https://docs.grid.glideapps.com/api/dataeditor/input-interaction Callback executed when the menu button on a column header is clicked. It provides the column index and the screen position of the header, requiring custom menu implementation. ```typescript onHeaderMenuClick?: (col: number, screenPosition: Rectangle) => void; ``` -------------------------------- ### Search Functionality Source: https://docs.grid.glideapps.com/api/dataeditor Handles search operations within the data grid, including input changes, search result updates, and search interface visibility. ```APIDOC ## Search Functionality ### Description Handles search operations within the data grid, including input changes, search result updates, and search interface visibility. ### Method N/A (Configuration/Event Handlers) ### Endpoint N/A ### Parameters #### Path Parameters N/A #### Query Parameters N/A #### Request Body - **searchValue** (string) - Optional - Sets the search value for the search box. - **searchResults** (array) - Optional - Overrides the search results and highlights all items. - **showSearch** (boolean) - Optional - Show/hide the search interface. - **onSearchClose** (function) - Optional - Emitted when the search interface close button is clicked. - **onSearchResultsChanged** (function) - Optional - Emitted when the search results change. - **onSearchValueChange** (function) - Optional - Emitted when the user types a new value into the search box. ### Request Example ```json { "searchValue": "example search term", "showSearch": true } ``` ### Response #### Success Response (200) N/A (This represents configuration and event handlers, not an API endpoint response) #### Response Example N/A ``` -------------------------------- ### Define LoadingCell Interface (TypeScript) Source: https://docs.grid.glideapps.com/api/cells/loadingcell Defines the TypeScript interface for the LoadingCell, extending BaseGridCell. This interface specifies the properties for rendering loading content, including optional skeleton dimensions and variability. It requires the 'kind' property to be set to GridCellKind.Loading. ```typescript export interface LoadingCell extends BaseGridCell { readonly kind: GridCellKind.Loading; readonly skeletonWidth?: number; readonly skeletonHeight?: number; readonly skeletonWidthVariability?: number; } ``` -------------------------------- ### Data Grid Search Properties Source: https://docs.grid.glideapps.com/api/dataeditor Props related to the search functionality within the data grid, including controlling search visibility, setting search values, and handling search result changes. ```javascript const gridProps = { // ... other props searchValue: "example", showSearch: true, onSearchClose: () => { console.log('Search closed'); }, onSearchResultsChanged: (results) => { console.log('Search results changed:', results); } }; ``` -------------------------------- ### Custom Markdown Rendering Source: https://docs.grid.glideapps.com/api/dataeditor/important-props Provides a callback function to render Markdown content. This allows for custom processing, security checks, or integration with specific Markdown features. ```typescript markdownDivCreateNode?: (content: string) => DocumentFragment; ``` -------------------------------- ### getGroupDetails Source: https://docs.grid.glideapps.com/api/dataeditor/styling Callback function invoked when a group header is rendered. Allows customization of group name, icon, theme, and actions. ```APIDOC ## GET /groupDetails ### Description Callback function invoked when a group header is rendered. Allows customization of group name, icon, theme, and actions. ### Method GET ### Endpoint /groupDetails ### Parameters #### Query Parameters - **groupName** (string) - Required - The name of the group to retrieve details for. ### Response #### Success Response (200) - **name** (string) - The name of the group. - **icon** (string) - Optional - The icon to display for the group. - **overrideTheme** (object) - Optional - A partial theme object to override the group's theme. - **actions** (array) - Optional - A list of actions that can be activated by the user. - **title** (string) - The title of the action. - **onClick** (function) - The function to call when the action is clicked. - **icon** (string) - The icon for the action. ### Response Example { "name": "Group A", "icon": "star", "overrideTheme": { "primaryColor": "#f00" }, "actions": [ { "title": "Edit", "onClick": "() => console.log('Edit clicked')", "icon": "edit" } ] } ``` -------------------------------- ### Right Element Configuration Source: https://docs.grid.glideapps.com/api/dataeditor/styling Configure a DOM node to be displayed at the end of the horizontal scroll region, with options for stickiness and filling available space. ```APIDOC ## Right Element Configuration ### Description Configure a DOM node to be displayed at the end of the horizontal scroll region, with options for stickiness and filling available space. ### Method POST ### Endpoint /rightElement ### Parameters #### Request Body - **rightElement** (ReactNode) - Optional - The DOM node to display. - **rightElementProps** (object) - Optional - Properties for the right element. - **sticky** (boolean) - Optional - If true, the element will always be visible. - **fill** (boolean) - Optional - If true, the element's container will fill remaining space. ### Request Example ```json { "rightElement": "

My Custom Element

", "rightElementProps": { "sticky": true, "fill": false } } ``` ### Response #### Success Response (200) - **message** (string) - A confirmation message indicating the right element has been configured. ### Response Example { "message": "Right element configured successfully." } ```