diff --git a/components/dash-core-components/package.json b/components/dash-core-components/package.json
index e0649ba66c..5e862d5740 100644
--- a/components/dash-core-components/package.json
+++ b/components/dash-core-components/package.json
@@ -25,7 +25,7 @@
     "test:pyimport": "python -m unittest tests/test_dash_import.py",
     "prebuild:js": "cp node_modules/plotly.js/dist/plotly.min.js dash_core_components_base/plotly.min.js",
     "build:js": "webpack --mode production",
-    "build:backends": "dash-generate-components ./src/components dash_core_components -p package-info.json && cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json --r-prefix 'dcc' --r-suggests 'dash,dashHtmlComponents,jsonlite,plotly' --jl-prefix 'dcc' && black dash_core_components",
+    "build:backends": "dash-generate-components ./src/components dash_core_components -p package-info.json  && cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json -k RangeSlider,Slider,Dropdown,RadioItems,Checklist,DatePickerSingle,DatePickerRange,Input,Link --r-prefix 'dcc' --r-suggests 'dash,dashHtmlComponents,jsonlite,plotly' --jl-prefix 'dcc' && black dash_core_components",
     "build": "run-s prepublishOnly build:js build:backends",
     "postbuild": "es-check es5 dash_core_components/*.js",
     "build:watch": "watch 'npm run build' src",
diff --git a/components/dash-core-components/src/components/Checklist.react.js b/components/dash-core-components/src/components/Checklist.react.js
index fc9a207982..f86b1c6a4b 100644
--- a/components/dash-core-components/src/components/Checklist.react.js
+++ b/components/dash-core-components/src/components/Checklist.react.js
@@ -148,11 +148,11 @@ Checklist.propTypes = {
     ),
 
     /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
+     * Indicates whether labelStyle should be inline or not
+     * True: Automatically set { 'display': 'inline-block' } to labelStyle
+     * False: No additional styles are passed into labelStyle.
      */
-    id: PropTypes.string,
+    inline: PropTypes.bool,
 
     /**
      * The class of the container (div)
@@ -186,6 +186,13 @@ Checklist.propTypes = {
      */
     labelClassName: PropTypes.string,
 
+    /**
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
+     */
+    id: PropTypes.string,
+
     /**
      * Dash-assigned callback that gets fired when the value changes.
      */
