Remove toggle format from enterprise docs - show code below examples (#1514)

- Changed all instances of ```python demo exec toggle to ```python demo exec
- Affects 20 enterprise documentation files across AG Grid, Mantine components, drag-and-drop, and maps
- Code examples now appear below rendered components instead of in toggle tabs
- Improves documentation UX by showing code and UI together

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Alek <[email protected]>
Co-authored-by: Carlos <[email protected]>

Author: 3 people

docs/enterprise/ag_chart.md

@@ -2,7 +2,7 @@
 
 AG Chart is a powerful charting library that provides interactive charts and data visualization components for enterprise applications.
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 
@@ -27,4 +27,4 @@ def basic_chart():
     )
 ```
 
-For more detailed documentation, see the [AG Chart Documentation](https://charts.ag-grid.com/).
+For more detailed documentation, see the [AG Chart Documentation](https://charts.ag-grid.com/).

docs/enterprise/ag_grid/aligned-grids.md

@@ -6,7 +6,7 @@ AgGrid provides a way to align multiple grids together. This is useful when you
 
 You can do so through the `aligned_grids` prop. This prop takes a list of grid IDs that you want to align. 
 
-```python demo exec toggle
+```python demo exec
 import pandas as pd
 
 import reflex_enterprise as rxe
@@ -58,4 +58,4 @@ def aligned_grids_page():
 
 ```md alert warning
 # The pivot functionality does not work with aligned grids. This is because pivoting data changes the columns, which would make the aligned grids incompatible, as they are no longer sharing the same set of columns.
-```
+```

docs/enterprise/ag_grid/index.md

