diff --git a/components/dash-core-components/src/components/Checklist.react.js b/components/dash-core-components/src/components/Checklist.react.js
index 22f3d68af5..2ffa1299f4 100644
--- a/components/dash-core-components/src/components/Checklist.react.js
+++ b/components/dash-core-components/src/components/Checklist.react.js
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import {append, includes, without} from 'ramda';
 import React, {Component} from 'react';
+import {optionsType} from "../utils/sharedPropTypes";
+import {mapOptions} from "../utils/shorthandMappers";
 
 /**
  * Checklist is a component that encapsulates several checkboxes.
@@ -17,6 +19,7 @@ export default class Checklist extends Component {
             inputStyle,
             labelClassName,
             labelStyle,
+            inline,
             options,
             setProps,
             style,
@@ -33,10 +36,13 @@ export default class Checklist extends Component {
                 style={style}
                 className={className}
             >
-                {options.map(option => (
+                {mapOptions(options).map(option => (
                     <label
                         key={option.value}
-                        style={labelStyle}
+                        style={{
+                            ...{display: inline ? 'inline-block' : "block"},
+                            ...labelStyle
+                        }}
                         className={labelClassName}
                     >
                         <input
@@ -64,6 +70,13 @@ export default class Checklist extends Component {
 }
 
 Checklist.propTypes = {
+    /**
+     * An array of dictionaries as [{label: "Label", value: "Value"}],
+     * OR an array of options as ["Option 1", "Option 2"]
+     * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
+     */
+    options: optionsType,
+
     /**
      * The ID of this component, used to identify dash components
      * in callbacks. The ID needs to be unique across all of the
@@ -71,32 +84,6 @@ Checklist.propTypes = {
      */
     id: PropTypes.string,
 
-    /**
-     * An array of options
-     */
-    options: PropTypes.arrayOf(
-        PropTypes.exact({
-            /**
-             * The checkbox's label
-             */
-            label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * The value of the checkbox. This value
-             * corresponds to the items specified in the
-             * `value` property.
-             */
-            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * If true, this checkbox is disabled and can't be clicked on.
-             */
-            disabled: PropTypes.bool,
-        })
-    ),
-
     /**
      * The currently selected value
      */
