Fix width of table columns and fix some mistakes in Storybook (Netlify) (#1206)

* Allow wrapping of inline code in table cells and fix line-height

* Fix mistakes and column width of tables

* Fix typo for onChangePage and onChangeRowsPerPage

* Remove generated class name, use !important

The !important keyword is necessary because the generated class name that applies overriding styles has a higher specificity than the element tag selector.

Author: ADTC

.storybook/base.css

@@ -7,3 +7,8 @@ body {
 table {
     width: 100%;
 }
+
+code {
+    line-height: unset !important;
+    white-space: normal !important;
+}

stories/columns.stories.mdx

@@ -35,11 +35,11 @@ import { Meta } from '@storybook/addon-docs';
 
 When the breakpoint is reached the column will be hidden. These are the built-in media breakpoint presets when hiding columns:
 
-| Value | Breakpoint | Description               |
-| ----- | ---------- | ------------------------- |
-| sm    | 599px      | small (phones)            |
-| md    | 959px      | medium(landscape tablets) |
-| lg    | 1280px     | large(laptops/desktops)   |
+| Value | Breakpoint | Description                |
+| ----- | ---------- | -------------------------- |
+| `sm`  | `599px`    | small (phones)             |
+| `md`  | `959px`    | medium (landscape tablets) |
+| `lg`  | `1280px`   | large (laptops/desktops)   |
 
 # Columns Example
 

stories/conditionalFormatting.stories.mdx

@@ -8,7 +8,7 @@ import { Meta } from '@storybook/addon-docs';
 | ---------- | ---------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | when       | function: `row => row.<yourfield>` | yes      | `when` accepts a callback that gives you access to your data. The `when` callback must return a boolean to determine if the style will be applied. <br />e.g. `row => row.status === 'completed'` will apply the style when the `row.status` field is `completed` |
 | style      | `object` or `(row) => object`      | no       | Accepts a css-in-js [style object](https://www.styled-components.com/docs/advanced#style-objects). Alternativly, you can also specify callback that has access to the row props. e.g. `(row) => ({ backgroundColor: row.isSpecial ? 'pink' : inherit })`          |
-| classNames | `string[]`                         | no       | In some cases you may want to apply conditional classNames. Accepts an array of classes: e.g. ['class1', 'class2'].                                                                                                                                               |
+| classNames | `string[]`                         | no       | In some cases you may want to apply conditional classNames. Accepts an array of classes: e.g. `['class1', 'class2']`.                                                                                                                                             |
 
 A Conditional Style Object allows you to apply a specific `style` object based on you data:
 
@@ -46,7 +46,7 @@ RDT allows you to override styling based on your data. Currently, you can apply
 
 | Property             | Type  | Required | Default | Description                                                               |
 | -------------------- | ----- | -------- | ------- | ------------------------------------------------------------------------- |
-| conditionalRowStyles | array | no       | []      | Allows an array of [conditional style objects](#conditional-style-object) |
+| conditionalRowStyles | array | no       | `[]`    | Allows an array of [conditional style objects](#conditional-style-object) |
 
 ## Example `style` Object