Default Styles

CHANGELOG.md

@@ -7,7 +7,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Change default styles [#193](https://github.com/plotly/dash-table/pull/193) [#150](https://github.com/plotly/dash-table/issues/150)
     - prop `content_style` defaults to 'grow' instead of 'fit'
     - prop `style_table` width nested property defaults to '100%' if not provided
-    - update default font-family from 'monospace' to `'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace`
+- Change cell styling and filter display [#196](https://github.com/plotly/dash-table/pull/196) [#150](https://github.com/plotly/dash-table/issues/150)
+    - uneditable cells can be clicked & navigated, the mouse cursor is the default one
+    - filter inputs have a placeholder that is visible on hover and focus
+    - first filter input placeholder is always visible
 
 ## [3.1.0-rc18] - 2018-10-31
 ### Changed

src/core/components/IsolatedInput/index.tsx

@@ -3,6 +3,7 @@ import React, { PureComponent } from 'react';
 type Submit = (value: string | undefined) => void;
 
 interface IProps {
+    placeholder?: string;
     updateOnBlur?: boolean;
     updateOnSubmit?: boolean;
     stopPropagation?: boolean;
@@ -51,6 +52,7 @@ export default class IsolatedInput extends PureComponent<IProps, IState> {
 
     render() {
         const {
+            placeholder,
             stopPropagation,
             updateOnBlur,
             updateOnSubmit
@@ -67,6 +69,7 @@ export default class IsolatedInput extends PureComponent<IProps, IState> {
             type='text'
             value={this.state.value || ''}
             onChange={this.handleChange}
+            placeholder={placeholder}
             {...props}
         />);
     }

src/dash-table/components/CellFactory.tsx

@@ -65,7 +65,6 @@ export default class CellFactory {
             active_cell,
             columns,
             viewport.data,
-            editable,
             selected_cells
         );
 

src/dash-table/components/Filter/Column.tsx

@@ -10,7 +10,6 @@ interface IColumnFilterProps {
     classes: string;
     columnId: ColumnId;
     isValid: boolean;
-    property: ColumnId;
     setFilter: SetFilter;
     value?: string;
 }
@@ -60,6 +59,7 @@ export default class ColumnFilter extends PureComponent<IColumnFilterProps, ICol
         >
             <IsolatedInput
                 value={value}
+                placeholder={`filter data...`}
                 stopPropagation={true}
                 submit={this.submit}
             />

src/dash-table/components/FilterFactory.tsx

@@ -204,7 +204,6 @@ export default class FilterFactory {
                     classes={`dash-filter column-${index}`}
                     columnId={column.id}
                     isValid={this.isFragmentValidOrNull(column.id)}
-                    property={column.id}
                     setFilter={this.getEventHandler(this.onChange, column.id, this.ops, setFilter)}
                     value={this.ops.get(column.id.toString())}
                 />);

src/dash-table/components/Table/Table.less

@@ -128,13 +128,29 @@
             }
         }
 
-        .dash-filter.invalid {
-            & when (@isListView = True) {
-                .inset-shadow(red, 0px, 0px, 0px, -1px);
+        .dash-filter {
+            input::placeholder {
+                color: inherit;
+                font-size: 0.8em;
+                padding-right: 5px;
+            }
+
+            & + .dash-filter {
+                &:not(:hover):not(:focus-within) {
+                    input::placeholder {
+                        color: transparent;
+                    }
+                }
             }
 
-            & when (@isListView = False) {
-                .inset-shadow(red, 1px, 1px, -1px, -1px);
+            &.invalid {
+                & when (@isListView = True) {
+                    .inset-shadow(red, 0px, 0px, 0px, -1px);
+                }
+
+                & when (@isListView = False) {
+                    .inset-shadow(red, 1px, 1px, -1px, -1px);
+                }
             }
         }
 }
@@ -384,7 +400,7 @@
     .dash-spreadsheet-inner table {
         border-collapse: collapse;
 
-        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+        font-family: monospace;
         --accent: hotpink;
         --border: lightgrey;
         --text-color: rgb(60, 60, 60);
@@ -512,11 +528,6 @@
         color: var(--accent);
     }
 
-    .cell--uneditable,
-    .cell--uneditable input {
-        cursor: not-allowed;
-    }
-
     .expanded-row {
         box-shadow: inset 2px 0px 0px 0px var(--accent),
             inset -1px 0px 0px 0px var(--border);

src/dash-table/derived/cell/wrappers.tsx

@@ -7,7 +7,6 @@ import Cell from 'dash-table/components/Cell';
 import isActiveCell from 'dash-table/derived/cell/isActive';
 import isSelectedCell from 'dash-table/derived/cell/isSelected';
 import memoizerCache from 'core/memoizerCache';
-import isEditable from './isEditable';
 
 type Key = [number, number];
 type ElementCacheFn = (
@@ -23,7 +22,6 @@ function getter(
     activeCell: ActiveCell,
     columns: VisibleColumns,
     data: Data,
-    editable: boolean,
     selectedCells: SelectedCells
 ): JSX.Element[][] {
     return R.addIndex<Datum, JSX.Element[]>(R.map)(
@@ -36,7 +34,6 @@ function getter(
                     'dash-cell' +
                     ` column-${columnIndex}` +
                     (active ? ' focused' : '') +
-                    (!isEditable(editable, column.editable) ? ' cell--uneditable' : '') +
                     (selected ? ' cell--selected' : '') +
                     (column.type === ColumnType.Dropdown ? ' dropdown' : '');
 
@@ -51,9 +48,8 @@ function getter(
 function decorator(_id: string): ((
     activeCell: ActiveCell,
     columns: VisibleColumns,
-    columnConditionalStyle: any,
-    columnStaticStyle: any,
-    data: Data
+    data: Data,
+    selectedCells: SelectedCells
 ) => JSX.Element[][]) {
     const elementCache = memoizerCache<Key, [boolean, string, number, ColumnId], JSX.Element>(
         (active: boolean, classes: string, columnIndex: number, columnId: ColumnId) => (<Cell

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

@@ -0,0 +1,40 @@
+import * as R from 'ramda';
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import random from 'core/math/random';
+import DataTable from 'dash-table/DataTable';
+
+const setProps = () => { };
+
+const data = (() => {
+    const r = random(1);
+
+    return R.range(0, 5).map(() => (
+        ['a', 'b', 'c'].reduce((obj: any, key) => {
+            obj[key] = Math.floor(r() * 1000);
+            return obj;
+        }, {})
+    ));
+})();
+
+let props = {
+    setProps,
+    id: 'table',
+    data: data,
+    filtering: true,
+    style_cell: {
+        width: 100,
+        min_width: 100,
+        max_width: 100
+    }
+};
+
+storiesOf('DashTable/Filtering', module)
+    .add('with a single column', () => (<DataTable
+        {...props}
+        columns={['a'].map(id => ({ id: id, name: id.toUpperCase() }))}
+    />))
+    .add('with multiple columns', () => (<DataTable
+        {...props}
+        columns={['a', 'b', 'c'].map(id => ({ id: id, name: id.toUpperCase() }))}
+    />));