3.0 clean offsets

CHANGELOG.md

@@ -232,4 +232,38 @@ Derived properties allow the component to expose complex state that can be usefu
         - derived_virtual_dataframe
         - derived_virtual_indices
 
-        In the event where sorting, filtering or pagination is done on the Dash Server, it is possible that some or all derived dataframes will be equal to the dataframe prop.
+        In the event where sorting, filtering or pagination is done on the Dash Server, it is possible that some or all derived dataframes will be equal to the dataframe prop.
+
+## RC2 - Clean up column offsets
+
+    - 1 new internal facing derived/controlled property:
+        columns: Columns -> columns: VisibleColumns
+        Gets rid of conditional processing for hidden columns in the cell and header factories as well as in navigation/selection handlers
+
+    - A bunch of offsets were introduced to the table in the previous development cycle (2.x -> 3.0). Turns out these offsets are neither useful or necessary
+    - Validate compatibility of filtering, sorting, pagination
+    - External facing classes and attributes
+        * (ATTRIBUTE) data-dash-column=<columnId>
+
+            .dash-cell,
+            .dash-header {
+                &[data-dash-column='ticker'] {
+                    // styling
+                }
+            }
+
+        * (CLASS) dash-cell
+        * (CLASS) dash-header
+
+        * (CLASS) dash-delete-cell
+        * (CLASS) dash-delete-header
+        * (CLASS) dash-select-cell
+        * (CLASS) dash-select-header
+
+        * (CLASS) dash-cell-value
+
+        * (CLASS) dash-freeze-left
+        * (CLASS) dash-freeze-top
+        * (CLASS) dash-spreadsheet
+        * (CLASS) dash-spreadsheet-container
+        * (CLASS) dash-spreadsheet-inner

dash_table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.1.0rc1",
+  "version": "3.1.0rc2",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

demo/App.js

@@ -42,7 +42,7 @@ class App extends Component {
                     }
                 ],
                 table_style: [
-                    { selector: '.dash-spreadsheet.freeze-left', rule: 'width: 1000px; max-width: 1000px;' }
+                    { selector: '.dash-spreadsheet.dash-freeze-left', rule: 'width: 1000px; max-width: 1000px;' }
                 ]
             }
         };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.1.0rc1",
+  "version": "3.1.0rc2",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

src/dash-table/Table.js

@@ -4,9 +4,32 @@ import PropTypes from 'prop-types';
 import RealTable from 'dash-table/components/Table';
 
 import 'dash-table/style/component.less';
+import Logger from 'core/Logger';
 
 export default class Table extends Component {
     render() {
+        const {
+            filtering,
+            sorting,
+            pagination_mode
+        } = this.props;
+
+        function isFrontEnd(value: any) {
+            return ['fe', true, false].indexOf(value) !== -1;
+        }
+
+        function isBackEnd(value: any) {
+            return ['be', false].indexOf(value) !== -1;
+        }
+
+        const isValid = isFrontEnd(pagination_mode) ||
+            (isBackEnd(filtering) && isBackEnd(sorting));
+
+        if (!isValid) {
+            Logger.error(`Invalid combination of filtering / sorting / pagination`, filtering, sorting, pagination_mode);
+            return (<div>Invalid props combination</div>);
+        }
+
         return (<RealTable {...this.props} />);
     }
 }

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