@@ -237,13 +244,6 @@ Checklist.propTypes = {
      * session: window.sessionStorage, data is cleared once the browser quit.
      */
     persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
-
-    /**
-     * Indicates whether labelStyle should be inline or not
-     * True: Automatically set { 'display': 'inline-block' } to labelStyle
-     * False: No additional styles are passed into labelStyle.
-     */
-    inline: PropTypes.bool,
 };
 
 Checklist.defaultProps = {
diff --git a/components/dash-core-components/src/components/DatePickerRange.react.js b/components/dash-core-components/src/components/DatePickerRange.react.js
index 4d197653b7..e9bcdebd5b 100644
--- a/components/dash-core-components/src/components/DatePickerRange.react.js
+++ b/components/dash-core-components/src/components/DatePickerRange.react.js
@@ -27,13 +27,6 @@ export default class DatePickerRange extends Component {
 }
 
 DatePickerRange.propTypes = {
-    /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
-     */
-    id: PropTypes.string,
-
     /**
      * Specifies the starting date for the component.
      * Accepts datetime.datetime objects or strings
@@ -41,18 +34,6 @@ DatePickerRange.propTypes = {
      */
     start_date: PropTypes.string,
 
-    /**
-     * The HTML element ID of the start date input field.
-     * Not used by Dash, only by CSS.
-     */
-    start_date_id: PropTypes.string,
-
-    /**
-     * The HTML element ID of the end date input field.
-     * Not used by Dash, only by CSS.
-     */
-    end_date_id: PropTypes.string,
-
     /**
      * Specifies the ending date for the component.
      * Accepts datetime.datetime objects or strings
@@ -82,12 +63,20 @@ DatePickerRange.propTypes = {
     disabled_days: PropTypes.arrayOf(PropTypes.string),
 
     /**
-     * Specifies the month that is initially presented when the user
-     * opens the calendar. Accepts datetime.datetime objects or strings
-     * in the format 'YYYY-MM-DD'
-     *
+     * Specifies a minimum number of nights that must be selected between
+     * the startDate and the endDate
      */
-    initial_visible_month: PropTypes.string,
+    minimum_nights: PropTypes.number,
+
+    /**
+     * Determines when the component should update
+     * its value. If `bothdates`, then the DatePicker
+     * will only trigger its value when the user has
+     * finished picking both dates. If `singledate`, then
+     * the DatePicker will update its value
+     * as one date is picked.
+     */
+    updatemode: PropTypes.oneOf(['singledate', 'bothdates']),
 
     /**
      * Text that will be displayed in the first input
@@ -102,22 +91,19 @@ DatePickerRange.propTypes = {
     end_date_placeholder_text: PropTypes.string,
 
     /**
-     * Size of rendered calendar days, higher number
-     * means bigger day size and larger calendar overall
-     */
-    day_size: PropTypes.number,
-
-    /**
-     * Orientation of calendar, either vertical or horizontal.
-     * Valid options are 'vertical' or 'horizontal'.
+     * Specifies the month that is initially presented when the user
+     * opens the calendar. Accepts datetime.datetime objects or strings
+     * in the format 'YYYY-MM-DD'
+     *
      */
-    calendar_orientation: PropTypes.oneOf(['vertical', 'horizontal']),
+    initial_visible_month: PropTypes.string,
 
     /**
-     * Determines whether the calendar and days operate
-     * from left to right or from right to left
+     * Whether or not the dropdown is "clearable", that is, whether or
+     * not a small "x" appears on the right of the dropdown that removes
+     * the selected value.
      */
-    is_RTL: PropTypes.bool,
+    clearable: PropTypes.bool,
 
     /**
      * If True, the calendar will automatically open when cleared
@@ -125,22 +111,23 @@ DatePickerRange.propTypes = {
     reopen_calendar_on_clear: PropTypes.bool,
 
     /**
-     * Number of calendar months that are shown when calendar is opened
-     */
-    number_of_months_shown: PropTypes.number,
-
-    /**
-     * If True, calendar will open in a screen overlay portal,
-     * not supported on vertical calendar
+     * Specifies the format that the selected dates will be displayed
+     * valid formats are variations of "MM YY DD". For example:
+     * "MM YY DD" renders as '05 10 97' for May 10th 1997
+     * "MMMM, YY" renders as 'May, 1997' for May 10th 1997
+     * "M, D, YYYY" renders as '07, 10, 1997' for September 10th 1997
+     * "MMMM" renders as 'May' for May 10 1997
      */
-    with_portal: PropTypes.bool,
+    display_format: PropTypes.string,
 
     /**
-     * If True, calendar will open in a full screen overlay portal, will
-     * take precedent over 'withPortal' if both are set to true,
-     * not supported on vertical calendar
+     * Specifies the format that the month will be displayed in the calendar,
+     * valid formats are variations of "MM YY". For example:
+     * "MM YY" renders as '05 97' for May 1997
+     * "MMMM, YYYY" renders as 'May, 1997' for May 1997
+     * "MMM, YY" renders as 'Sep, 97' for September 1997
      */
-    with_full_screen_portal: PropTypes.bool,
+    month_format: PropTypes.string,
 
     /**
      * Specifies what day is the first day of the week, values must be
@@ -149,10 +136,10 @@ DatePickerRange.propTypes = {
     first_day_of_week: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
 
     /**
-     * Specifies a minimum number of nights that must be selected between
-     * the startDate and the endDate
+     * If True the calendar will display days that rollover into
+     * the next month
      */
-    minimum_nights: PropTypes.number,
+    show_outside_days: PropTypes.bool,
 
     /**
      * If True the calendar will not close when the user has selected a value
@@ -161,29 +148,40 @@ DatePickerRange.propTypes = {
     stay_open_on_select: PropTypes.bool,
 
     /**
-     * If True the calendar will display days that rollover into
-     * the next month
+     * Orientation of calendar, either vertical or horizontal.
+     * Valid options are 'vertical' or 'horizontal'.
      */
-    show_outside_days: PropTypes.bool,
+    calendar_orientation: PropTypes.oneOf(['vertical', 'horizontal']),
 
     /**
-     * Specifies the format that the month will be displayed in the calendar,
-     * valid formats are variations of "MM YY". For example:
-     * "MM YY" renders as '05 97' for May 1997
-     * "MMMM, YYYY" renders as 'May, 1997' for May 1997
-     * "MMM, YY" renders as 'Sep, 97' for September 1997
+     * Number of calendar months that are shown when calendar is opened
      */
-    month_format: PropTypes.string,
+    number_of_months_shown: PropTypes.number,
 
     /**
-     * Specifies the format that the selected dates will be displayed
-     * valid formats are variations of "MM YY DD". For example:
-     * "MM YY DD" renders as '05 10 97' for May 10th 1997
-     * "MMMM, YY" renders as 'May, 1997' for May 10th 1997
-     * "M, D, YYYY" renders as '07, 10, 1997' for September 10th 1997
-     * "MMMM" renders as 'May' for May 10 1997
+     * If True, calendar will open in a screen overlay portal,
+     * not supported on vertical calendar
      */
-    display_format: PropTypes.string,
+    with_portal: PropTypes.bool,
+
+    /**
+     * If True, calendar will open in a full screen overlay portal, will
+     * take precedent over 'withPortal' if both are set to true,
+     * not supported on vertical calendar
+     */
+    with_full_screen_portal: PropTypes.bool,
+
+    /**
+     * Size of rendered calendar days, higher number
+     * means bigger day size and larger calendar overall
+     */
+    day_size: PropTypes.number,
+
+    /**
+     * Determines whether the calendar and days operate
+     * from left to right or from right to left
+     */
+    is_RTL: PropTypes.bool,
 
     /**
      * If True, no dates can be selected.
@@ -191,16 +189,16 @@ DatePickerRange.propTypes = {
     disabled: PropTypes.bool,
 
     /**
-     * Whether or not the dropdown is "clearable", that is, whether or
-     * not a small "x" appears on the right of the dropdown that removes
-     * the selected value.
+     * The HTML element ID of the start date input field.
+     * Not used by Dash, only by CSS.
      */
-    clearable: PropTypes.bool,
+    start_date_id: PropTypes.string,
 
     /**
-     * Dash-assigned callback that gets fired when the value changes.
+     * The HTML element ID of the end date input field.
+     * Not used by Dash, only by CSS.
      */
-    setProps: PropTypes.func,
+    end_date_id: PropTypes.string,
 
     /**
      * CSS styles appended to wrapper div
@@ -213,14 +211,16 @@ DatePickerRange.propTypes = {
     className: PropTypes.string,
 
     /**
-     * Determines when the component should update
-     * its value. If `bothdates`, then the DatePicker
-     * will only trigger its value when the user has
-     * finished picking both dates. If `singledate`, then
-     * the DatePicker will update its value
-     * as one date is picked.
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
      */
-    updatemode: PropTypes.oneOf(['singledate', 'bothdates']),
+    id: PropTypes.string,
+
+    /**
+     * Dash-assigned callback that gets fired when the value changes.
+     */
+    setProps: PropTypes.func,
 
     /**
      * Object that holds the loading state object coming from dash-renderer
diff --git a/components/dash-core-components/src/components/DatePickerSingle.react.js b/components/dash-core-components/src/components/DatePickerSingle.react.js
index 85ef116ac8..792e9f6b75 100644
--- a/components/dash-core-components/src/components/DatePickerSingle.react.js
+++ b/components/dash-core-components/src/components/DatePickerSingle.react.js
@@ -27,13 +27,6 @@ export default class DatePickerSingle extends Component {
 }
 
 DatePickerSingle.propTypes = {
-    /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
-     */
-    id: PropTypes.string,
-
     /**
      * Specifies the starting date for the component, best practice is to pass
      * value via datetime object
@@ -61,6 +54,13 @@ DatePickerSingle.propTypes = {
      */
     disabled_days: PropTypes.arrayOf(PropTypes.string),
 
+    /**
+     * Text that will be displayed in the input
+     * box of the date picker when no date is selected.
+     * Default value is 'Start Date'
+     */
+    placeholder: PropTypes.string,
+
     /**
      * Specifies the month that is initially presented when the user
      * opens the calendar. Accepts datetime.datetime objects or strings
@@ -70,88 +70,89 @@ DatePickerSingle.propTypes = {
     initial_visible_month: PropTypes.string,
 
     /**
-     * Size of rendered calendar days, higher number
-     * means bigger day size and larger calendar overall
+     * Whether or not the dropdown is "clearable", that is, whether or
+     * not a small "x" appears on the right of the dropdown that removes
+     * the selected value.
      */
-    day_size: PropTypes.number,
+    clearable: PropTypes.bool,
 
     /**
-     * Orientation of calendar, either vertical or horizontal.
-     * Valid options are 'vertical' or 'horizontal'.
+     * If True, the calendar will automatically open when cleared
      */
-    calendar_orientation: PropTypes.oneOf(['vertical', 'horizontal']),
+    reopen_calendar_on_clear: PropTypes.bool,
 
     /**
-     * Determines whether the calendar and days operate
-     * from left to right or from right to left
+     * Specifies the format that the selected dates will be displayed
+     * valid formats are variations of "MM YY DD". For example:
+     * "MM YY DD" renders as '05 10 97' for May 10th 1997
+     * "MMMM, YY" renders as 'May, 1997' for May 10th 1997
+     * "M, D, YYYY" renders as '07, 10, 1997' for September 10th 1997
+     * "MMMM" renders as 'May' for May 10 1997
      */
-    is_RTL: PropTypes.bool,
+    display_format: PropTypes.string,
+
     /**
-     * Text that will be displayed in the input
-     * box of the date picker when no date is selected.
-     * Default value is 'Start Date'
+     * Specifies the format that the month will be displayed in the calendar,
+     * valid formats are variations of "MM YY". For example:
+     * "MM YY" renders as '05 97' for May 1997
+     * "MMMM, YYYY" renders as 'May, 1997' for May 1997
+     * "MMM, YY" renders as 'Sep, 97' for September 1997
      */
-    placeholder: PropTypes.string,
+    month_format: PropTypes.string,
 
     /**
-     * If True, the calendar will automatically open when cleared
+     * Specifies what day is the first day of the week, values must be
+     * from [0, ..., 6] with 0 denoting Sunday and 6 denoting Saturday
      */
-    reopen_calendar_on_clear: PropTypes.bool,
+    first_day_of_week: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
 
     /**
-     * Number of calendar months that are shown when calendar is opened
+     * If True the calendar will display days that rollover into
+     * the next month
      */
-    number_of_months_shown: PropTypes.number,
+    show_outside_days: PropTypes.bool,
 
     /**
-     * If True, calendar will open in a screen overlay portal,
-     * not supported on vertical calendar
+     * If True the calendar will not close when the user has selected a value
+     * and will wait until the user clicks off the calendar
      */
-    with_portal: PropTypes.bool,
+    stay_open_on_select: PropTypes.bool,
 
     /**
-     * If True, calendar will open in a full screen overlay portal, will
-     * take precedent over 'withPortal' if both are set to True,
-     * not supported on vertical calendar
+     * Orientation of calendar, either vertical or horizontal.
+     * Valid options are 'vertical' or 'horizontal'.
      */
-    with_full_screen_portal: PropTypes.bool,
+    calendar_orientation: PropTypes.oneOf(['vertical', 'horizontal']),
 
     /**
-     * Specifies what day is the first day of the week, values must be
-     * from [0, ..., 6] with 0 denoting Sunday and 6 denoting Saturday
+     * Number of calendar months that are shown when calendar is opened
      */
-    first_day_of_week: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    number_of_months_shown: PropTypes.number,
 
     /**
-     * If True the calendar will not close when the user has selected a value
-     * and will wait until the user clicks off the calendar
+     * If True, calendar will open in a screen overlay portal,
+     * not supported on vertical calendar
      */
-    stay_open_on_select: PropTypes.bool,
+    with_portal: PropTypes.bool,
 
     /**
-     * If True the calendar will display days that rollover into
-     * the next month
+     * If True, calendar will open in a full screen overlay portal, will
+     * take precedent over 'withPortal' if both are set to True,
+     * not supported on vertical calendar
      */
-    show_outside_days: PropTypes.bool,
+    with_full_screen_portal: PropTypes.bool,
 
     /**
-     * Specifies the format that the month will be displayed in the calendar,
-     * valid formats are variations of "MM YY". For example:
-     * "MM YY" renders as '05 97' for May 1997
-     * "MMMM, YYYY" renders as 'May, 1997' for May 1997
-     * "MMM, YY" renders as 'Sep, 97' for September 1997
+     * Size of rendered calendar days, higher number
+     * means bigger day size and larger calendar overall
      */
-    month_format: PropTypes.string,
+    day_size: PropTypes.number,
 
     /**
-     * Specifies the format that the selected dates will be displayed
-     * valid formats are variations of "MM YY DD". For example:
-     * "MM YY DD" renders as '05 10 97' for May 10th 1997
-     * "MMMM, YY" renders as 'May, 1997' for May 10th 1997
-     * "M, D, YYYY" renders as '07, 10, 1997' for September 10th 1997
-     * "MMMM" renders as 'May' for May 10 1997
+     * Determines whether the calendar and days operate
+     * from left to right or from right to left
      */
-    display_format: PropTypes.string,
+    is_RTL: PropTypes.bool,
 
     /**
      * If True, no dates can be selected.
@@ -159,26 +160,26 @@ DatePickerSingle.propTypes = {
     disabled: PropTypes.bool,
 
     /**
-     * Whether or not the dropdown is "clearable", that is, whether or
-     * not a small "x" appears on the right of the dropdown that removes
-     * the selected value.
+     * CSS styles appended to wrapper div
      */
-    clearable: PropTypes.bool,
+    style: PropTypes.object,
 
     /**
-     * Dash-assigned callback that gets fired when the value changes.
+     * Appends a CSS class to the wrapper div component.
      */
-    setProps: PropTypes.func,
+    className: PropTypes.string,
 
     /**
-     * CSS styles appended to wrapper div
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
      */
-    style: PropTypes.object,
+    id: PropTypes.string,
 
     /**
-     * Appends a CSS class to the wrapper div component.
+     * Dash-assigned callback that gets fired when the value changes.
      */
-    className: PropTypes.string,
+    setProps: PropTypes.func,
 
     /**
      * Object that holds the loading state object coming from dash-renderer
diff --git a/components/dash-core-components/src/components/Dropdown.react.js b/components/dash-core-components/src/components/Dropdown.react.js
index f329443b8d..e8187648af 100644
--- a/components/dash-core-components/src/components/Dropdown.react.js
+++ b/components/dash-core-components/src/components/Dropdown.react.js
@@ -107,28 +107,31 @@ Dropdown.propTypes = {
     ]),
 
     /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
+     * If true, the user can select multiple values
      */
-    id: PropTypes.string,
+    multi: PropTypes.bool,
 
     /**
-     * height of each option. Can be increased when label lengths would wrap around
+     * Whether or not the dropdown is "clearable", that is, whether or
+     * not a small "x" appears on the right of the dropdown that removes
+     * the selected value.
      */
-    optionHeight: PropTypes.number,
+    clearable: PropTypes.bool,
 
     /**
-     * className of the dropdown element
+     * Whether to enable the searching feature or not
      */
-    className: PropTypes.string,
+    searchable: PropTypes.bool,
 
     /**
-     * Whether or not the dropdown is "clearable", that is, whether or
-     * not a small "x" appears on the right of the dropdown that removes
-     * the selected value.
+     * The value typed in the DropDown for searching.
      */
-    clearable: PropTypes.bool,
+    search_value: PropTypes.string,
+
+    /**
+     * The grey, default text shown when no option is selected
+     */
+    placeholder: PropTypes.string,
 
     /**
      * If true, this dropdown is disabled and the selection cannot be changed.
@@ -136,35 +139,32 @@ Dropdown.propTypes = {
     disabled: PropTypes.bool,
 
     /**
-     * If true, the user can select multiple values
+     * height of each option. Can be increased when label lengths would wrap around
      */
-    multi: PropTypes.bool,
+    optionHeight: PropTypes.number,
 
     /**
-     * The grey, default text shown when no option is selected
+     * Defines CSS styles which will override styles previously set.
      */
-    placeholder: PropTypes.string,
+    style: PropTypes.object,
 
     /**
-     * Whether to enable the searching feature or not
+     * className of the dropdown element
      */
-    searchable: PropTypes.bool,
+    className: PropTypes.string,
 
     /**
-     * The value typed in the DropDown for searching.
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
      */
-    search_value: PropTypes.string,
+    id: PropTypes.string,
 
     /**
      * Dash-assigned callback that gets fired when the input changes
      */
     setProps: PropTypes.func,
 
-    /**
-     * Defines CSS styles which will override styles previously set.
-     */
-    style: PropTypes.object,
-
     /**
      * Object that holds the loading state object coming from dash-renderer
      */
diff --git a/components/dash-core-components/src/components/Input.react.js b/components/dash-core-components/src/components/Input.react.js
index 99573b4935..18bf374a99 100644
--- a/components/dash-core-components/src/components/Input.react.js
+++ b/components/dash-core-components/src/components/Input.react.js
@@ -165,34 +165,11 @@ Input.defaultProps = {
 };
 
 Input.propTypes = {
-    /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
-     */
-    id: PropTypes.string,
-
     /**
      * The value of the input
      */
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-    /**
-     * The input's inline styles
-     */
-    style: PropTypes.object,
-
-    /**
-     * The class of the input element
-     */
-    className: PropTypes.string,
-
-    /**
-     * If true, changes to input will be sent back to the Dash server only on enter or when losing focus.
-     * If it's false, it will sent the value back on every change.
-     */
-    debounce: PropTypes.bool,
-
     /**
      * The type of control to render.
      */
@@ -210,30 +187,24 @@ Input.propTypes = {
     ]),
 
     /**
-     * This attribute indicates whether the value of the control can be automatically completed by the browser.
+     * If true, changes to input will be sent back to the Dash server only on enter or when losing focus.
+     * If it's false, it will sent the value back on every change.
      */
-    autoComplete: PropTypes.string,
+    debounce: PropTypes.bool,
 
     /**
-     * The element should be automatically focused after the page loaded.
-     * autoFocus is an HTML boolean attribute - it is enabled by a boolean or
-     * 'autoFocus'. Alternative capitalizations `autofocus` & `AUTOFOCUS`
-     * are also acccepted.
+     * A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. Note: Do not use the placeholder attribute instead of a <label> element, their purposes are different. The <label> attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the placeholder attribute is a hint about the format that the content should take. There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it.
      */
-    autoFocus: PropTypes.oneOfType([
-        PropTypes.oneOf(['autoFocus', 'autofocus', 'AUTOFOCUS']),
-        PropTypes.bool,
-    ]),
+    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
     /**
-     * If true, the input is disabled and can't be clicked on.
-     * disabled is an HTML boolean attribute - it is enabled by a boolean or
-     * 'disabled'. Alternative capitalizations `DISABLED`
+     * Number of times the `Enter` key was pressed while the input had focus.
      */
-    disabled: PropTypes.oneOfType([
-        PropTypes.oneOf(['disabled', 'DISABLED']),
-        PropTypes.bool,
-    ]),
+    n_submit: PropTypes.number,
+    /**
+     * Last time that `Enter` was pressed.
+     */
+    n_submit_timestamp: PropTypes.number,
 
     /**
      * Provides a hint to the browser as to the type of data that might be
@@ -297,86 +268,110 @@ Input.propTypes = {
     ]),
 
     /**
-     * Identifies a list of pre-defined options to suggest to the user.
-     * The value must be the id of a <datalist> element in the same document.
-     * The browser displays only options that are valid values for this
-     * input element.
-     * This attribute is ignored when the type attribute's value is
-     * hidden, checkbox, radio, file, or a button type.
+     * This attribute indicates whether the value of the control can be automatically completed by the browser.
      */
-    list: PropTypes.string,
+    autoComplete: PropTypes.string,
 
     /**
-     * The maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
+     * This attribute indicates that the user cannot modify the value of the control. The value of the attribute is irrelevant. If you need read-write access to the input value, do not add the "readonly" attribute. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit).
+     * readOnly is an HTML boolean attribute - it is enabled by a boolean or
+     * 'readOnly'. Alternative capitalizations `readonly` & `READONLY`
+     * are also acccepted.
      */
-    max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    readOnly: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.oneOf(['readOnly', 'readonly', 'READONLY']),
+    ]),
 
     /**
-     * If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored. It can exceed the value of the size attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior (i.e. the user can enter an unlimited number of characters). The constraint is evaluated only when the value of the attribute has been changed.
+     * This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The :optional and :required CSS pseudo-classes will be applied to the field as appropriate.
+     * required is an HTML boolean attribute - it is enabled by a boolean or
+     * 'required'. Alternative capitalizations `REQUIRED`
+     * are also acccepted.
      */