@@ -130,6 +117,11 @@ Checklist.propTypes = {
      */
     labelStyle: PropTypes.object,
 
+    /**
+     * Shorthand for applying {'display': 'inline-block'} labelStyle
+     */
+    inline: PropTypes.bool,
+
     /**
      * The class of the <label> that wraps the checkbox input
      *  and the option's label
@@ -194,6 +186,7 @@ Checklist.defaultProps = {
     inputClassName: '',
     labelStyle: {},
     labelClassName: '',
+    inline: false,
     options: [],
     value: [],
     persisted_props: ['value'],
diff --git a/components/dash-core-components/src/components/Dropdown.react.js b/components/dash-core-components/src/components/Dropdown.react.js
index 604cebfe7c..28a7fe3377 100644
--- a/components/dash-core-components/src/components/Dropdown.react.js
+++ b/components/dash-core-components/src/components/Dropdown.react.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, {Component, lazy, Suspense} from 'react';
 import dropdown from '../utils/LazyLoader/dropdown';
+import {optionsType} from "../utils/sharedPropTypes";
 
 const RealDropdown = lazy(dropdown);
 
@@ -25,6 +26,13 @@ export default class Dropdown extends Component {
 }
 
 Dropdown.propTypes = {
+    /**
+     * An array of dictionaries as [{label: "Label", value: "Value"}],
+     * OR an array of options as ["Option 1", "Option 2"]
+     * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
+     */
+    options: optionsType,
+
     /**
      * The ID of this component, used to identify dash components
      * in callbacks. The ID needs to be unique across all of the
@@ -32,40 +40,6 @@ Dropdown.propTypes = {
      */
     id: PropTypes.string,
 
-    /**
-     * An array of options {label: [string|number], value: [string|number]},
-     * an optional disabled field can be used for each option
-     */
-    options: PropTypes.arrayOf(
-        PropTypes.exact({
-            /**
-             * The dropdown's label
-             */
-            label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * The value of the dropdown. This value
-             * corresponds to the items specified in the
-             * `value` property.
-             */
-            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * If true, this option is disabled and cannot be selected.
-             */
-            disabled: PropTypes.bool,
-
-            /**
-             * The HTML 'title' attribute for the option. Allows for
-             * information on hover. For more information on this attribute,
-             * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
-             */
-            title: PropTypes.string,
-        })
-    ),
-
     /**
      * The value of the input. If `multi` is false (the default)
      * then value is just a string that corresponds to the values
diff --git a/components/dash-core-components/src/components/RadioItems.react.js b/components/dash-core-components/src/components/RadioItems.react.js
index 8c2ef151b1..0ff23a62f1 100644
--- a/components/dash-core-components/src/components/RadioItems.react.js
+++ b/components/dash-core-components/src/components/RadioItems.react.js
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import './css/react-select@1.0.0-rc.3.min.css';
+import {optionsType} from "../utils/sharedPropTypes";
+import {mapOptions} from "../utils/shorthandMappers";
 
 /**
  * RadioItems is a component that encapsulates several radio item inputs.
@@ -19,6 +21,7 @@ export default class RadioItems extends Component {
             inputStyle,
             labelClassName,
             labelStyle,
+            inline,
             options,
             setProps,
             loading_state,
@@ -38,9 +41,12 @@ export default class RadioItems extends Component {
                 className={className}
                 style={style}
             >
-                {options.map(option => (
+                {mapOptions(options).map(option => (
                     <label
-                        style={labelStyle}
+                        style={{
+                            ...{display: inline ? 'inline-block' : "block"},
+                            ...labelStyle
+                        }}
                         className={labelClassName}
                         key={option.value}
                     >
@@ -63,6 +69,13 @@ export default class RadioItems extends Component {
 }
 
 RadioItems.propTypes = {
+    /**
+     * An array of dictionaries as [{label: "Label", value: "Value"}],
+     * OR an array of options as ["Option 1", "Option 2"]
+     * OR an Object of options as {"Label 1": "Value 1", "Label 2": "Value 2"}
+     */
+    options: optionsType,
+
     /**
      * The ID of this component, used to identify dash components
      * in callbacks. The ID needs to be unique across all of the
@@ -70,32 +83,6 @@ RadioItems.propTypes = {
      */
     id: PropTypes.string,
 
-    /**
-     * An array of options
-     */
-    options: PropTypes.arrayOf(
-        PropTypes.exact({
-            /**
-             * The radio item's label
-             */
-            label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * The value of the radio item. This value
-             * corresponds to the items specified in the
-             * `value` property.
-             */
-            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * If true, this radio item is disabled and can't be clicked on.
-             */
-            disabled: PropTypes.bool,
-        })
-    ),
-
     /**
      * The currently selected value
      */
@@ -127,6 +114,11 @@ RadioItems.propTypes = {
      */
     labelStyle: PropTypes.object,
 
+    /**
+     * Shorthand for applying {'display': 'inline-block'} labelStyle
+     */
+    inline: PropTypes.bool,
+
     /**
      * The class of the <label> that wraps the radio input
      *  and the option's label
diff --git a/components/dash-core-components/src/components/RangeSlider.react.js b/components/dash-core-components/src/components/RangeSlider.react.js
index 2b293044b5..c5f050ad7e 100644
--- a/components/dash-core-components/src/components/RangeSlider.react.js
+++ b/components/dash-core-components/src/components/RangeSlider.react.js
@@ -19,6 +19,16 @@ export default class RangeSlider extends Component {
 }
 
 RangeSlider.propTypes = {
+    /**
+     * Minimum allowed value of the slider
+     */
+    min: PropTypes.number,
+
+    /**
+     * Maximum allowed value of the slider
+     */
+    max: PropTypes.number,
+
     /**
      * The ID of this component, used to identify dash components
      * in callbacks. The ID needs to be unique across all of the
@@ -88,16 +98,6 @@ RangeSlider.propTypes = {
      */
     included: PropTypes.bool,
 
-    /**
-     * Minimum allowed value of the slider
-     */
-    min: PropTypes.number,
-
-    /**
-     * Maximum allowed value of the slider
-     */
-    max: PropTypes.number,
-
     /**
      * pushable could be set as true to allow pushing of
      * surrounding handles when moving an handle.
diff --git a/components/dash-core-components/src/fragments/Dropdown.react.js b/components/dash-core-components/src/fragments/Dropdown.react.js
index 2f819b353d..e0633c819b 100644
--- a/components/dash-core-components/src/fragments/Dropdown.react.js
+++ b/components/dash-core-components/src/fragments/Dropdown.react.js
@@ -7,6 +7,7 @@ import '../components/css/react-virtualized@9.9.0.css';
 import '../components/css/Dropdown.css';
 
 import {propTypes, defaultProps} from '../components/Dropdown.react';
+import {mapOptions} from "../utils/shorthandMappers";
 
 // Custom tokenizer, see https://github.com/bvaughn/js-search/issues/43
 // Split on spaces
@@ -25,9 +26,12 @@ const DELIMETER = ',';
 export default class Dropdown extends Component {
     constructor(props) {
         super(props);
+        const formattedOptions = mapOptions(props.options)
+
         this.state = {
+            options: formattedOptions,
             filterOptions: createFilterOptions({
-                options: props.options,
+                options: formattedOptions,
                 tokenizer: TOKENIZER,
             }),
         };
@@ -35,9 +39,12 @@ export default class Dropdown extends Component {
 
     UNSAFE_componentWillReceiveProps(newProps) {
         if (newProps.options !== this.props.options) {
+            const formattedOptions = mapOptions(newProps.options)
+
             this.setState({
+                options: formattedOptions,
                 filterOptions: createFilterOptions({
-                    options: newProps.options,
+                    options: formattedOptions,
                     tokenizer: TOKENIZER,
                 }),
             });
@@ -49,19 +56,19 @@ export default class Dropdown extends Component {
             id,
             clearable,
             multi,
-            options,
             setProps,
             style,
             loading_state,
             value,
         } = this.props;
-        const {filterOptions} = this.state;
+        const {options, filterOptions} = this.state;
         let selectedValue;
         if (type(value) === 'array') {
             selectedValue = value.join(DELIMETER);
         } else {
             selectedValue = value;
         }
+
         return (
             <div
                 id={id}
@@ -98,7 +105,7 @@ export default class Dropdown extends Component {
                     backspaceRemoves={clearable}
                     deleteRemoves={clearable}
                     inputProps={{autoComplete: 'off'}}
-                    {...omit(['setProps', 'value'], this.props)}
+                    {...omit(['setProps', 'value', 'options'], this.props)}
                 />
             </div>
         );
diff --git a/components/dash-core-components/src/fragments/RangeSlider.react.js b/components/dash-core-components/src/fragments/RangeSlider.react.js
index a8f4e8c81d..7825f0d2bc 100644
--- a/components/dash-core-components/src/fragments/RangeSlider.react.js
+++ b/components/dash-core-components/src/fragments/RangeSlider.react.js
@@ -7,6 +7,56 @@ import 'rc-slider/assets/index.css';
 
 import {propTypes, defaultProps} from '../components/RangeSlider.react';
 
+/**
+ * Truncate marks if they are out of Slider interval
+ */
+const truncateMarks = (min, max, marks) => pickBy(
+    (k, mark) => mark >= min && mark <= max,
+    marks
+)
+
+/**
+ * Set marks to min and max if not defined, truncate otherwise
+ */
+const calcMarks = (min, max, marks) => {
+    if (!marks) {
+        return {[min]: min, [max]: max}
+    }
+
+    return truncateMarks(min, max, marks)
+}
+
+/**
+ * Calculate default step if not defined
+ */
+const calcStep = (min, max, step) => {
+    if (step !== undefined) {
+        return step
+    }
+
+    const size = Math.abs(max - min) // interval size
+    /**
+     * Size multiplied by 10^i to get a nice step value at the end (0.1, 1, 10, 100, ...)
+     */
+    const divident = size
+        .toString()
+        .replace('.', '') // removes decimal point
+        .replace(/^(\d*?[1-9])0+$/, "$1") // removes trailing zeros
+
+    return size / divident
+}
+
+/**
+ * Calculate default value if not defined
+ */
+const calcValue = (min, max, value) => {
+    if (value !== undefined) {
+        return value
+    }
+
+    return [min, max]
+}
+
 export default class RangeSlider extends Component {
     constructor(props) {
         super(props);
@@ -14,7 +64,12 @@ export default class RangeSlider extends Component {
             ? createSliderWithTooltip(Range)
             : Range;
         this._computeStyle = computeSliderStyle();
-        this.state = {value: props.value};
+
+        const {min, max, value, setProps} = props
+        this.state = {value};
+        if (!value) {
+            setProps({value: calcValue(min, max, value)})
+        }
     }
 
     UNSAFE_componentWillReceiveProps(newProps) {
@@ -46,6 +101,10 @@ export default class RangeSlider extends Component {
             updatemode,
             vertical,
             verticalHeight,
+            min,
+            max,
+            marks,
+            step,
         } = this.props;
         const value = this.state.value;
 
@@ -62,13 +121,6 @@ export default class RangeSlider extends Component {
             tipProps = tooltip;
         }
 
-        const truncatedMarks =
-            this.props.marks &&
-            pickBy(
-                (k, mark) => mark >= this.props.min && mark <= this.props.max,
-                this.props.marks
-            );
-
         return (
             <div
                 id={id}
@@ -101,8 +153,9 @@ export default class RangeSlider extends Component {
                         getTooltipContainer: node => node,
                     }}
                     style={{position: 'relative'}}
-                    value={value}
-                    marks={truncatedMarks}
+                    value={calcValue(min, max, value)}
+                    marks={calcMarks(min, max, marks)}
+                    step={calcStep(min, max, step)}
                     {...omit(
                         [
                             'className',
@@ -112,6 +165,7 @@ export default class RangeSlider extends Component {
                             'marks',
                             'updatemode',
                             'verticalHeight',
+                            'step',
                         ],
                         this.props
                     )}
diff --git a/components/dash-core-components/src/utils/sharedPropTypes.js b/components/dash-core-components/src/utils/sharedPropTypes.js
new file mode 100644
index 0000000000..5d79a8e18b
--- /dev/null
+++ b/components/dash-core-components/src/utils/sharedPropTypes.js
@@ -0,0 +1,47 @@
+import PropTypes from "prop-types";
+
+/**
+ * An array of options {label: [string|number], value: [string|number]},
+ * an optional disabled field can be used for each option
+ */
+const defaultOptionType = PropTypes.arrayOf(
+    PropTypes.exact({
+        /**
+         * The option's label
+         */
+        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+            .isRequired,
+
+        /**
+         * The value of the option. This value
+         * corresponds to the items specified in the
+         * `value` property.
+         */
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+            .isRequired,
+
+        /**
+         * If true, this option is disabled and cannot be selected.
+         */
+        disabled: PropTypes.bool,
+
+        /**
+         * The HTML 'title' attribute for the option. Allows for
+         * information on hover. For more information on this attribute,
+         * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
+         */
+        title: PropTypes.string,
+    })
+)
+
+/**
+ * Array of options as string[]
+ */
+const optionArrayShorthandType = PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
+
+/**
+ * Object of options as {label: value}[]
+ */
+const optionObjectShorthandType = PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
+
+export const optionsType = PropTypes.oneOfType([defaultOptionType, optionArrayShorthandType, optionObjectShorthandType])
diff --git a/components/dash-core-components/src/utils/shorthandMappers.js b/components/dash-core-components/src/utils/shorthandMappers.js
new file mode 100644
index 0000000000..fb61edc305
--- /dev/null
+++ b/components/dash-core-components/src/utils/shorthandMappers.js
@@ -0,0 +1,17 @@
+import {type} from "ramda";
+
+/**
+ * Converts shorthand option formats to the format ingestible by dropdown component
+ * //todo: explain
+ */
+export const mapOptions = (options) => {
+    if (type(options[0]) === 'String') {
+        return options.map((option) => ({label: option, value: option}))
+    }
+
+    if (type(options) === 'Object') {
+        return Object.entries(options).map(([label, value]) => ({label, value}))
+    }
+
+    return options
+}
diff --git a/components/dash-table/src/dash-table/dash/DataTable.js b/components/dash-table/src/dash-table/dash/DataTable.js
index 0132fb62bc..3d527d9756 100644
--- a/components/dash-table/src/dash-table/dash/DataTable.js
+++ b/components/dash-table/src/dash-table/dash/DataTable.js
@@ -109,6 +109,30 @@ export const defaultProps = {
 };
 
 export const propTypes = {
+    /**
+     * The contents of the table.
+     * The keys of each item in data should match the column IDs.
+     * Each item can also have an 'id' key, whose value is its row ID. If there
+     * is a column with ID='id' this will display the row ID, otherwise it is
+     * just used to reference the row for selections, filtering, etc.
+     * Example:
+     * [
+     *      {'column-1': 4.5, 'column-2': 'montreal', 'column-3': 'canada'},
+     *      {'column-1': 8, 'column-2': 'boston', 'column-3': 'america'}
+     * ]
+     *
+     * Shorthand example containing columns, colums property can be omitted this way:
+     * {
+     *   "columns": ["Fist Column", "Second Column"],
+     *   "data": [
+     *     ["First Value", "Second Value"],
+     *     ["First Value", "Second Value"],
+     *   ]
+     * }
+     *
+     */
+    data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+
     /**
      * 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.
@@ -510,20 +534,6 @@ export const propTypes = {
         })
     ),
 
-    /**
-     * The contents of the table.
-     * The keys of each item in data should match the column IDs.
-     * Each item can also have an 'id' key, whose value is its row ID. If there
-     * is a column with ID='id' this will display the row ID, otherwise it is
-     * just used to reference the row for selections, filtering, etc.
-     * Example:
-     * [
-     *      {'column-1': 4.5, 'column-2': 'montreal', 'column-3': 'canada'},
-     *      {'column-1': 8, 'column-2': 'boston', 'column-3': 'america'}
-     * ]
-     */
-    data: PropTypes.arrayOf(PropTypes.object),
-
     /**
      * The previous state of `data`. `data_previous`
      * has the same structure as `data` and it will be updated
diff --git a/components/dash-table/src/dash-table/dash/fragments/DataTable.js b/components/dash-table/src/dash-table/dash/fragments/DataTable.js
index cc94b27baa..aac9a0711e 100644
--- a/components/dash-table/src/dash-table/dash/fragments/DataTable.js
+++ b/components/dash-table/src/dash-table/dash/fragments/DataTable.js
@@ -8,6 +8,8 @@ import Sanitizer from '../Sanitizer';
 
 import {propTypes, defaultProps} from '../DataTable';
 
+import resolveShorthandData from '../shorthands'
+
 export default class DataTable extends Component {
     constructor(props) {
         super(props);
@@ -21,7 +23,9 @@ export default class DataTable extends Component {
             return <div>Invalid props combination</div>;
         }
 
-        const sanitizedProps = this.sanitizer.sanitize(this.props);
+        const resolvedProps = resolveShorthandData(this.props)
+        const sanitizedProps = this.sanitizer.sanitize(resolvedProps);
+        
         return this.props.id ? (
             <RealTable {...sanitizedProps} />
         ) : (
diff --git a/components/dash-table/src/dash-table/dash/shorthands.js b/components/dash-table/src/dash-table/dash/shorthands.js
new file mode 100644
index 0000000000..e63d2f856b
--- /dev/null
+++ b/components/dash-table/src/dash-table/dash/shorthands.js
@@ -0,0 +1,25 @@
+const generateRecord = (columns, dataRow) => {
+    const record = {}
+    for (const [i, v] of dataRow.entries()) {
+        Object.assign(record, {[columns[i]]:v})
+    }
+
+    return record
+}
+
+export default props => {
+    const {data = [], columns = []} = props
+    let resolvedColumns = columns
+    let resolvedData = data
+
+    if (data.columns) {
+        resolvedData = data.data.map(dataRow => generateRecord(data.columns, dataRow))
+        resolvedColumns = data.columns.map(name => ({id: name, name}))
+    }
+
+    return {
+        ...props,
+        data: resolvedData,
+        columns: resolvedColumns
+    }
+}