[Docs] Add documentation for the AgGrid (#324)

Signed-off-by: Jo Stichbury <[email protected]>
Signed-off-by: Maximilian Schulz <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Jo Stichbury <[email protected]>
Co-authored-by: Li Nguyen <[email protected]>
Co-authored-by: huong-li-nguyen <[email protected]>

CODEOWNERS

@@ -1 +1,3 @@
 *                @Joseph-Perkins @antonymilne @huong-li-nguyen @maxschulz-COL @Anna-Xiong
+vizro-ai/docs/ @stichbury
+vizro-core/docs/ @stichbury

vizro-core/changelog.d/20240301_124716_maximilian_schulz_aggrid_docs_2.md

@@ -0,0 +1,49 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+### Highlights ✨
+
+- Introduce `AgGrid` as a new `Page` component, allowing the usage of
+  [AG Grid](https://www.ag-grid.com/javascript-data-grid/scrolling-scenarios/) in
+  `Vizro`. See the [user guide on tables](https://vizro.readthedocs.io/en/stable/pages/user_guides/table/)
+  for more information. ([#289](https://github.com/mckinsey/vizro/pull/289),[#268](https://github.com/mckinsey/vizro/pull/268),[#324](https://github.com/mckinsey/vizro/pull/324))
+
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/docs/pages/user-guides/custom-tables.md

@@ -1,14 +1,16 @@
-# How to create custom tables
+# How to create custom Dash AG Grids and Dash DataTables
 
-If you want to use the [`Table`][vizro.models.Table] model to and to create a custom [table](table.md) you can create your own custom table, e.g. when requiring computations that can be controlled by parameters.
+In cases where the available arguments for the [`AgGrid`][vizro.models.AgGrid] or [`Table`][vizro.models.Table] models are not sufficient,
+you can create a custom Dash AG Grid or Dash DataTable.
 
-For this, similar to how one would create a [custom chart](../user-guides/custom-charts.md), simply do the following:
+One reason could be that you want to create a table/grid that requires computations that can be controlled by parameters (see the example below).
 
-- define a function that returns a  `dash_table.DataTable` object
-- decorate it with the `@capture("table")` decorator
-- the function must accept a `data_frame` argument (of type `pandas.DataFrame`)
-- the table should be derived from and require only one `pandas.DataFrame` (e.g. any further dataframes added through other arguments will not react to dashboard components such as `Filter`)
+For this, similar to how one would create a [custom chart](../user-guides/custom-charts.md), simply do the following:
 
+- Define a function that returns a `dash_ag_grid.AgGrid` or `dash_table.DataTable` object.
+- Decorate it with the `@capture("ag_grid")` or `@capture("table")` decorator respectively.
+- The function must accept a `data_frame` argument (of type `pandas.DataFrame`).
+- The table should be derived from and require only one `pandas.DataFrame` (e.g. any further dataframes added through other arguments will not react to dashboard components such as `Filter`).
 
 The following example shows a possible version of a custom table. In this case the argument `chosen_columns` was added, which you can control with a parameter: