Issue 539 - Booleans not showing (#593)

* Ensure booleans are showing

* Changelog entry

Author: dmt0

CHANGELOG.md

@@ -50,6 +50,9 @@ multi-line & ellipsis with `style_data` and other style props.
 [#583](https://github.com/plotly/dash-table/issues/583)
 - Fix regression when editing the content of a cell in a scrolled virtualized table
 
+[#539](https://github.com/plotly/dash-table/issues/539)
+- Fix bug where boolean values are not showing up in the table
+
 ## [4.2.0] - 2019-08-27
 ### Added
 [#317](https://github.com/plotly/dash-table/issues/317)

src/dash-table/components/CellLabel/index.tsx

@@ -17,7 +17,9 @@ export default class CellLabel extends PureComponent<IProps> {
         return (<div
             className={className}
         >
-            {value}
+            {typeof value === 'boolean' ?
+                value.toString() :
+                value}
         </div>);
     }
 }

src/dash-table/components/Table/props.ts

@@ -203,7 +203,7 @@ interface IDatumObject {
 
 export interface IDropdownValue {
     label: string;
-    value: string | number;
+    value: string | number | boolean;
 }
 
 export interface IDropdown {

src/dash-table/dash/DataTable.js

@@ -757,7 +757,8 @@ export const propTypes = {
             label: PropTypes.string.isRequired,
             value: PropTypes.oneOfType([
                 PropTypes.number,
-                PropTypes.string
+                PropTypes.string,
+                PropTypes.bool
             ]).isRequired
         })).isRequired
     })),
@@ -779,7 +780,8 @@ export const propTypes = {
             label: PropTypes.string.isRequired,
             value: PropTypes.oneOfType([
                 PropTypes.number,
-                PropTypes.string
+                PropTypes.string,
+                PropTypes.bool
             ]).isRequired
         })).isRequired
     })),
@@ -797,7 +799,8 @@ export const propTypes = {
                     label: PropTypes.string.isRequired,
                     value: PropTypes.oneOfType([
                         PropTypes.number,
-                        PropTypes.string
+                        PropTypes.string,
+                        PropTypes.bool
                     ]).isRequired
                 })).isRequired
             })

tests/visual/percy-storybook/Types.percy.tsx

@@ -0,0 +1,72 @@
+import * as R from 'ramda';
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import DataTable from 'dash-table/dash/DataTable';
+
+const setProps = () => { };
+const columns: { name: string[]; id: string; presentation?: string }[] = [
+  { name: ['String'], id: 'string' },
+  { name: ['Number'], id: 'number' },
+  { name: ['Date'], id: 'date' },
+  { name: ['Boolean'], id: 'boolean' },
+  { name: ['Any'], id: 'any' },
+];
+
+const columns_dd = columns.map(i => ({...i, presentation: 'dropdown'}));
+
+storiesOf('DashTable/Types', module)
+    .add('types input', () => (<DataTable
+        setProps={setProps}
+        id='types input'
+        data={[
+            { string: 'Montreal', number: 1, date: '2015-01-01', boolean: true, any: 'Montreal' },
+            { string: 'Vermont', number: 2, date: '2015-10-24', boolean: false, any: 1 },
+            { string: 'New York City' , number: 3, date: '2016-05-10', boolean: true, any: '2015-01-01' },
+            { string: 'Boston', number: 4, date: '2017-11-11', boolean: false, any: true },
+        ]}
+        columns={columns}
+    />))
+    .add('types dropdown', () => (<DataTable
+      setProps={setProps}
+      id='types dropdown'
+      data={[
+          { string: 'Montreal', number: 1, date: '2015-01-01', boolean: true, any: 'Montreal' },
+          { string: 'Vermont', number: 2, date: '2015-10-24', boolean: false, any: 1 },
+          { string: 'New York City' , number: 3, date: '2016-05-10', boolean: true, any: '2015-01-01' },
+          { string: 'Boston', number: 4, date: '2017-11-11', boolean: false, any: true },
+      ]}
+      columns={columns_dd}
+      editable={false}
+      dropdown={{
+          string: {
+              options: R.map(
+                  i => ({ label: `label: ${i}`, value: i }),
+                  ['Montreal', 'Vermont', 'New York City', 'Boston']
+              )
+          },
+          number: {
+              options: R.map(
+                  i => ({ label: `label: ${i}`, value: i }),
+                  [1, 2, 3, 4]
+              )
+          },
+          date: {
+            options: R.map(
+                i => ({ label: `label: ${i}`, value: i }),
+                ['2015-01-01', '2015-10-24', '2016-05-10', '2017-11-11']
+            )
+          },
+          boolean: {
+              options: R.map(
+                  i => ({ label: `label: ${i}`, value: i }),
+                  [true, false]
+              )
+          },
+          any: {
+              options: R.map(
+                  i => ({ label: `label: ${i}`, value: i }),
+                  ['Montreal', 1, '2015-01-01', true]
+              )
+          }
+    }}
+  />));