Removing FixedDataTableCell div

dist/fixed-data-table-base.css

@@ -106,7 +106,6 @@
 
 .fixedDataTableCellLayout_columnResizerContainer {
   position: absolute;
-  right: 0px;
   width: 6px;
   z-index: 1;
 }

dist/fixed-data-table-base.min.css

@@ -106,7 +106,6 @@
 
 .fixedDataTableCellLayout_columnResizerContainer {
   position: absolute;
-  right: 0px;
   width: 6px;
   z-index: 1;
 }

dist/fixed-data-table.css

@@ -106,7 +106,6 @@
 
 .fixedDataTableCellLayout_columnResizerContainer {
   position: absolute;
-  right: 0px;
   width: 6px;
   z-index: 1;
 }

dist/fixed-data-table.min.css

@@ -106,7 +106,6 @@
 
 .fixedDataTableCellLayout_columnResizerContainer {
   position: absolute;
-  right: 0px;
   width: 6px;
   z-index: 1;
 }

examples/AutoScrollExample.js

@@ -5,14 +5,15 @@
 'use strict';
 
 import FakeObjectDataListStore from './helpers/FakeObjectDataListStore';
-import { ImageCell, LinkCell } from './helpers/cells';
+import { ImageCell, LinkCell, TextCell } from './helpers/cells';
 import { Table, Column, DataCell, Plugins } from 'fixed-data-table-2';
 import React from 'react';
