diff --git a/CHANGELOG.md b/CHANGELOG.md index d4724a721..169571296 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/dash-table/components/CellLabel/index.tsx b/src/dash-table/components/CellLabel/index.tsx index 488204913..0c43ef44b 100644 --- a/src/dash-table/components/CellLabel/index.tsx +++ b/src/dash-table/components/CellLabel/index.tsx @@ -17,7 +17,9 @@ export default class CellLabel extends PureComponent { return (
- {value} + {typeof value === 'boolean' ? + value.toString() : + value}
); } } \ No newline at end of file diff --git a/src/dash-table/components/Table/props.ts b/src/dash-table/components/Table/props.ts index 9b7aa1f6c..28c0a6884 100644 --- a/src/dash-table/components/Table/props.ts +++ b/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 { diff --git a/src/dash-table/dash/DataTable.js b/src/dash-table/dash/DataTable.js index bf3b28081..fe38db9bc 100644 --- a/src/dash-table/dash/DataTable.js +++ b/src/dash-table/dash/DataTable.js @@ -749,7 +749,8 @@ export const propTypes = { label: PropTypes.string.isRequired, value: PropTypes.oneOfType([ PropTypes.number, - PropTypes.string + PropTypes.string, + PropTypes.bool ]).isRequired })).isRequired })), @@ -771,7 +772,8 @@ export const propTypes = { label: PropTypes.string.isRequired, value: PropTypes.oneOfType([ PropTypes.number, - PropTypes.string + PropTypes.string, + PropTypes.bool ]).isRequired })).isRequired })), @@ -789,7 +791,8 @@ export const propTypes = { label: PropTypes.string.isRequired, value: PropTypes.oneOfType([ PropTypes.number, - PropTypes.string + PropTypes.string, + PropTypes.bool ]).isRequired })).isRequired }) diff --git a/tests/visual/percy-storybook/Types.percy.tsx b/tests/visual/percy-storybook/Types.percy.tsx new file mode 100644 index 000000000..83d635ffb --- /dev/null +++ b/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', () => ()) + .add('types dropdown', () => ( ({ 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] + ) + } + }} + />)); \ No newline at end of file