-    maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    required: PropTypes.oneOfType([
+        PropTypes.oneOf(['required', 'REQUIRED']),
+        PropTypes.bool,
+    ]),
 
     /**
-     * The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.
+     * The element should be automatically focused after the page loaded.
+     * autoFocus is an HTML boolean attribute - it is enabled by a boolean or
+     * 'autoFocus'. Alternative capitalizations `autofocus` & `AUTOFOCUS`
+     * are also acccepted.
      */
-    min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    autoFocus: PropTypes.oneOfType([
+        PropTypes.oneOf(['autoFocus', 'autofocus', 'AUTOFOCUS']),
+        PropTypes.bool,
+    ]),
 
     /**
-     * If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored.
+     * If true, the input is disabled and can't be clicked on.
+     * disabled is an HTML boolean attribute - it is enabled by a boolean or
+     * 'disabled'. Alternative capitalizations `DISABLED`
      */
-    minLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    disabled: PropTypes.oneOfType([
+        PropTypes.oneOf(['disabled', 'DISABLED']),
+        PropTypes.bool,
+    ]),
+
+    /**
+     * Identifies a list of pre-defined options to suggest to the user.
+     * The value must be the id of a <datalist> element in the same document.
+     * The browser displays only options that are valid values for this
+     * input element.
+     * This attribute is ignored when the type attribute's value is
+     * hidden, checkbox, radio, file, or a button type.
+     */
+    list: PropTypes.string,
 
     /**
      * This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the type attribute is set to email or file, otherwise it is ignored.
      */
     multiple: PropTypes.bool,
 
+    /**
+     * Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.
+     */
+    spellCheck: PropTypes.oneOfType([
+        // enumerated property, not a boolean property: https://www.w3.org/TR/html51/editing.html#spelling-and-grammar-checking
+        PropTypes.oneOf(['true', 'false']),
+        PropTypes.bool,
+    ]),
+
     /**
      * The name of the control, which is submitted with the form data.
      */
     name: PropTypes.string,
 
     /**
-     * A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored. The regular expression language is the same as JavaScript RegExp algorithm, with the 'u' parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes.
+     * The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.
      */
-    pattern: PropTypes.string,
+    min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
     /**
-     * A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. Note: Do not use the placeholder attribute instead of a <label> element, their purposes are different. The <label> attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the placeholder attribute is a hint about the format that the content should take. There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it.
+     * The maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
      */
-    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
     /**
-     * This attribute indicates that the user cannot modify the value of the control. The value of the attribute is irrelevant. If you need read-write access to the input value, do not add the "readonly" attribute. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit).
-     * readOnly is an HTML boolean attribute - it is enabled by a boolean or
-     * 'readOnly'. Alternative capitalizations `readonly` & `READONLY`
-     * are also acccepted.
+     * Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
      */
-    readOnly: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.oneOf(['readOnly', 'readonly', 'READONLY']),
-    ]),
+    step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
     /**
-     * This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The :optional and :required CSS pseudo-classes will be applied to the field as appropriate.
-     * required is an HTML boolean attribute - it is enabled by a boolean or
-     * 'required'. Alternative capitalizations `REQUIRED`
-     * are also acccepted.
+     * If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored.
      */
-    required: PropTypes.oneOfType([
-        PropTypes.oneOf(['required', 'REQUIRED']),
-        PropTypes.bool,
-    ]),
-
+    minLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     /**
-     * The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. On platforms on which it's possible this value isn't known, the value can be "none"; for example, on macOS, the default direction is "none", then as the user begins to modify the selection using the keyboard, this will change to reflect the direction in which the selection is expanding.
+     * If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored. It can exceed the value of the size attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior (i.e. the user can enter an unlimited number of characters). The constraint is evaluated only when the value of the attribute has been changed.
      */
-    selectionDirection: PropTypes.string,
+    maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
     /**
-     * The offset into the element's text content of the last selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy).
+     * A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored. The regular expression language is the same as JavaScript RegExp algorithm, with the 'u' parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes.
      */
-    selectionEnd: PropTypes.string,
+    pattern: PropTypes.string,
 
     /**
      * The offset into the element's text content of the first selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy).
@@ -384,41 +379,45 @@ Input.propTypes = {
     selectionStart: PropTypes.string,
 
     /**
-     * The initial size of the control. This value is in pixels unless the value of the type attribute is text or password, in which case it is an integer number of characters. Starting in, this attribute applies only when the type attribute is set to text, search, tel, url, email, or password, otherwise it is ignored. In addition, the size must be greater than zero. If you do not specify a size, a default value of 20 is used.' simply states "the user agent should ensure that at least that many characters are visible", but different characters can have different widths in certain fonts. In some browsers, a certain string with x characters will not be entirely visible even if size is defined to at least x.
+     * The offset into the element's text content of the last selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy).
      */
-    size: PropTypes.string,
+    selectionEnd: PropTypes.string,
 
     /**
-     * Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.
+     * The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. On platforms on which it's possible this value isn't known, the value can be "none"; for example, on macOS, the default direction is "none", then as the user begins to modify the selection using the keyboard, this will change to reflect the direction in which the selection is expanding.
      */
-    spellCheck: PropTypes.oneOfType([
-        // enumerated property, not a boolean property: https://www.w3.org/TR/html51/editing.html#spelling-and-grammar-checking
-        PropTypes.oneOf(['true', 'false']),
-        PropTypes.bool,
-    ]),
+    selectionDirection: PropTypes.string,
 
     /**
-     * Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
+     * Number of times the input lost focus.
      */
-    step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    n_blur: PropTypes.number,
+    /**
+     * Last time the input lost focus.
+     */
+    n_blur_timestamp: PropTypes.number,
 
     /**
-     * Number of times the `Enter` key was pressed while the input had focus.
+     * The initial size of the control. This value is in pixels unless the value of the type attribute is text or password, in which case it is an integer number of characters. Starting in, this attribute applies only when the type attribute is set to text, search, tel, url, email, or password, otherwise it is ignored. In addition, the size must be greater than zero. If you do not specify a size, a default value of 20 is used.' simply states "the user agent should ensure that at least that many characters are visible", but different characters can have different widths in certain fonts. In some browsers, a certain string with x characters will not be entirely visible even if size is defined to at least x.
      */
-    n_submit: PropTypes.number,
+    size: PropTypes.string,
+
     /**
-     * Last time that `Enter` was pressed.
+     * The input's inline styles
      */
-    n_submit_timestamp: PropTypes.number,
+    style: PropTypes.object,
 
     /**
-     * Number of times the input lost focus.
+     * The class of the input element
      */
-    n_blur: PropTypes.number,
+    className: PropTypes.string,
+
     /**
-     * Last time the input lost focus.
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
      */
-    n_blur_timestamp: PropTypes.number,
+    id: PropTypes.string,
 
     /**
      * Dash-assigned callback that gets fired when the value changes.
diff --git a/components/dash-core-components/src/components/Link.react.js b/components/dash-core-components/src/components/Link.react.js
index 6b16e60bff..aa6aa0c188 100644
--- a/components/dash-core-components/src/components/Link.react.js
+++ b/components/dash-core-components/src/components/Link.react.js
@@ -98,19 +98,28 @@ export default class Link extends Component {
 
 Link.propTypes = {
     /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
+     * The children of this component
      */
-    id: PropTypes.string,
+    children: PropTypes.node,
     /**
      * The URL of a linked resource.
      */
     href: PropTypes.string.isRequired,
+    /**
+     * Specifies where to open the link reference.
+     */
+    target: PropTypes.string,
     /**
      * Controls whether or not the page will refresh when the link is clicked
      */
     refresh: PropTypes.bool,
+
+    /**
+     * Adds the title attribute to your link, which can contain supplementary
+     * information.
+     */
+    title: PropTypes.string,
+
     /**
      * Often used with CSS to style elements with common properties.
      */
@@ -120,18 +129,11 @@ Link.propTypes = {
      */
     style: PropTypes.object,
     /**
-     * Adds the title attribute to your link, which can contain supplementary
-     * information.
-     */
-    title: PropTypes.string,
-    /**
-     * Specifies where to open the link reference.
-     */
-    target: PropTypes.string,
-    /**
-     * The children of this component
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
      */
-    children: PropTypes.node,
+    id: PropTypes.string,
     /**
      * Object that holds the loading state object coming from dash-renderer
      */
diff --git a/components/dash-core-components/src/components/RadioItems.react.js b/components/dash-core-components/src/components/RadioItems.react.js
index fe6d8e42c1..2489bacb57 100644
--- a/components/dash-core-components/src/components/RadioItems.react.js
+++ b/components/dash-core-components/src/components/RadioItems.react.js
@@ -131,13 +131,6 @@ RadioItems.propTypes = {
         ),
     ]),
 
-    /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
-     */
-    id: PropTypes.string,
-
     /**
      * The currently selected value
      */