+import cx from '../src/vendor_upstream/stubs/cx';
+import joinClasses from '../src/vendor_upstream/core/joinClasses';
 
 class AutoScrollExample extends React.Component {
   constructor(props) {
     super(props);
-
     this.state = {
       dataList: new FakeObjectDataListStore(10000),
       scrollTop: 0,
@@ -23,18 +24,46 @@ class AutoScrollExample extends React.Component {
       columns: [],
       columnGroups: [],
       columnsCount: 10000,
+      shouldUseLegacyComponents: false, //we have to pass this as a prop to FixedDataTableContainer
     };
+    // let shouldUseLegacyComponents=false;
+    // this.cellRenderer_datacell= this.cellRenderer_datacell(this);
+    //these are legacy function because we are already providing the styles in FixedDataTableCell for this so there is no need of any div here
+    const cellRenderer_legacy = (props) =>
+      `${props.columnKey}, ${props.rowIndex}`;
+
+    const headerCellRenderer_legacy = (props) => props.columnKey;
+
+    const cellRenderer_datacell = (props) => (
+      <DataCell {...props}>
+        {props.columnKey},{props.rowIndex}
+      </DataCell>
+    );
+    const cellRenderer_div = (props) => (
+      <div style={props.style_default} className={props.className_default}>
+        {props.columnKey}, {props.rowIndex}
+      </div>
+    );
+    //user can pass any function as here we passed cellRenderer_div
+    //we have to pass the default styles which we were earlier providing in the FixedDataTableCell div
 
-    const cellRenderer = (props) => `${props.columnKey}, ${props.rowIndex}`;
-    const headerCellRenderer = (props) => props.columnKey;
+    const headerCellRenderer = (props) => (
+      <DataCell {...props}>{props.columnKey}</DataCell>
+    );
 
     for (let i = 0; i < 10000; i++) {
       const columnGroupIndex = Math.floor(i / 2);
       this.state.columns[i] = {
         columnKey: 'Column ' + i,
         columnGroupIndex,
-        header: headerCellRenderer,
-        cell: cellRenderer,
+        header: this.state.shouldUseLegacyComponents
+          ? headerCellRenderer_legacy
+          : headerCellRenderer,
+        cell: this.state.shouldUseLegacyComponents
+          ? cellRenderer_legacy
+          : i % 2
+          ? cellRenderer_datacell
+          : cellRenderer_div,
         width: 100,
         allowCellsRecycling: true,
         fixed: i < 2 ? true : false,
@@ -123,6 +152,7 @@ class AutoScrollExample extends React.Component {
         columnsCount={this.state.columnsCount}
         getColumn={(i) => this.state.columns[i]}
         getColumnGroup={(i) => this.state.columnGroups[i]}
+        shouldUseLegacyComponents={this.state.shouldUseLegacyComponents}
         {...this.props}
       />
     );

src/FixedDataTable.js

@@ -524,6 +524,8 @@ class FixedDataTable extends React.Component {
      * ```
      */
     rowAttributesGetter: PropTypes.func,
+
+    shouldUseLegacyComponents: PropTypes.bool,
   };
 
   static defaultProps = /*object*/ {
@@ -872,6 +874,7 @@ class FixedDataTable extends React.Component {
           fixedColumnsWidth={this.props.fixedColumnsWidth}
           fixedRightColumnsWidth={this.props.fixedRightColumnsWidth}
           isGroupHeader={true}
+          shouldUseLegacyComponents={this.props.shouldUseLegacyComponents}
         />
       );
     }
@@ -923,6 +926,7 @@ class FixedDataTable extends React.Component {
           endViewportColumnIndex={this.props.endColumnIndex}
           fixedColumnsWidth={this.props.fixedColumnsWidth}
           fixedRightColumnsWidth={this.props.fixedRightColumnsWidth}
+          shouldUseLegacyComponents={this.props.shouldUseLegacyComponents}
         />
       );
     }
@@ -976,6 +980,7 @@ class FixedDataTable extends React.Component {
         fixedRightColumnsWidth={this.props.fixedRightColumnsWidth}
         firstViewportColumnIndex={this.props.firstColumnIndex}
         endViewportColumnIndex={this.props.endColumnIndex}
+        shouldUseLegacyComponents={this.props.shouldUseLegacyComponents}
       />
     );
 
@@ -1123,6 +1128,7 @@ class FixedDataTable extends React.Component {
         fixedRightColumnsWidth={this.props.fixedRightColumnsWidth}
         scrollbarYWidth={props.scrollbarYWidth}
         isRTL={props.isRTL}
+        shouldUseLegacyComponents={this.props.shouldUseLegacyComponents}
       />
     );
   };

src/FixedDataTableBufferedRows.js

@@ -228,8 +228,10 @@ class FixedDataTableBufferedRows extends React.Component {
         fixedRightColumnsWidth={this.props.fixedRightColumnsWidth}
         firstViewportColumnIndex={this.props.firstViewportColumnIndex}
         endViewportColumnIndex={this.props.endViewportColumnIndex}
+        shouldUseLegacyComponents={this.props.shouldUseLegacyComponents}
       />
     );
   }
 }
+//}
 export default FixedDataTableBufferedRows;

src/FixedDataTableCell.js

@@ -20,6 +20,8 @@ import { polyfill as lifecycleCompatibilityPolyfill } from 'react-lifecycles-com
 import ReorderCell from './plugins/ResizeReorder/ReorderCell';
 import ResizeCell from './plugins/ResizeReorder/ResizeCell';
 import { CellGroupType } from './enums/CellGroup';
+import Cell from './hoc_components/FixedDataTableCellFunction';
+import CellLegacy from './hoc_components/FixedDataTableCellLegacyFunction';
 
 class FixedDataTableCell extends React.Component {
   /**
@@ -223,6 +225,9 @@ class FixedDataTableCell extends React.Component {
       height: this.props.height,
       width: this.props.width,
       left: this.props.left,
+      shouldUseLegacyComponents: this.props.shouldUseLegacyComponents,
+      style_default: style,
+      className_default: className,
     };
 
     if (props.rowIndex >= 0) {
@@ -286,13 +291,16 @@ class FixedDataTableCell extends React.Component {
         </FixedDataTableCellDefaultDeprecated>
       );
     }
-
-    const role = isHeaderOrFooter ? 'columnheader' : 'gridcell';
+    const CellComponent = this.props.shouldUseLegacyComponents
+      ? CellLegacy
+      : Cell;
 
     return (
-      <div className={className} style={style} role={role}>
-        {content}
-      </div>
+      <CellComponent
+        className_default={className}
+        style_default={style}
+        content={content}
+      />
     );
   }
 }

src/FixedDataTableCellDefault.js

@@ -15,6 +15,8 @@ import PropTypes from 'prop-types';
 
 import cx from './vendor_upstream/stubs/cx';
 import joinClasses from './vendor_upstream/core/joinClasses';
+import CellDefault from './hoc_components/FixedDataTableCellDefaultFunction';
+import CellDefaultLegacy from './hoc_components/FixedDataTableCellDefaultLegacyFunction';
 
 /**
  * Component that handles default cell layout and styling.
@@ -70,44 +72,12 @@ class FixedDataTableCellDefault extends React.Component {
 
   render() {
     //Remove some props which we don't pass into div
-    var {
-      height,
-      width,
-      style,
-      className,
-      children,
-      columnKey,
-      columnIndex,
-      rowIndex,
-      left,
-      cellGroupType,
-      isHeader,
-      isGroupHeader,
-      maxWidth,
-      minWidth,
-      ...props
-    } = this.props;
 
-    var innerStyle = {
-      height,
-      width,
-      ...style,
-    };
+    const CellDefaultComponent = this.props.shouldUseLegacyComponents
+      ? CellDefaultLegacy
+      : CellDefault;
 
-    return (
-      <div
-        {...props}
-        className={joinClasses(
-          cx('fixedDataTableCellLayout/wrap'),
-          cx('public/fixedDataTableCell/wrap'),
-          cx('public/fixedDataTableCell/cellContent'),
-          className
-        )}
-        style={innerStyle}
-      >
-        {children}
-      </div>
-    );
+    return <CellDefaultComponent {...this.props} />;
   }
 }
 

src/FixedDataTableCellDefaultDeprecated.js

@@ -76,6 +76,8 @@ class FixedDataTableCellDefault extends React.Component {
     var {
       height,
       width,
+      style_default,
+      className_default,
       style,
       className,
       children,
@@ -94,16 +96,19 @@ class FixedDataTableCellDefault extends React.Component {
     var innerStyle = {
       height,
       width,
+      ...style_default,
       ...style,
     };
+    if (props.onColumnReorderEnd !== undefined) innerStyle.left = '3px';
 
     return (
       <div
         {...props}
         className={joinClasses(
           cx('fixedDataTableCellLayout/wrap1'),
           cx('public/fixedDataTableCell/wrap1'),
-          className
+          className,
+          className_default
         )}
         style={innerStyle}
       >