@@ -69,6 +69,7 @@ export default class Cell extends Component<ICellProps, ICellState> {
         } = this.propsWithDefaults;
 
         return [
+            'dash-cell',
             ...(active ? ['focused'] : []),
             ...(!editable ? ['cell--uneditable'] : []),
             ...(selected ? ['cell--selected'] : []),
@@ -113,7 +114,7 @@ export default class Cell extends Component<ICellProps, ICellState> {
         const classes = [
             ...(active ? ['input-active'] : []),
             ...(focused ? ['focused'] : ['unfocused']),
-            ...['cell-value']
+            ...['dash-cell-value']
         ];
 
         const attributes = {
@@ -219,11 +220,14 @@ export default class Cell extends Component<ICellProps, ICellState> {
     }
 
     render() {
+        const { property } = this.props;
+
         return (<td
             ref='td'
             tabIndex={-1}
             className={this.classes.join(' ')}
             style={this.style}
+            data-dash-column={property}
         >
             {this.renderInner()}
         </td>);

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

@@ -11,7 +11,7 @@ import { ColumnId } from 'dash-table/components/Table/props';
 export interface ICellProps {
     active: boolean;
     classes?: string[];
-    clearable: boolean;
+    clearable?: boolean;
     conditionalDropdowns?: IConditionalDropdown[];
     conditionalStyles?: IConditionalStyle[];
     datum: any;

src/dash-table/components/CellFactory.tsx

@@ -32,11 +32,8 @@ export default class CellFactory {
 
     private handleClick = (idx: number, i: number, e: any) => {
         const {
-            columns,
             editable,
             is_focused,
-            row_deletable,
-            row_selectable,
             selected_cell,
             setProps
         } = this.props;
@@ -55,25 +52,13 @@ export default class CellFactory {
             return;
         }
 
-        // visible col indices
-        const columnIndexOffset =
-            (row_deletable ? 1 : 0) +
-            (row_selectable ? 1 : 0);
-
         e.preventDefault();
-        const cellLocation: [number, number] = [idx, i + columnIndexOffset];
+        const cellLocation: [number, number] = [idx, i];
         const newProps: Partial<ICellFactoryOptions> = {
             is_focused: false,
             active_cell: cellLocation
         };
 
-        const vci: any[] = [];
-        columns.forEach((c, ci: number) => {
-            if (!c.hidden) {
-                vci.push(ci + columnIndexOffset);
-            }
-        });
-
         const selectedRows = R.uniq(R.pluck(0, selected_cell)).sort((a, b) => a - b);
         const selectedCols = R.uniq(R.pluck(1, selected_cell)).sort((a, b) => a - b);
         const minRow = selectedRows[0];
@@ -89,7 +74,7 @@ export default class CellFactory {
                     R.min(minCol, cellLocation[1]),
                     R.max(minCol, cellLocation[1]) + 1
                 )
-            ).filter(c => R.contains(c[1], vci)) as any;
+            ) as any;
         } else {
             newProps.selected_cell = [cellLocation];
         }
@@ -101,21 +86,14 @@ export default class CellFactory {
         const {
             editable,
             is_focused,
-            row_deletable,
-            row_selectable,
             setProps
         } = this.props;
 
         if (!editable) {
             return;
         }
 
-        // visible col indices
-        const columnIndexOffset =
-            (row_deletable ? 1 : 0) +
-            (row_selectable ? 1 : 0);
-
-        const cellLocation: [number, number] = [idx, i + columnIndexOffset];
+        const cellLocation: [number, number] = [idx, i];
 
         if (!is_focused) {
             e.preventDefault();
@@ -165,7 +143,7 @@ export default class CellFactory {
 
         return !row_selectable ? null : (<td
             key='select'
-            className='select-cell'
+            className='dash-select-cell'
             style={{ width: `30px`, maxWidth: `30px`, minWidth: `30px` }}
         >
             <input
@@ -194,7 +172,7 @@ export default class CellFactory {
 
         return !row_deletable ? null : (<td
             key='delete'
-            className='delete-cell'
+            className='dash-delete-cell'
             onClick={() => setProps(actions.deleteRow(idx, this.props))}
             style={{ width: `30px`, maxWidth: `30px`, minWidth: `30px` }}
         >
@@ -214,27 +192,17 @@ export default class CellFactory {
             editable,
             id,
             is_focused,
-            row_deletable,
-            row_selectable,
             selected_cell,
             viewport
         } = this.props;
 
-        const visibleColumns = columns.filter(column => !column.hidden);
-
-        const offset =
-            (row_deletable ? 1 : 0) +
-            (row_selectable ? 1 : 0);
-
         return viewport.dataframe.map((datum, viewportIdx) => {
             const realIdx = viewport.indices[viewportIdx];
 
             const deleteCell = this.rowDeleteCell(realIdx);
             const selectCell = this.rowSelectCell(realIdx);
 
-            const cells = visibleColumns.map((column, visibleIndex) => {
-                visibleIndex += offset;
-
+            const cells = columns.map((column, visibleIndex) => {
                 let legacyDropdown: any = (
                     (
                         dropdown_properties &&
@@ -249,7 +217,7 @@ export default class CellFactory {
 
                 const index = columns.indexOf(column);
 
-                const classes = [`column-${index + offset}`];
+                const classes = [`column-${index}`];
 
                 let conditionalDropdowns = column_conditional_dropdowns.find((cd: any) => cd.id === column.id);
                 let staticDropdown = column_static_dropdown.find((sd: any) => sd.id === column.id);
@@ -265,7 +233,7 @@ export default class CellFactory {
 
                 return (<Cell
                     key={`${column.id}-${visibleIndex}`}
-                    active={active_cell[0] === viewportIdx && active_cell[1] === index + offset}
+                    active={active_cell[0] === viewportIdx && active_cell[1] === index}
                     classes={classes}
                     clearable={column.clearable}
                     conditionalDropdowns={conditionalDropdowns}
@@ -278,7 +246,7 @@ export default class CellFactory {
                     onPaste={this.handlePaste}
                     onChange={this.getEventHandler(this.handleChange, realIdx, index)}
                     property={column.id}
-                    selected={R.contains([viewportIdx, index + offset], selected_cell)}
+                    selected={R.contains([viewportIdx, index], selected_cell)}
                     staticDropdown={staticDropdown}
                     staticStyle={staticStyle}
                     tableId={id}