@@ -147,6 +140,13 @@ RadioItems.propTypes = {
         PropTypes.bool,
     ]),
 
+    /**
+     * Indicates whether labelStyle should be inline or not
+     * True: Automatically set { 'display': 'inline-block' } to labelStyle
+     * False: No additional styles are passed into labelStyle.
+     */
+    inline: PropTypes.bool,
+
     /**
      * The style of the container (div)
      */
@@ -179,6 +179,13 @@ RadioItems.propTypes = {
      */
     labelClassName: PropTypes.string,
 
+    /**
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
+     */
+    id: PropTypes.string,
+
     /**
      * Dash-assigned callback that gets fired when the value changes.
      */
@@ -230,13 +237,6 @@ RadioItems.propTypes = {
      * session: window.sessionStorage, data is cleared once the browser quit.
      */
     persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
-
-    /**
-     * Indicates whether labelStyle should be inline or not
-     * True: Automatically set { 'display': 'inline-block' } to labelStyle
-     * False: No additional styles are passed into labelStyle.
-     */
-    inline: PropTypes.bool,
 };
 
 RadioItems.defaultProps = {
diff --git a/components/dash-core-components/src/components/RangeSlider.react.js b/components/dash-core-components/src/components/RangeSlider.react.js
index 61cc795b38..6db2a43b76 100644
--- a/components/dash-core-components/src/components/RangeSlider.react.js
+++ b/components/dash-core-components/src/components/RangeSlider.react.js
@@ -34,13 +34,6 @@ RangeSlider.propTypes = {
      */
     step: PropTypes.number,
 
-    /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
-     */
-    id: PropTypes.string,
-
     /**
      * Marks on the slider.
      * The key determines the position (a number),
@@ -75,20 +68,23 @@ RangeSlider.propTypes = {
     allowCross: PropTypes.bool,
 
     /**
-     * Additional CSS class for the root DOM node
+     * pushable could be set as true to allow pushing of
+     * surrounding handles when moving an handle.
+     * When set to a number, the number will be the
+     * minimum ensured distance between handles.
      */
-    className: PropTypes.string,
+    pushable: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
 
     /**
-     * Determine how many ranges to render, and multiple handles
-     * will be rendered (number + 1).
+     * If true, the handles can't be moved.
      */
-    count: PropTypes.number,
+    disabled: PropTypes.bool,
 
     /**
-     * If true, the handles can't be moved.
+     * Determine how many ranges to render, and multiple handles
+     * will be rendered (number + 1).
      */
-    disabled: PropTypes.bool,
+    count: PropTypes.number,
 
     /**
      * When the step value is greater than 1,
@@ -103,14 +99,6 @@ RangeSlider.propTypes = {
      */
     included: PropTypes.bool,
 
-    /**
-     * pushable could be set as true to allow pushing of
-     * surrounding handles when moving an handle.
-     * When set to a number, the number will be the
-     * minimum ensured distance between handles.
-     */
-    pushable: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-
     /**
      * Configuration for tooltips describing the current slider values
      */
@@ -139,6 +127,17 @@ RangeSlider.propTypes = {
         ]),
     }),
 
+    /**
+     * Determines when the component should update its `value`
+     * property. If `mouseup` (the default) then the slider
+     * will only trigger its value when the user has finished
+     * dragging the slider. If `drag`, then the slider will
+     * update its value continuously as it is being dragged.
+     * Note that for the latter case, the `drag_value`
+     * property could be used instead.
+     */
+    updatemode: PropTypes.oneOf(['mouseup', 'drag']),
+
     /**
      * If true, the slider will be vertical
      */
@@ -150,15 +149,16 @@ RangeSlider.propTypes = {
     verticalHeight: PropTypes.number,
 
     /**
-     * Determines when the component should update its `value`
-     * property. If `mouseup` (the default) then the slider
-     * will only trigger its value when the user has finished
-     * dragging the slider. If `drag`, then the slider will
-     * update its value continuously as it is being dragged.
-     * Note that for the latter case, the `drag_value`
-     * property could be used instead.
+     * Additional CSS class for the root DOM node
      */
-    updatemode: PropTypes.oneOf(['mouseup', 'drag']),
+    className: PropTypes.string,
+
+    /**
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
+     */
+    id: PropTypes.string,
 
     /**
      * Dash-assigned callback that gets fired when the value or drag_value changes.
diff --git a/components/dash-core-components/src/components/Slider.react.js b/components/dash-core-components/src/components/Slider.react.js
index 566e3e8b9f..00c6c41a18 100644
--- a/components/dash-core-components/src/components/Slider.react.js
+++ b/components/dash-core-components/src/components/Slider.react.js
@@ -33,13 +33,6 @@ Slider.propTypes = {
      */
     step: PropTypes.number,
 
-    /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
-     */
-    id: PropTypes.string,
-
     /**
      * Marks on the slider.
      * The key determines the position (a number),
@@ -68,11 +61,6 @@ Slider.propTypes = {
      */
     drag_value: PropTypes.number,
 
-    /**
-     * Additional CSS class for the root DOM node
-     */
-    className: PropTypes.string,
-
     /**
      * If true, the handles can't be moved.
      */
@@ -119,6 +107,18 @@ Slider.propTypes = {
         ]),
     }),
 
+    /**
+     * Determines when the component should update its `value`
+     * property. If `mouseup` (the default) then the slider
+     * will only trigger its value when the user has finished
+     * dragging the slider. If `drag`, then the slider will
+     * update its value continuously as it is being dragged.
+     * If you want different actions during and after drag,
+     * leave `updatemode` as `mouseup` and use `drag_value`
+     * for the continuously updating value.
+     */
+    updatemode: PropTypes.oneOf(['mouseup', 'drag']),
+
     /**
      * If true, the slider will be vertical
      */
@@ -130,16 +130,16 @@ Slider.propTypes = {
     verticalHeight: PropTypes.number,
 
     /**
-     * Determines when the component should update its `value`
-     * property. If `mouseup` (the default) then the slider
-     * will only trigger its value when the user has finished
-     * dragging the slider. If `drag`, then the slider will
-     * update its value continuously as it is being dragged.
-     * If you want different actions during and after drag,
-     * leave `updatemode` as `mouseup` and use `drag_value`
-     * for the continuously updating value.
+     * Additional CSS class for the root DOM node
      */
-    updatemode: PropTypes.oneOf(['mouseup', 'drag']),
+    className: PropTypes.string,
+
+    /**
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
+     */
+    id: PropTypes.string,
 
     /**
      * Dash-assigned callback that gets fired when the value or drag_value changes.
diff --git a/components/dash-table/package.json b/components/dash-table/package.json
index b8e4c6aec0..f117184962 100644
--- a/components/dash-table/package.json
+++ b/components/dash-table/package.json
@@ -17,7 +17,7 @@
     "private::build:js": "run-s \"private::build -- --mode production\"",
     "private::build:js-test": "run-s \"private::build -- --mode development --config webpack.test.config.js\"",
     "private::build:js-test-watch": "run-s \"private::build -- --mode development --config webpack.test.config.js --watch\"",
-    "private::build:backends": "dash-generate-components src/dash-table/dash/DataTable.js dash_table -p package-info.json && cp dash_table_base/** dash_table/ && dash-generate-components src/dash-table/dash/DataTable.js dash_table -p package-info.json --r-prefix 'dash' --r-suggests 'dash' --jl-prefix 'dash' && black dash_table",
+    "private::build:backends": "dash-generate-components src/dash-table/dash/DataTable.js dash_table -p package-info.json && cp dash_table_base/** dash_table/ && dash-generate-components src/dash-table/dash/DataTable.js dash_table -p package-info.json -k DataTable --r-prefix 'dash' --r-suggests 'dash' --jl-prefix 'dash' && black dash_table",
     "private::format.ts": "npm run private::lint.ts -- --fix",
     "private::format.prettier": "prettier --config .prettierrc --write \"{src,tests,demo}/**/*.{js,ts,tsx}\"",
     "private::format.black": "black dash_table_base tests",
diff --git a/components/dash-table/src/dash-table/dash/DataTable.js b/components/dash-table/src/dash-table/dash/DataTable.js
index ef1752da07..beca21fc1d 100644
--- a/components/dash-table/src/dash-table/dash/DataTable.js
+++ b/components/dash-table/src/dash-table/dash/DataTable.js
@@ -138,6 +138,76 @@ export const propTypes = {
      */
     columns: PropTypes.arrayOf(
         PropTypes.exact({
+            /**
+             * The `id` of the column.
+             * The column `id` is used to match cells in data with particular columns.
+             * The `id` is not visible in the table.
+             */
+            id: PropTypes.string.isRequired,
+
+            /**
+             * The `name` of the column, as it appears in the column header.
+             * If `name` is a list of strings, then the columns
+             * will render with multiple headers rows.
+             */
+            name: PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.arrayOf(PropTypes.string)
+            ]).isRequired,
+
+            /**
+             * The data-type provides support for per column typing and allows for data
+             * validation and coercion.
+             * 'numeric': represents both floats and ints.
+             * 'text': represents a string.
+             * 'datetime': a string representing a date or date-time, in the form:
+             *   'YYYY-MM-DD HH:MM:SS.ssssss' or some truncation thereof. Years must
+             *   have 4 digits, unless you use `validation.allow_YY: true`. Also
+             *   accepts 'T' or 't' between date and time, and allows timezone info
+             *   at the end. To convert these strings to Python `datetime` objects,
+             *   use `dateutil.parser.isoparse`. In R use `parse_iso_8601` from the
+             *   `parsedate` library.
+             *   WARNING: these parsers do not work with 2-digit years, if you use
+             *   `validation.allow_YY: true` and do not coerce to 4-digit years.
+             *   And parsers that do work with 2-digit years may make a different
+             *   guess about the century than we make on the front end.
+             * 'any': represents any type of data.
+             * Defaults to 'any' if undefined.
+             *
+             *
+             */
+            type: PropTypes.oneOf(['any', 'numeric', 'text', 'datetime']),
+
+            /**
+             * The `presentation` to use to display data. Markdown can be used on
+             * columns with type 'text'.  See 'dropdown' for more info.
+             * Defaults to 'input' for ['datetime', 'numeric', 'text', 'any'].
+             */
+            presentation: PropTypes.oneOf(['input', 'dropdown', 'markdown']),
+
+            /**
+             * If true, the user can select the column by clicking on the checkbox or radio button
+             * in the column. If there are multiple header rows, true will display the input
+             * on each row.
+             * If `last`, the input will only appear on the last header row. If `first` it will only
+             * appear on the first header row. These are respectively shortcut equivalents to
+             * `[false, ..., false, true]` and `[true, false, ..., false]`.
+             * If there are merged, multi-header columns then you can choose which column header
+             * row to display the input in by supplying an array of booleans.
+             * For example, `[true, false]` will display the `selectable` input on the first row,
+             * but now on the second row.
+             * If the `selectable` input appears on a merged columns, then clicking on that input
+             * will select *all* of the merged columns associated with it.
+             * The table-level prop `column_selectable` is used to determine the type of column
+             * selection to use.
+             *
+             */
+            selectable: PropTypes.oneOfType([
+                PropTypes.oneOf(['first', 'last']),
+                PropTypes.bool,
+                PropTypes.arrayOf(PropTypes.bool)
+            ]),
+
             /**
              * If true, the user can clear the column by clicking on the `clear`
              * action button on the column. If there are multiple header rows, true
@@ -195,19 +265,6 @@ export const propTypes = {
              */
             editable: PropTypes.bool,
 
-            /**
-             * There are two `filter_options` props in the table.
-             * This is the column-level filter_options prop and there is
-             * also the table-level `filter_options` prop.
-             * These props determine whether the applicable filter relational
-             * operators will default to `sensitive` or `insensitive` comparison.
-             * If the column-level `filter_options` prop is set it overrides
-             * the table-level `filter_options` prop for that column.
-             */
-            filter_options: PropTypes.shape({
-                case: PropTypes.oneOf(['sensitive', 'insensitive'])
-            }),
-
             /**
              * If true, the user can hide the column by clicking on the `hide`
              * action button on the column. If there are multiple header rows, true
@@ -253,27 +310,17 @@ export const propTypes = {
             ]),
 
             /**
-             * If true, the user can select the column by clicking on the checkbox or radio button
-             * in the column. If there are multiple header rows, true will display the input
-             * on each row.
-             * If `last`, the input will only appear on the last header row. If `first` it will only
-             * appear on the first header row. These are respectively shortcut equivalents to
-             * `[false, ..., false, true]` and `[true, false, ..., false]`.
-             * If there are merged, multi-header columns then you can choose which column header
-             * row to display the input in by supplying an array of booleans.
-             * For example, `[true, false]` will display the `selectable` input on the first row,
-             * but now on the second row.
-             * If the `selectable` input appears on a merged columns, then clicking on that input
-             * will select *all* of the merged columns associated with it.
-             * The table-level prop `column_selectable` is used to determine the type of column
-             * selection to use.
-             *
+             * There are two `filter_options` props in the table.
+             * This is the column-level filter_options prop and there is
+             * also the table-level `filter_options` prop.
+             * These props determine whether the applicable filter relational
+             * operators will default to `sensitive` or `insensitive` comparison.
+             * If the column-level `filter_options` prop is set it overrides
+             * the table-level `filter_options` prop for that column.
              */
-            selectable: PropTypes.oneOfType([
-                PropTypes.oneOf(['first', 'last']),
-                PropTypes.bool,
-                PropTypes.arrayOf(PropTypes.bool)
-            ]),
+            filter_options: PropTypes.shape({
+                case: PropTypes.oneOf(['sensitive', 'insensitive'])
+            }),
 
             /**
              * The formatting applied to the column's data.
@@ -335,30 +382,6 @@ export const propTypes = {
                 specifier: PropTypes.string
             }),
 
-            /**
-             * The `id` of the column.
-             * The column `id` is used to match cells in data with particular columns.
-             * The `id` is not visible in the table.
-             */
-            id: PropTypes.string.isRequired,
-
-            /**
-             * The `name` of the column, as it appears in the column header.
-             * If `name` is a list of strings, then the columns
-             * will render with multiple headers rows.
-             */
-            name: PropTypes.oneOfType([
-                PropTypes.string,
-                PropTypes.arrayOf(PropTypes.string)
-            ]).isRequired,
-
-            /**
-             * The `presentation` to use to display data. Markdown can be used on
-             * columns with type 'text'.  See 'dropdown' for more info.
-             * Defaults to 'input' for ['datetime', 'numeric', 'text', 'any'].
-             */
-            presentation: PropTypes.oneOf(['input', 'dropdown', 'markdown']),
-
             /**
              * The `on_change` behavior of the column for user-initiated modifications.
              */
@@ -412,165 +435,186 @@ export const propTypes = {
                  *   `action: 'coerce'`, will convert user input to a 4-digit year.
                  */
                 allow_YY: PropTypes.bool
-            }),
+            })
+        })
+    ),
+
+    /**
+     * If True, then the data in all of the cells is editable.
+     * When `editable` is True, particular columns can be made
+     * uneditable by setting `editable` to `False` inside the `columns`
+     * property.
+     * If False, then the data in all of the cells is uneditable.
+     * When `editable` is False, particular columns can be made
+     * editable by setting `editable` to `True` inside the `columns`
+     * property.
+     */
+    editable: PropTypes.bool,
 