@@ -21,7 +21,7 @@ A basic Reflex AG Grid contains column definitions `column_defs`, which define t
 
 Each grid also requires a unique `id`, which is needed to uniquely identify the Ag-Grid instance on the page. If you have multiple grids on the same page, each grid must have a unique `id` so that it can be correctly rendered and managed.
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 import pandas as pd
@@ -56,7 +56,7 @@ The format of the data passed to the `row_data` prop is a list of dictionaries.
 
 The previous example showed the `column_defs` written out in full. You can also extract the required information from the dataframe's column names:
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 import pandas as pd
@@ -78,7 +78,7 @@ def ag_grid_simple_2():
 
 In the above example, the first letter of the field names provided are capitalized when displaying the header name. You can customize the header names by providing a `header_name` key in the column definition. In this example, the `header_name` is customized for the second and third columns.
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 import pandas as pd
@@ -106,7 +106,7 @@ def ag_grid_simple_headers():
 
 Allow a user to filter a column by setting the `filter` key to `True` in the column definition. In this example we enable filtering for the first and last columns.
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 import pandas as pd
@@ -138,7 +138,7 @@ You can also set the filter type using the `filter` key. The following filter ty
 
 (`ag_grid.filters.set` and `ag_grid.filters.multi` are available with AG Grid Enterprise)
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 import pandas as pd
@@ -169,7 +169,7 @@ By default, the rows can be sorted by any column by clicking on the column heade
 
 In this example, we disable sorting for the first column.
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 import pandas as pd
@@ -197,7 +197,7 @@ def ag_grid_simple_row_sorting():
 
 Row Selection is enabled using the `row_selection` attribute. Setting it to `multiple` allows users to select multiple rows at a time. You can use the `checkbox_selection` column definition attribute to render checkboxes for selection.
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 import pandas as pd
@@ -283,7 +283,7 @@ def ag_grid_simple_editing():
 
 By default, the grid uses a vertical scroll. You can reduce the amount of scrolling required by adding pagination. To add pagination, set `pagination=True`. You can set the `pagination_page_size` to the number of rows per page and `pagination_page_size_selector` to a list of options for the user to select from.
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 import pandas as pd
@@ -529,7 +529,7 @@ The example below uses the `select_all()` and `deselect_all()` methods of the AG
 # Ensure that the docs are set to React tab in AG Grid
 ```
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 import pandas as pd
@@ -581,7 +581,7 @@ rx.button("Select all", on_click=rxe.ag_grid.api(id="ag_grid_basic_row_selection
 The following example lets a user [export the data as a csv](https://www.ag-grid.com/javascript-data-grid/grid-api/#reference-export-exportDataAsCsv) and [adjust the size of columns to fit the available horizontal space](https://www.ag-grid.com/javascript-data-grid/grid-api/#reference-columnSizing-sizeColumnsToFit). (Try resizing the screen and then clicking the resize columns button)
 
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 import pandas as pd
@@ -661,6 +661,6 @@ def ag_grid_api_argument():
 
 The react code for the `get_data_as_csv` method of the AG Grid API is `getDataAsCsv = (params?: CsvExportParams) => string  |  undefined;`. Here the function returns a `string` (or undefined). 
 
-In Reflex to handle this returned value it is necessary to pass a `callback` as an argument to the `get_data_as_csv` method that will get the returned value. In this example the `handle_get_data` event handler is passed as the callback. This event handler will be called with the returned value from the `get_data_as_csv` method. 
+In Reflex to handle this returned value it is necessary to pass a `callback` as an argument to the `get_data_as_csv` method that will get the returned value. In this example the `handle_get_data` event handler is passed as the callback. This event handler will be called with the returned value from the `get_data_as_csv` method.  
 
 

docs/enterprise/ag_grid/pivot-mode.md

@@ -14,7 +14,7 @@ You can also define how rows are aggregated by passing the `agg_func` property i
 
 You can find a live example here: [Pivot Mode Example](https://aggrid.reflex.run/pivot).
 
-```python demo exec toggle
+```python demo exec
 import pandas as pd
 import reflex as rx
 
@@ -54,7 +54,7 @@ def pivot_page():
 
 # Pivot using State
 
-```python demo exec toggle
+```python demo exec
 import pandas as pd
 import reflex as rx
 

docs/enterprise/ag_grid/value-transformers.md

@@ -22,7 +22,7 @@ TOC:
 
 If you have two columns `col_a` and `col_b` and you want to display the sum of these two columns in a third column `sum`, you can define the `value_getter` of `sum` as follows:
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 import pandas as pd
@@ -52,7 +52,7 @@ def ag_grid_value_getter():
 
 If you have a column `price` and you want to display the price with a currency symbol, you can define the `value_formatter` of `price` as follows:
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 import pandas as pd

docs/enterprise/drag-and-drop.md

@@ -22,7 +22,7 @@ Reflex Enterprise provides comprehensive drag and drop functionality for creatin
 
 Here's a basic example showing how to create a draggable item and drop target:
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 
@@ -77,7 +77,7 @@ def basic_drag_drop():
 
 Create a draggable item that can be moved between multiple drop targets:
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 
@@ -145,7 +145,7 @@ def multi_position_example():
 
 Access drag and drop state information using collected parameters:
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 
@@ -204,7 +204,7 @@ def state_tracking_example():
 
 Create dynamic draggable lists using `rx.foreach`:
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 

docs/enterprise/mantine/autocomplete.md

@@ -6,7 +6,7 @@ title: Autocomplete
 
 `rxe.mantine.autocomplete` is a component for providing suggestions as the user types. It is useful for enhancing user experience by offering relevant options based on input.
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 
@@ -19,4 +19,4 @@ def autocomplete_example():
             description="Select a fruit from the list",
         ),
     )
-```
+```

docs/enterprise/mantine/collapse.md

@@ -6,7 +6,7 @@ title: Collapse
 
 `rxe.mantine.collapse` is a component that allows you to create collapsible sections in your application. It is useful for hiding or showing content based on user interaction, such as clicking a button or a link.
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 
@@ -33,4 +33,4 @@ def collapse_example():
             on_click=lambda: CollapseState.toggle_collapse,
         ),
     )
-```
+```

docs/enterprise/mantine/json-input.md

@@ -8,7 +8,7 @@ title: JSON Input
 
 ## Example
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 
@@ -28,4 +28,4 @@ def json_input_example():
         on_change=lambda value: JsonInputState.setvar("json_data", value),
         width="300px",
     )
-```
+```

docs/enterprise/mantine/loading-overlay.md

@@ -5,7 +5,7 @@ title: Loading Overlay
 # Loading Overlay component
 `rxe.mantine.loading_overlay` is a component that displays a loading overlay on top of its children. It is useful for indicating that a process is ongoing and prevents user interaction with the underlying content.
 
-```python demo exec toggle
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 
@@ -29,4 +29,4 @@ def loading_overlay_example():
             z_index=1000,
         ),
     ),rx.button("Toggle Loading", on_click=LoadingOverlayState.toggle_loading),
-```
+```