Merge pull request #493 from facultyai/update-faq

Update dash-table faqs

Author: tcbegley

docs/content/docs/faq.md

@@ -6,27 +6,6 @@ title: FAQ
 
 This page contains various tips and tricks and answers to frequently asked questions about _dash-bootstrap-components_. If you think something is missing, please submit an [issue][issue] on the GitHub issue tracker.
 
-### Using Bootstrap and `dash_table.DataTable` together
-
-Bootstrap CSS defines a CSS class called `row`, which is a key part of the Bootstrap grid system. The `DataTable` component applies the `row` class to rows in the table, which causes a clash and breaks some of the formatting of the table. In particular the table can overflow its container, and dropdowns aren't rendered correctly.
-
-The solution is to prevent the Bootstrap row styles from being applied to rows in the table. There are two ways to do this. The first way, which is maybe more convenient if you just have a single table, is to pass additional arguments to the `css` prop of `DataTable` like this
-
-```python
-DataTable(..., css=[{"selector": ".row", "rule": "margin: 0; display: block"}])
-```
-
-Alternatively, you can write the following custom CSS to apply the styles to all tables in your app.
-
-```css
-.dash-table-container .row {
-  display: block;
-  margin: 0;
-}
-```
-
-See the [Dash docs](https://dash.plotly.com/external-resources) for details on linking custom stylesheets.
-
 ### How do I use `Tooltip` or `Popover` with pattern-matching callbacks?
 
 Dash 1.11.0 added support for [pattern matching callbacks](https://dash.plotly.com/pattern-matching-callbacks) which allows you to write callbacks that can update an arbitrary or dynamic number of Dash components. To enable this, the `id` of a Dash component can now be a Python dictionary, and the callback is triggered based on a matching rule with one or more of the keys in this dictionary.
@@ -112,4 +91,33 @@ Bootstrap sets the `max-width` of the popover in the `.popover` CSS class. You c
 
 See the [Dash docs](https://dash.plotly.com/external-resources) for details on linking custom stylesheets.
 
+### Using Bootstrap and `dash_table.DataTable` together
+
+This is a historical problem that was fixed in Dash 1.18.1. If you are able to, the easiest fix to compatibility issues with `dash_table.DataTable` and _dash-bootstrap-components_ is to simply update Dash
+
+```
+pip install -U dash
+```
+
+If you have an older version of Dash and are unable to update, then read on for a workaround.
+
+Bootstrap CSS defines a CSS class called `row`, which is a key part of the Bootstrap grid system. The `DataTable` component applies the `row` class to rows in the table, which causes a clash and breaks some of the formatting of the table. In particular the table can overflow its container, and dropdowns aren't rendered correctly.
+
+The solution is to prevent the Bootstrap row styles from being applied to rows in the table. There are two ways to do this. The first way, which is maybe more convenient if you just have a single table, is to pass additional arguments to the `css` prop of `DataTable` like this
+
+```python
+DataTable(..., css=[{"selector": ".row", "rule": "margin: 0; display: block"}])
+```
+
+Alternatively, you can write the following custom CSS to apply the styles to all tables in your app.
+
+```css
+.dash-table-container .row {
+  display: block;
+  margin: 0;
+}
+```
+
+See the [Dash docs](https://dash.plotly.com/external-resources) for details on linking custom stylesheets.
+
 [issue]: https://github.com/facultyai/dash-bootstrap-components/issues/new?template=feature.md