+    /**
+     * `fixed_columns` will "fix" the set of columns so that
+     * they remain visible when scrolling horizontally across
+     * the unfixed columns. `fixed_columns` fixes columns
+     * from left-to-right.
+     * If `headers` is False, no columns are fixed.
+     * If `headers` is True, all operation columns (see `row_deletable` and `row_selectable`)
+     * are fixed. Additional data columns can be fixed by
+     * assigning a number to `data`.
+     *
+     * Note that fixing columns introduces some changes to the
+     * underlying markup of the table and may impact the
+     * way that your columns are rendered or sized.
+     * View the documentation examples to learn more.
+     *
+     */
+    fixed_columns: PropTypes.oneOfType([
+        PropTypes.exact({
             /**
-             * The data-type provides support for per column typing and allows for data
-             * validation and coercion.
-             * 'numeric': represents both floats and ints.
-             * 'text': represents a string.
-             * 'datetime': a string representing a date or date-time, in the form:
-             *   'YYYY-MM-DD HH:MM:SS.ssssss' or some truncation thereof. Years must
-             *   have 4 digits, unless you use `validation.allow_YY: true`. Also
-             *   accepts 'T' or 't' between date and time, and allows timezone info
-             *   at the end. To convert these strings to Python `datetime` objects,
-             *   use `dateutil.parser.isoparse`. In R use `parse_iso_8601` from the
-             *   `parsedate` library.
-             *   WARNING: these parsers do not work with 2-digit years, if you use
-             *   `validation.allow_YY: true` and do not coerce to 4-digit years.
-             *   And parsers that do work with 2-digit years may make a different
-             *   guess about the century than we make on the front end.
-             * 'any': represents any type of data.
-             * Defaults to 'any' if undefined.
-             *
-             *
+             * Example `{'headers':False, 'data':0}` No columns are fixed (the default)
+             */
+
+            data: PropTypes.oneOf([0]),
+            headers: PropTypes.oneOf([false])
+        }),
+
+        PropTypes.exact({
+            /**
+             * Example `{'headers':True, 'data':1}` one column is fixed.
              */
-            type: PropTypes.oneOf(['any', 'numeric', 'text', 'datetime'])
+
+            data: PropTypes.number,
+            headers: PropTypes.oneOf([true]).isRequired
         })
-    ),
+    ]),
 
     /**
-     * The row and column indices and IDs of the currently active cell.
-     * `row_id` is only returned if the data rows have an `id` key.
+     * `fixed_rows` will "fix" the set of rows so that
+     * they remain visible when scrolling vertically down
+     * the table. `fixed_rows` fixes rows
+     * from top-to-bottom, starting from the headers.
+     * If `headers` is False, no rows are fixed.
+     * If `headers` is True, all header and filter rows (see `filter_action`) are
+     * fixed. Additional data rows can be fixed by assigning
+     * a number to `data`.  Note that fixing rows introduces some changes to the
+     * underlying markup of the table and may impact the
+     * way that your columns are rendered or sized.
+     * View the documentation examples to learn more.
      */
-    active_cell: PropTypes.exact({
-        row: PropTypes.number,
-        column: PropTypes.number,
-        row_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        column_id: PropTypes.string
-    }),
+    fixed_rows: PropTypes.oneOfType([
+        PropTypes.exact({
+            /**
+             * Example `{'headers':False, 'data':0}` No rows are fixed (the default)
+             */
+
+            data: PropTypes.oneOf([0]),
+            headers: PropTypes.oneOf([false])
+        }),
+        PropTypes.exact({
+            /**
+             * Example `{'headers':True, 'data':1}` one row is fixed.
+             */
+
+            data: PropTypes.number,
+            headers: PropTypes.oneOf([true]).isRequired
+        })
+    ]),
 
     /**
-     * If true, headers are included when copying from the table to different
-     * tabs and elsewhere. Note that headers are ignored when copying from the table onto itself and
-     * between two tables within the same tab.
+     * If `single`, then the user can select a single column or group
+     * of merged columns via the radio button that will appear in the
+     * header rows.
+     * If `multi`, then the user can select multiple columns or groups
+     * of merged columns via the checkbox that will appear in the header
+     * rows.
+     * If false, then the user will not be able to select columns and no
+     * input will appear in the header rows.
+     * When a column is selected, its id will be contained in `selected_columns`
+     * and `derived_viewport_selected_columns`.
      */
-    include_headers_on_copy_paste: PropTypes.bool,
+    column_selectable: PropTypes.oneOf(['single', 'multi', false]),
 
     /**
-     * The localization specific formatting information applied to all columns in the table.
-     * This prop is derived from the [d3.formatLocale](https://github.com/d3/d3-format#formatLocale) data structure specification.
-     * When left unspecified, each individual nested prop will default to a pre-determined value.
+     * If True (default), then it is possible to click and navigate
+     * table cells.
      */
-    locale_format: PropTypes.exact({
-        /**
-         *   (default: ['$', '']). A  list of two strings representing the
-         *   prefix and suffix symbols. Typically used for currency, and implemented using d3's
-         *   currency format, but you can use this for other symbols such as measurement units.
-         */
-        symbol: PropTypes.arrayOf(PropTypes.string),
-        /**
-         * (default: '.'). The string used for the decimal separator.
-         */
-        decimal: PropTypes.string,
-        /**
-         * (default: ','). The string used for the groups separator.
-         */
-        group: PropTypes.string,
-        /**
-         * (default: [3]). A  list of integers representing the grouping pattern.
-         */
-        grouping: PropTypes.arrayOf(PropTypes.number),
-        /**
-         * A list of ten strings used as replacements for numbers 0-9.
-         */
-        numerals: PropTypes.arrayOf(PropTypes.string),
-        /**
-         * (default: '%'). The string used for the percentage symbol.
-         */
-        percent: PropTypes.string,
-        /**
-         * (default: True). Separate integers with 4-digits or less.
-         */
-        separate_4digits: PropTypes.bool
-    }),
+    cell_selectable: PropTypes.bool,
 
     /**
-     * The `markdown_options` property allows customization of the markdown cells behavior.
+     * If `single`, then the user can select a single row
+     * via a radio button that will appear next to each row.
+     * If `multi`, then the user can select multiple rows
+     * via a checkbox that will appear next to each row.
+     * If false, then the user will not be able to select rows
+     * and no additional UI elements will appear.
+     * When a row is selected, its index will be contained
+     * in `selected_rows`.
      */
-    markdown_options: PropTypes.exact({
-        /**
-         * (default: '_blank').  The link's behavior (_blank opens the link in a
-         * new tab, _parent opens the link in the parent frame, _self opens the link in the
-         * current tab, and _top opens the link in the top frame) or a string
-         */
-        link_target: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.oneOf(['_blank', '_parent', '_self', '_top'])
-        ]),
-        /**
-         * (default: False)  If True, html may be used in markdown cells
-         * Be careful enabling html if the content being rendered can come
-         * from an untrusted user, as this may create an XSS vulnerability.
-         */
-        html: PropTypes.bool
+    row_selectable: PropTypes.oneOf(['single', 'multi', false]),
+
+    /**
+     * If True, then a `x` will appear next to each `row`
+     * and the user can delete the row.
+     */
+    row_deletable: PropTypes.bool,
+
+    /**
+     * The row and column indices and IDs of the currently active cell.
+     * `row_id` is only returned if the data rows have an `id` key.
+     */
+    active_cell: PropTypes.exact({
+        row: PropTypes.number,
+        column: PropTypes.number,
+        row_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        column_id: PropTypes.string
     }),
 
     /**
-     * The `css` property is a way to embed CSS selectors and rules
-     * onto the page.
-     * We recommend starting with the `style_*` properties
-     * before using this `css` property.
-     * Example:
-     * [
-     *     {"selector": ".dash-spreadsheet", "rule": 'font-family: "monospace"'}
-     * ]
+     * `selected_cells` represents the set of cells that are selected,
+     * as an array of objects, each item similar to `active_cell`.
+     * Multiple cells can be selected by holding down shift and
+     * clicking on a different cell or holding down shift and navigating
+     * with the arrow keys.
      */
