Enable dash datatable

vizro-core/changelog.d/20231030_132538_maximilian_schulz_table_component_MS.md

@@ -0,0 +1,44 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+### Highlights ✨
+
+- Release of the Vizro Dash DataTable. Visit the [user guide on tables](https://vizro.readthedocs.io/en/stable/pages/user_guides/table/) to learn more. ([#114](https://github.com/mckinsey/vizro/pull/114))
+
+<!--
+### 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 ([#114](https://github.com/mckinsey/vizro/pull/114)) -->
+
+<!--
+### 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/components.md

@@ -1,89 +1,9 @@
-# How to use charts/components
+# How to use cards & buttons
 
-This guide shows you how to use charts/components to visualize your data in the dashboard.
+This guide shows you how to use cards and buttons to visualize and interact with your data in the dashboard.
 
 The [`Page`][vizro.models.Page] models accepts the `components` argument, where you can enter your visual content e.g.
-[`Graph`][vizro.models.Graph], [`Card`][vizro.models.Card] or [`Button`][vizro.models.Button].
-
-## Graph
-
-The [`Graph`][vizro.models.Graph] model is the most used component in many dashboards, allowing you to visualize data in a variety of ways.
-
-You can add a [`Graph`][vizro.models.Graph]
-to your dashboard by inserting the [`Graph`][vizro.models.Graph] model into the `components` argument of the
-[`Page`][vizro.models.Page] model. You will need to specify the `figure` argument, where you can enter any of the
-currently available charts of the open source library [`plotly.express`](https://plotly.com/python/plotly-express/).
-
-!!! note
-
-    Note that in order to use the [`plotly.express`](https://plotly.com/python/plotly-express/) chart in a Vizro dashboard, you need to import it as `import vizro.plotly.express as px`.
-    This leaves any of the [`plotly.express`](https://plotly.com/python/plotly-express/) functionality untouched, but allows _direct insertion_ into the [`Graph`][vizro.models.Graph] model _as is_.
-
-!!! example "Graph"
-    === "app.py"
-        ```py
-        import vizro.models as vm
-        import vizro.plotly.express as px
-        from vizro import Vizro
-
-        df = px.data.iris()
-
-        page = vm.Page(
-            title="My first page",
-            components=[
-                vm.Graph(
-                    id="my_chart",
-                    figure=px.scatter_matrix(
-                        df, dimensions=["sepal_length", "sepal_width", "petal_length", "petal_width"], color="species"
-                    ),
-                ),
-            ],
-            controls=[vm.Filter(column="species", selector=vm.Dropdown(title="Species"))],
-        )
-
-        dashboard = vm.Dashboard(pages=[page])
-
-        Vizro().build(dashboard).run()
-        ```
-    === "app.yaml"
-        ```yaml
-        # Still requires a .py to register data connector in Data Manager and parse yaml configuration
-        # See from_yaml example
-        pages:
-        - components:
-          - figure:
-              _target_: scatter_matrix
-              color: species
-              data_frame: iris
-              dimensions: ["sepal_length", "sepal_width", "petal_length", "petal_width"]
-            id: my_chart
-            type: graph
-          controls:
-            - column: continent
-              type: filter
-            - selector:
-                title: Species
-                type: dropdown
-          title: My first page
-        ```
-    === "Result"
-        [![Graph]][Graph]
-
-    [Graph]: ../../assets/user_guides/components/graph1.png
-
-Note that in the above example we directly inserted the chart into the `figure` argument for the `.py` version. This is also the simplest way to connect your chart to a Pandas `DataFrame` - for other connections, please refer to [this guide](data.md). For the `yaml` version, we simply referred to the [`plotly.express`](https://plotly.com/python/plotly-express/) name by string.
-
-
-???+ info
-
-    When importing Vizro, we automatically set the `plotly` [default template](https://plotly.com/python/templates/#specifying-a-default-themes) to
-    a custom designed template. In case you would like to set the default back, simply run
-    ```py
-    import plotly.io as pio
-    pio.templates.default = "plotly"
-    ```
-    or enter your desired template into any `plotly.express` chart as `template="plotly"` on a case-by-case basis.
-    Note that we do not recommend the above steps for use in dashboards, as other templates will look out-of-sync with overall dashboard design.
+[`Graph`][vizro.models.Graph], [`Table`][vizro.models.Table], [`Card`][vizro.models.Card] or [`Button`][vizro.models.Button].
 
 ## Card
 

vizro-core/docs/pages/user_guides/graph.md

@@ -0,0 +1,89 @@
+# How to use graphs
+
+This guide shows you how to use graphs to visualize your data in the dashboard.
+
+The [`Page`][vizro.models.Page] models accepts the `components` argument, where you can enter your visual content e.g.
+[`Graph`][vizro.models.Graph], [`Table`][vizro.models.Table], [`Card`][vizro.models.Card] or [`Button`][vizro.models.Button].
+
+## Graph
+
+The [`Graph`][vizro.models.Graph] model is the most used component in many dashboards, allowing you to visualize data in a variety of ways.
+
+To add a [`Graph`][vizro.models.Graph] to your page, do the following:
+
+- insert the [`Graph`][vizro.models.Graph] model into the `components` argument of the
+[`Page`][vizro.models.Page] model
+- enter any of the currently available charts of the open source library [`plotly.express`](https://plotly.com/python/plotly-express/) into the `figure` argument
+
+!!! note
+
+    In order to use the [`plotly.express`](https://plotly.com/python/plotly-express/) chart in a Vizro dashboard, you need to import it as `import vizro.plotly.express as px`.
+    This leaves any of the [`plotly.express`](https://plotly.com/python/plotly-express/) functionality untouched, but allows _direct insertion_ into the [`Graph`][vizro.models.Graph] model _as is_.
+
+
+
+!!! example "Graph"
+    === "app.py"
+        ```py
+        import vizro.models as vm
+        import vizro.plotly.express as px
+        from vizro import Vizro
+
+        df = px.data.iris()
+
+        page = vm.Page(
+            title="My first page",
+            components=[
+                vm.Graph(
+                    id="my_chart",
+                    figure=px.scatter_matrix(
+                        df, dimensions=["sepal_length", "sepal_width", "petal_length", "petal_width"], color="species"
+                    ),
+                ),
+            ],
+            controls=[vm.Filter(column="species", selector=vm.Dropdown(title="Species"))],
+        )
+
+        dashboard = vm.Dashboard(pages=[page])
+
+        Vizro().build(dashboard).run()
+        ```
+    === "app.yaml"
+        ```yaml
+        # Still requires a .py to register data connector in Data Manager and parse yaml configuration
+        # See from_yaml example
+        pages:
+        - components:
+          - figure:
+              _target_: scatter_matrix
+              color: species
+              data_frame: iris
+              dimensions: ["sepal_length", "sepal_width", "petal_length", "petal_width"]
+            id: my_chart
+            type: graph
+          controls:
+            - column: species
+              type: filter
+              selector:
+                title: Species
+                type: dropdown
+          title: My first page
+        ```
+    === "Result"
+        [![Graph]][Graph]
+
+    [Graph]: ../../assets/user_guides/components/graph1.png
+
+Note that in the above example we directly inserted the chart into the `figure` argument for the `.py` version. This is also the simplest way to connect your chart to a Pandas `DataFrame` - for other connections, please refer to [this guide on data connections](data.md). For the `yaml` version, we simply referred to the [`plotly.express`](https://plotly.com/python/plotly-express/) name by string.
+
+
+??? info "Vizro automatically sets the plotly default template"
+
+    When importing Vizro, we automatically set the `plotly` [default template](https://plotly.com/python/templates/#specifying-a-default-themes) to
+    a custom designed template. In case you would like to set the default back, simply run
+    ```py
+    import plotly.io as pio
+    pio.templates.default = "plotly"
+    ```
+    or enter your desired template into any `plotly.express` chart as `template="plotly"` on a case-by-case basis.
+    Note that we do not recommend the above steps for use in dashboards, as other templates will look out-of-sync with overall dashboard design.