-    css: PropTypes.arrayOf(
+    selected_cells: PropTypes.arrayOf(
         PropTypes.exact({
-            selector: PropTypes.string.isRequired,
-            rule: PropTypes.string.isRequired
+            row: PropTypes.number,
+            column: PropTypes.number,
+            row_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+            column_id: PropTypes.string
         })
     ),
 
     /**
-     * The previous state of `data`. `data_previous`
-     * has the same structure as `data` and it will be updated
-     * whenever `data` changes, either through a callback or
-     * by editing the table.
-     * This is a read-only property: setting this property will not
-     * have any impact on the table.
+     * `selected_rows` contains the indices of rows that
+     * are selected via the UI elements that appear when
+     * `row_selectable` is `'single'` or `'multi'`.
      */
-    data_previous: PropTypes.arrayOf(PropTypes.object),
+    selected_rows: PropTypes.arrayOf(PropTypes.number),
 
     /**
-     * The unix timestamp when the data was last edited.
-     * Use this property with other timestamp properties
-     * (such as `n_clicks_timestamp` in `dash_html_components`)
-     * to determine which property has changed within a callback.
+     * `selected_columns` contains the ids of columns that
+     * are selected via the UI elements that appear when
+     * `column_selectable` is `'single' or 'multi'`.
      */
-    data_timestamp: PropTypes.number,
+    selected_columns: PropTypes.arrayOf(PropTypes.string),
 
     /**
-     * If True, then the data in all of the cells is editable.
-     * When `editable` is True, particular columns can be made
-     * uneditable by setting `editable` to `False` inside the `columns`
-     * property.
-     * If False, then the data in all of the cells is uneditable.
-     * When `editable` is False, particular columns can be made
-     * editable by setting `editable` to `True` inside the `columns`
-     * property.
+     * `selected_row_ids` contains the ids of rows that
+     * are selected via the UI elements that appear when
+     * `row_selectable` is `'single'` or `'multi'`.
      */
-    editable: PropTypes.bool,
+    selected_row_ids: PropTypes.arrayOf(
+        PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    ),
 
     /**
      * When selecting multiple cells
      * (via clicking on a cell and then shift-clicking on another cell),
-     * `end_cell` represents the row / column coordinates and IDs of the cell
+     * `start_cell` represents the [row, column] coordinates of the cell
      * in one of the corners of the region.
-     * `start_cell` represents the coordinates of the other corner.
+     * `end_cell` represents the coordinates of the other corner.
      */
-    end_cell: PropTypes.exact({
+    start_cell: PropTypes.exact({
         row: PropTypes.number,
         column: PropTypes.number,
         row_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -578,35 +622,28 @@ export const propTypes = {
     }),
 
     /**
-     * Denotes the columns that will be used in the export data file.
-     * If `all`, all columns will be used (visible + hidden). If `visible`,
-     * only the visible columns will be used. Defaults to `visible`.
-     */
-    export_columns: PropTypes.oneOf(['all', 'visible']),
-
-    /**
-     * Denotes the type of the export data file,
-     * Defaults to `'none'`
-     */
-    export_format: PropTypes.oneOf(['csv', 'xlsx', 'none']),
-
-    /**
-     * Denotes the format of the headers in the export data file.
-     * If `'none'`, there will be no header. If `'display'`, then the header
-     * of the data file will be be how it is currently displayed. Note that
-     * `'display'` is only supported for `'xlsx'` export_format and will behave
-     * like `'names'` for `'csv'` export format. If `'ids'` or `'names'`,
-     * then the headers of data file will be the column id or the column
-     * names, respectively
+     * When selecting multiple cells
+     * (via clicking on a cell and then shift-clicking on another cell),
+     * `end_cell` represents the row / column coordinates and IDs of the cell
+     * in one of the corners of the region.
+     * `start_cell` represents the coordinates of the other corner.
      */
-    export_headers: PropTypes.oneOf(['none', 'ids', 'names', 'display']),
+    end_cell: PropTypes.exact({
+        row: PropTypes.number,
+        column: PropTypes.number,
+        row_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        column_id: PropTypes.string
+    }),
 
     /**
-     * `fill_width` toggles between a set of CSS for two common behaviors:
-     * True: The table container's width will grow to fill the available space;
-     * False: The table container's width will equal the width of its content.
+     * The previous state of `data`. `data_previous`
+     * has the same structure as `data` and it will be updated
+     * whenever `data` changes, either through a callback or
+     * by editing the table.
+     * This is a read-only property: setting this property will not
+     * have any impact on the table.
      */
-    fill_width: PropTypes.bool,
+    data_previous: PropTypes.arrayOf(PropTypes.object),
 
     /**
      * List of columns ids of the columns that are currently hidden.
@@ -614,11 +651,6 @@ export const propTypes = {
      */
     hidden_columns: PropTypes.arrayOf(PropTypes.string),
 
-    /**
-     * The ID of the table.
-     */
-    id: PropTypes.string,
-
     /**
      * If True, then the `active_cell` is in a focused state.
      */
@@ -633,217 +665,183 @@ export const propTypes = {
     merge_duplicate_headers: PropTypes.bool,
 
     /**
-     * `fixed_columns` will "fix" the set of columns so that
-     * they remain visible when scrolling horizontally across
-     * the unfixed columns. `fixed_columns` fixes columns
-     * from left-to-right.
-     * If `headers` is False, no columns are fixed.
-     * If `headers` is True, all operation columns (see `row_deletable` and `row_selectable`)
-     * are fixed. Additional data columns can be fixed by
-     * assigning a number to `data`.
-     *
-     * Note that fixing columns introduces some changes to the
-     * underlying markup of the table and may impact the
-     * way that your columns are rendered or sized.
-     * View the documentation examples to learn more.
-     *
-     */
-    fixed_columns: PropTypes.oneOfType([
-        PropTypes.exact({
-            /**
-             * Example `{'headers':False, 'data':0}` No columns are fixed (the default)
-             */
-
-            data: PropTypes.oneOf([0]),
-            headers: PropTypes.oneOf([false])
-        }),
-
-        PropTypes.exact({
-            /**
-             * Example `{'headers':True, 'data':1}` one column is fixed.
-             */
-
-            data: PropTypes.number,
-            headers: PropTypes.oneOf([true]).isRequired
-        })
-    ]),
-
-    /**
-     * `fixed_rows` will "fix" the set of rows so that
-     * they remain visible when scrolling vertically down
-     * the table. `fixed_rows` fixes rows
-     * from top-to-bottom, starting from the headers.
-     * If `headers` is False, no rows are fixed.
-     * If `headers` is True, all header and filter rows (see `filter_action`) are
-     * fixed. Additional data rows can be fixed by assigning
-     * a number to `data`.  Note that fixing rows introduces some changes to the
-     * underlying markup of the table and may impact the
-     * way that your columns are rendered or sized.
-     * View the documentation examples to learn more.
+     * The unix timestamp when the data was last edited.
+     * Use this property with other timestamp properties
+     * (such as `n_clicks_timestamp` in `dash_html_components`)
+     * to determine which property has changed within a callback.
      */
-    fixed_rows: PropTypes.oneOfType([
-        PropTypes.exact({
-            /**
-             * Example `{'headers':False, 'data':0}` No rows are fixed (the default)
-             */
-
-            data: PropTypes.oneOf([0]),
-            headers: PropTypes.oneOf([false])
-        }),
-        PropTypes.exact({
-            /**
-             * Example `{'headers':True, 'data':1}` one row is fixed.
-             */
-
-            data: PropTypes.number,
-            headers: PropTypes.oneOf([true]).isRequired
-        })
-    ]),
+    data_timestamp: PropTypes.number,
 
     /**
-     * If `single`, then the user can select a single column or group
-     * of merged columns via the radio button that will appear in the
-     * header rows.
-     * If `multi`, then the user can select multiple columns or groups
-     * of merged columns via the checkbox that will appear in the header
-     * rows.
-     * If false, then the user will not be able to select columns and no
-     * input will appear in the header rows.
-     * When a column is selected, its id will be contained in `selected_columns`
-     * and `derived_viewport_selected_columns`.
+     * If true, headers are included when copying from the table to different
+     * tabs and elsewhere. Note that headers are ignored when copying from the table onto itself and
+     * between two tables within the same tab.
      */
-    column_selectable: PropTypes.oneOf(['single', 'multi', false]),
+    include_headers_on_copy_paste: PropTypes.bool,
 
     /**
-     * If True, then a `x` will appear next to each `row`
-     * and the user can delete the row.
+     * Denotes the columns that will be used in the export data file.
+     * If `all`, all columns will be used (visible + hidden). If `visible`,
+     * only the visible columns will be used. Defaults to `visible`.
      */
-    row_deletable: PropTypes.bool,
+    export_columns: PropTypes.oneOf(['all', 'visible']),
 
     /**
-     * If True (default), then it is possible to click and navigate
-     * table cells.
+     * Denotes the type of the export data file,
+     * Defaults to `'none'`
      */
-    cell_selectable: PropTypes.bool,
+    export_format: PropTypes.oneOf(['csv', 'xlsx', 'none']),
 
     /**
-     * If `single`, then the user can select a single row
-     * via a radio button that will appear next to each row.
-     * If `multi`, then the user can select multiple rows
-     * via a checkbox that will appear next to each row.
-     * If false, then the user will not be able to select rows
-     * and no additional UI elements will appear.
-     * When a row is selected, its index will be contained
-     * in `selected_rows`.
+     * Denotes the format of the headers in the export data file.
+     * If `'none'`, there will be no header. If `'display'`, then the header
+     * of the data file will be be how it is currently displayed. Note that
+     * `'display'` is only supported for `'xlsx'` export_format and will behave
+     * like `'names'` for `'csv'` export format. If `'ids'` or `'names'`,
+     * then the headers of data file will be the column id or the column
+     * names, respectively
      */
-    row_selectable: PropTypes.oneOf(['single', 'multi', false]),
+    export_headers: PropTypes.oneOf(['none', 'ids', 'names', 'display']),
 
     /**
-     * `selected_cells` represents the set of cells that are selected,
-     * as an array of objects, each item similar to `active_cell`.
-     * Multiple cells can be selected by holding down shift and
-     * clicking on a different cell or holding down shift and navigating
-     * with the arrow keys.
+     * `page_action` refers to a mode of the table where
+     * not all of the rows are displayed at once: only a subset
+     * are displayed (a "page") and the next subset of rows
+     * can viewed by clicking "Next" or "Previous" buttons
+     * at the bottom of the page.
+     * Pagination is used to improve performance: instead of
+     * rendering all of the rows at once (which can be expensive),
+     * we only display a subset of them.
+     * With pagination, we can either page through data that exists
+     * in the table (e.g. page through `10,000` rows in `data` `100` rows at a time)
+     * or we can update the data on-the-fly with callbacks
+     * when the user clicks on the "Previous" or "Next" buttons.
+     * These modes can be toggled with this `page_action` parameter:
+     * `'native'`: all data is passed to the table up-front, paging logic is
+     * handled by the table;
+     * `'custom'`: data is passed to the table one page at a time, paging logic
+     * is handled via callbacks;
+     * `'none'`: disables paging, render all of the data at once.
      */
-    selected_cells: PropTypes.arrayOf(
-        PropTypes.exact({
-            row: PropTypes.number,
-            column: PropTypes.number,
-            row_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-            column_id: PropTypes.string
-        })
-    ),
+    page_action: PropTypes.oneOf(['custom', 'native', 'none']),
 
     /**
-     * `selected_rows` contains the indices of rows that
-     * are selected via the UI elements that appear when
-     * `row_selectable` is `'single'` or `'multi'`.
+     * `page_current` represents which page the user is on.
+     * Use this property to index through data in your callbacks with
+     * backend paging.
      */
-    selected_rows: PropTypes.arrayOf(PropTypes.number),
+    page_current: PropTypes.number,
 
     /**
-     * `selected_columns` contains the ids of columns that
-     * are selected via the UI elements that appear when
-     * `column_selectable` is `'single' or 'multi'`.
+     * `page_count` represents the number of the pages in the
+     * paginated table. This is really only useful when performing
+     * backend pagination, since the front end is able to use the
+     * full size of the table to calculate the number of pages.
      */
-    selected_columns: PropTypes.arrayOf(PropTypes.string),
+    page_count: PropTypes.number,
 
     /**
-     * `selected_row_ids` contains the ids of rows that
-     * are selected via the UI elements that appear when
-     * `row_selectable` is `'single'` or `'multi'`.
+     * `page_size` represents the number of rows that will be
+     * displayed on a particular page when `page_action` is `'custom'` or `'native'`
      */
-    selected_row_ids: PropTypes.arrayOf(
-        PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    ),
+    page_size: PropTypes.number,
 
     /**
-     * Dash-assigned callback that gets fired when the user makes changes.
+     * If `filter_action` is enabled, then the current filtering
+     * string is represented in this `filter_query`
+     * property.
      */
-    setProps: PropTypes.func,
+    filter_query: PropTypes.string,
 
     /**
-     * When selecting multiple cells
-     * (via clicking on a cell and then shift-clicking on another cell),
-     * `start_cell` represents the [row, column] coordinates of the cell
-     * in one of the corners of the region.
-     * `end_cell` represents the coordinates of the other corner.
+     * The `filter_action` property controls the behavior of the `filtering` UI.
+     * If `'none'`, then the filtering UI is not displayed.
+     * If `'native'`, then the filtering UI is displayed and the filtering
+     * logic is handled by the table. That is, it is performed on the data
+     * that exists in the `data` property.
+     * If `'custom'`, then the filtering UI is displayed but it is the
+     * responsibility of the developer to program the filtering
+     * through a callback (where `filter_query` or `derived_filter_query_structure` would be the input
+     * and `data` would be the output).
      */
-    start_cell: PropTypes.exact({
-        row: PropTypes.number,
-        column: PropTypes.number,
-        row_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        column_id: PropTypes.string
-    }),
+    filter_action: PropTypes.oneOfType([
+        PropTypes.oneOf(['custom', 'native', 'none']),
+        PropTypes.shape({
+            type: PropTypes.oneOf(['custom', 'native']).isRequired,
+            operator: PropTypes.oneOf(['and', 'or'])
+        })
+    ]),
 
     /**
-     * If True, then the table will be styled like a list view
-     * and not have borders between the columns.
+     * There are two `filter_options` props in the table.
+     * This is the table-level filter_options prop and there is
+     * also the column-level `filter_options` prop.
+     * These props determine whether the applicable filter relational
+     * operators will default to `sensitive` or `insensitive` comparison.
+     * If the column-level `filter_options` prop is set it overrides
+     * the table-level `filter_options` prop for that column.
      */
-    style_as_list_view: PropTypes.bool,
-
+    filter_options: PropTypes.shape({
+        case: PropTypes.oneOf(['sensitive', 'insensitive'])
+    }),
     /**
-     * `page_action` refers to a mode of the table where
-     * not all of the rows are displayed at once: only a subset
-     * are displayed (a "page") and the next subset of rows
-     * can viewed by clicking "Next" or "Previous" buttons
-     * at the bottom of the page.
-     * Pagination is used to improve performance: instead of
-     * rendering all of the rows at once (which can be expensive),
-     * we only display a subset of them.
-     * With pagination, we can either page through data that exists
-     * in the table (e.g. page through `10,000` rows in `data` `100` rows at a time)
-     * or we can update the data on-the-fly with callbacks
-     * when the user clicks on the "Previous" or "Next" buttons.
-     * These modes can be toggled with this `page_action` parameter:
-     * `'native'`: all data is passed to the table up-front, paging logic is
-     * handled by the table;
-     * `'custom'`: data is passed to the table one page at a time, paging logic
-     * is handled via callbacks;
-     * `'none'`: disables paging, render all of the data at once.
+     * The `sort_action` property enables data to be
+     * sorted on a per-column basis.
+     * If `'none'`, then the sorting UI is not displayed.
+     * If `'native'`, then the sorting UI is displayed and the sorting
+     * logic is handled by the table. That is, it is performed on the data
+     * that exists in the `data` property.
+     * If `'custom'`, the the sorting UI is displayed but it is the
+     * responsibility of the developer to program the sorting
+     * through a callback (where `sort_by` would be the input and `data`
+     * would be the output).
+     * Clicking on the sort arrows will update the
+     * `sort_by` property.
      */
-    page_action: PropTypes.oneOf(['custom', 'native', 'none']),
+    sort_action: PropTypes.oneOf(['custom', 'native', 'none']),
 
     /**
-     * `page_current` represents which page the user is on.
-     * Use this property to index through data in your callbacks with
-     * backend paging.
+     * Sorting can be performed across multiple columns
+     * (e.g. sort by country, sort within each country,
+     *  sort by year) or by a single column.
+     * NOTE - With multi-column sort, it's currently
+     * not possible to determine the order in which
+     * the columns were sorted through the UI.
+     * See [https://github.com/plotly/dash-table/issues/170](https://github.com/plotly/dash-table/issues/170)
      */
-    page_current: PropTypes.number,
+    sort_mode: PropTypes.oneOf(['single', 'multi']),
 
     /**
-     * `page_count` represents the number of the pages in the
-     * paginated table. This is really only useful when performing
-     * backend pagination, since the front end is able to use the
-     * full size of the table to calculate the number of pages.
+     * `sort_by` describes the current state
+     * of the sorting UI.
+     * That is, if the user clicked on the sort arrow
+     * of a column, then this property will be updated
+     * with the column ID and the direction
+     * (`asc` or `desc`) of the sort.
+     * For multi-column sorting, this will be a list of
+     * sorting parameters, in the order in which they were
+     * clicked.
      */
-    page_count: PropTypes.number,
+    sort_by: PropTypes.arrayOf(
+        PropTypes.exact({
+            column_id: PropTypes.string.isRequired,
+            direction: PropTypes.oneOf(['asc', 'desc']).isRequired
+        })
+    ),
 
     /**
-     * `page_size` represents the number of rows that will be
-     * displayed on a particular page when `page_action` is `'custom'` or `'native'`
+     * An array of string, number and boolean values that are treated as `None`
+     * (i.e. ignored and always displayed last) when sorting.
+     * This value will be used by columns without `sort_as_null`.
+     * Defaults to `[]`.
      */
-    page_size: PropTypes.number,
+    sort_as_null: PropTypes.arrayOf(
+        PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number,
+            PropTypes.bool
+        ])
+    ),
 
     /**
      * `dropdown` specifies dropdown options for different columns.
@@ -1147,102 +1145,94 @@ export const propTypes = {
     tooltip_duration: PropTypes.number,
 
     /**
-     * If `filter_action` is enabled, then the current filtering
-     * string is represented in this `filter_query`
-     * property.
+     * The localization specific formatting information applied to all columns in the table.
+     * This prop is derived from the [d3.formatLocale](https://github.com/d3/d3-format#formatLocale) data structure specification.
+     * When left unspecified, each individual nested prop will default to a pre-determined value.
      */
-    filter_query: PropTypes.string,
+    locale_format: PropTypes.exact({
+        /**
+         *   (default: ['$', '']). A  list of two strings representing the
+         *   prefix and suffix symbols. Typically used for currency, and implemented using d3's
+         *   currency format, but you can use this for other symbols such as measurement units.
+         */
+        symbol: PropTypes.arrayOf(PropTypes.string),
+        /**
+         * (default: '.'). The string used for the decimal separator.
+         */
+        decimal: PropTypes.string,
+        /**
+         * (default: ','). The string used for the groups separator.
+         */
+        group: PropTypes.string,
+        /**
+         * (default: [3]). A  list of integers representing the grouping pattern.
+         */
+        grouping: PropTypes.arrayOf(PropTypes.number),
+        /**
+         * A list of ten strings used as replacements for numbers 0-9.
+         */
+        numerals: PropTypes.arrayOf(PropTypes.string),
+        /**
+         * (default: '%'). The string used for the percentage symbol.
+         */
+        percent: PropTypes.string,
+        /**
+         * (default: True). Separate integers with 4-digits or less.
+         */
+        separate_4digits: PropTypes.bool
+    }),
 
     /**
-     * The `filter_action` property controls the behavior of the `filtering` UI.
-     * If `'none'`, then the filtering UI is not displayed.
-     * If `'native'`, then the filtering UI is displayed and the filtering
-     * logic is handled by the table. That is, it is performed on the data
-     * that exists in the `data` property.
-     * If `'custom'`, then the filtering UI is displayed but it is the
-     * responsibility of the developer to program the filtering
-     * through a callback (where `filter_query` or `derived_filter_query_structure` would be the input
-     * and `data` would be the output).
+     * If True, then the table will be styled like a list view
+     * and not have borders between the columns.
      */
-    filter_action: PropTypes.oneOfType([
-        PropTypes.oneOf(['custom', 'native', 'none']),
-        PropTypes.shape({
-            type: PropTypes.oneOf(['custom', 'native']).isRequired,
-            operator: PropTypes.oneOf(['and', 'or'])
-        })
-    ]),
+    style_as_list_view: PropTypes.bool,
 
     /**
-     * There are two `filter_options` props in the table.
-     * This is the table-level filter_options prop and there is
-     * also the column-level `filter_options` prop.
-     * These props determine whether the applicable filter relational
-     * operators will default to `sensitive` or `insensitive` comparison.
-     * If the column-level `filter_options` prop is set it overrides
-     * the table-level `filter_options` prop for that column.
-     */
-    filter_options: PropTypes.shape({
-        case: PropTypes.oneOf(['sensitive', 'insensitive'])
-    }),
-    /**
-     * The `sort_action` property enables data to be
-     * sorted on a per-column basis.
-     * If `'none'`, then the sorting UI is not displayed.
-     * If `'native'`, then the sorting UI is displayed and the sorting
-     * logic is handled by the table. That is, it is performed on the data
-     * that exists in the `data` property.
-     * If `'custom'`, the the sorting UI is displayed but it is the
-     * responsibility of the developer to program the sorting
-     * through a callback (where `sort_by` would be the input and `data`
-     * would be the output).
-     * Clicking on the sort arrows will update the
-     * `sort_by` property.
+     * `fill_width` toggles between a set of CSS for two common behaviors:
+     * True: The table container's width will grow to fill the available space;
+     * False: The table container's width will equal the width of its content.
      */
-    sort_action: PropTypes.oneOf(['custom', 'native', 'none']),
+    fill_width: PropTypes.bool,
 
     /**
-     * Sorting can be performed across multiple columns
-     * (e.g. sort by country, sort within each country,
-     *  sort by year) or by a single column.
-     * NOTE - With multi-column sort, it's currently
-     * not possible to determine the order in which
-     * the columns were sorted through the UI.
-     * See [https://github.com/plotly/dash-table/issues/170](https://github.com/plotly/dash-table/issues/170)
+     * The `markdown_options` property allows customization of the markdown cells behavior.
      */
-    sort_mode: PropTypes.oneOf(['single', 'multi']),
+    markdown_options: PropTypes.exact({
+        /**
+         * (default: '_blank').  The link's behavior (_blank opens the link in a
+         * new tab, _parent opens the link in the parent frame, _self opens the link in the
+         * current tab, and _top opens the link in the top frame) or a string
+         */
+        link_target: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.oneOf(['_blank', '_parent', '_self', '_top'])
+        ]),
+        /**
+         * (default: False)  If True, html may be used in markdown cells
+         * Be careful enabling html if the content being rendered can come
+         * from an untrusted user, as this may create an XSS vulnerability.
+         */
+        html: PropTypes.bool
+    }),
 
     /**
-     * `sort_by` describes the current state
-     * of the sorting UI.
-     * That is, if the user clicked on the sort arrow
-     * of a column, then this property will be updated
-     * with the column ID and the direction
-     * (`asc` or `desc`) of the sort.
-     * For multi-column sorting, this will be a list of
-     * sorting parameters, in the order in which they were
-     * clicked.
+     * The `css` property is a way to embed CSS selectors and rules
+     * onto the page.
+     * We recommend starting with the `style_*` properties
+     * before using this `css` property.
+     * Example:
+     * [
+     *     {"selector": ".dash-spreadsheet", "rule": 'font-family: "monospace"'}
+     * ]
      */
-    sort_by: PropTypes.arrayOf(
+    css: PropTypes.arrayOf(
         PropTypes.exact({
-            column_id: PropTypes.string.isRequired,
-            direction: PropTypes.oneOf(['asc', 'desc']).isRequired
+            selector: PropTypes.string.isRequired,
+            rule: PropTypes.string.isRequired
         })
     ),
 
-    /**
-     * An array of string, number and boolean values that are treated as `None`
-     * (i.e. ignored and always displayed last) when sorting.
-     * This value will be used by columns without `sort_as_null`.
-     * Defaults to `[]`.
-     */
-    sort_as_null: PropTypes.arrayOf(
-        PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.number,
-            PropTypes.bool
-        ])
-    ),
-
     /**
      * CSS styles to be applied to the outer `table` container.
      * This is commonly used for setting properties like the
@@ -1496,6 +1486,16 @@ export const propTypes = {
         PropTypes.oneOfType([PropTypes.string, PropTypes.number])
     ),
 
+    /**
+     * The ID of the table.
+     */
+    id: PropTypes.string,
+
+    /**
+     * Dash-assigned callback that gets fired when the user makes changes.
+     */
+    setProps: PropTypes.func,
+
     /**
      * Object that holds the loading state object coming from dash-renderer
      */
diff --git a/dash/development/_py_components_generation.py b/dash/development/_py_components_generation.py
index a9ade10760..40018a42c0 100644
--- a/dash/development/_py_components_generation.py
+++ b/dash/development/_py_components_generation.py
@@ -10,7 +10,9 @@
 
 
 # pylint: disable=unused-argument
-def generate_class_string(typename, props, description, namespace):
+def generate_class_string(
+    typename, props, description, namespace, prop_reorder_exceptions=None
+):
     """Dynamically generate class strings to have nicely formatted docstrings,
     keyword arguments, and repr.
     Inspired by http://jameso.be/2013/08/06/namedtuple.html
@@ -20,6 +22,7 @@ def generate_class_string(typename, props, description, namespace):
     props
     description
     namespace
+    prop_reorder_exceptions
     Returns
     -------
     string
@@ -62,11 +65,19 @@ def __init__(self, {default_argtext}):
         super({typename}, self).__init__({argtext})
 '''
 
-    filtered_props = reorder_props(filter_props(props))
+    filtered_props = (
+        filter_props(props)
+        if (prop_reorder_exceptions is not None and typename in prop_reorder_exceptions)
+        or (prop_reorder_exceptions is not None and "ALL" in prop_reorder_exceptions)
+        else reorder_props(filter_props(props))
+    )
     wildcard_prefixes = repr(parse_wildcards(props))
     list_of_valid_keys = repr(list(map(str, filtered_props.keys())))
     docstring = create_docstring(
-        component_name=typename, props=filtered_props, description=description
+        component_name=typename,
+        props=filtered_props,
+        description=description,
+        prop_reorder_exceptions=prop_reorder_exceptions,
     ).replace("\r\n", "\n")
 
     prohibit_events(props)
@@ -106,7 +117,9 @@ def __init__(self, {default_argtext}):
     )
 
 
-def generate_class_file(typename, props, description, namespace):
+def generate_class_file(
+    typename, props, description, namespace, prop_reorder_exceptions=None
+):
     """Generate a Python class file (.py) given a class string.
     Parameters
     ----------
@@ -114,6 +127,7 @@ def generate_class_file(typename, props, description, namespace):
     props
     description
     namespace
+    prop_reorder_exceptions
     Returns
     -------
     """
@@ -122,7 +136,10 @@ def generate_class_file(typename, props, description, namespace):
         + "from dash.development.base_component import "
         + "Component, _explicitize_args\n\n\n"
     )
-    class_string = generate_class_string(typename, props, description, namespace)
+
+    class_string = generate_class_string(
+        typename, props, description, namespace, prop_reorder_exceptions
+    )
     file_name = "{:s}.py".format(typename)
 
     file_path = os.path.join(namespace, file_name)
@@ -162,7 +179,9 @@ def generate_classes_files(project_shortname, metadata, *component_generators):
     return components
 
 
-def generate_class(typename, props, description, namespace):
+def generate_class(
+    typename, props, description, namespace, prop_reorder_exceptions=None
+):
     """Generate a Python class object given a class string.
     Parameters
     ----------
@@ -173,7 +192,9 @@ def generate_class(typename, props, description, namespace):
     Returns
     -------
     """
-    string = generate_class_string(typename, props, description, namespace)
+    string = generate_class_string(
+        typename, props, description, namespace, prop_reorder_exceptions
+    )
     scope = {"Component": Component, "_explicitize_args": _explicitize_args}
     # pylint: disable=exec-used
     exec(string, scope)
@@ -194,7 +215,7 @@ def required_props(props):
     return [prop_name for prop_name, prop in list(props.items()) if prop["required"]]
 
 
-def create_docstring(component_name, props, description):
+def create_docstring(component_name, props, description, prop_reorder_exceptions=None):
     """Create the Dash component docstring.
     Parameters
     ----------
@@ -210,7 +231,15 @@ def create_docstring(component_name, props, description):
         Dash component docstring
     """
     # Ensure props are ordered with children first
-    props = reorder_props(props=props)
+    props = (
+        props
+        if (
+            prop_reorder_exceptions is not None
+            and component_name in prop_reorder_exceptions
+        )
+        or (prop_reorder_exceptions is not None and "ALL" in prop_reorder_exceptions)
+        else reorder_props(props)
+    )
 
     return (
         "A{n} {name} component.\n{description}\n\nKeyword arguments:\n{args}"
diff --git a/dash/development/_r_components_generation.py b/dash/development/_r_components_generation.py
index 9afcef4629..65ac56a98c 100644
--- a/dash/development/_r_components_generation.py
+++ b/dash/development/_r_components_generation.py
@@ -452,7 +452,12 @@ def write_help_file(name, props, description, prefix, rpkg_data):
 
 # pylint: disable=too-many-arguments
 def write_class_file(
-    name, props, description, project_shortname, prefix=None, rpkg_data=None
+    name,
+    props,
+    description,
+    project_shortname,
+    prefix=None,
+    rpkg_data=None,
 ):
     props = reorder_props(props=props)
 
diff --git a/dash/development/component_generator.py b/dash/development/component_generator.py
index 79b95315aa..81813a652b 100644
--- a/dash/development/component_generator.py
+++ b/dash/development/component_generator.py
@@ -8,7 +8,6 @@
 import argparse
 import shutil
 import functools
-
 import pkg_resources
 import yaml
 
@@ -20,7 +19,6 @@
 from ._jl_components_generation import generate_struct_file
 from ._jl_components_generation import generate_module
 
-
 reserved_words = [
     "UNDEFINED",
     "REQUIRED",
@@ -38,7 +36,7 @@ class _CombinedFormatter(
     pass
 
 
-# pylint: disable=too-many-locals, too-many-arguments
+# pylint: disable=too-many-locals, too-many-arguments, too-many-branches
 def generate_components(
     components_source,
     project_shortname,
@@ -50,6 +48,7 @@ def generate_components(
     rsuggests="",
     jlprefix=None,
     metadata=None,
+    keep_prop_order=None,
 ):
 
     project_shortname = project_shortname.replace("-", "_").rstrip("/\\")
@@ -119,6 +118,14 @@ def generate_components(
             functools.partial(generate_struct_file, prefix=jlprefix)
         )
 
+    if keep_prop_order is not None:
+        keep_prop_order = [
+            component.strip(" ") for component in keep_prop_order.split(",")
+        ]
+        generator_methods[0] = functools.partial(
+            generate_class_file, prop_reorder_exceptions=keep_prop_order
+        )
+
     components = generate_classes_files(project_shortname, metadata, *generator_methods)
 
     with open(os.path.join(project_shortname, "metadata.json"), "w") as f:
@@ -201,6 +208,15 @@ def component_build_arg_parser():
         help="Specify a prefix for Dash for R component names, write "
         "components to R dir, create R package.",
     )
+    parser.add_argument(
+        "-k",
+        "--keep-prop-order",
+        default=None,
+        help="Specify a comma-separated list of components which will use the prop "
+        "order described in the component proptypes instead of alphabetically reordered "
+        "props. Pass the 'ALL' keyword to have every component retain "
+        "its original prop order.",
+    )
     return parser
 
 
@@ -216,6 +232,7 @@ def cli():
         rimports=args.r_imports,
         rsuggests=args.r_suggests,
         jlprefix=args.jl_prefix,
+        keep_prop_order=args.keep_prop_order,
     )
 
 
diff --git a/dash/development/component_loader.py b/dash/development/component_loader.py
index e66ddc65a7..352e100736 100644
--- a/dash/development/component_loader.py
+++ b/dash/development/component_loader.py
@@ -52,7 +52,7 @@ def load_components(metadata_path, namespace="default_namespace"):
         # the name of the component atm.
         name = componentPath.split("/").pop().split(".")[0]
         component = generate_class(
-            name, componentData["props"], componentData["description"], namespace
+            name, componentData["props"], componentData["description"], namespace, None
         )
 
         components.append(component)