CSS cleanups, fixes, and reimplementations

examples/demos/example08-sortable-cols.js

@@ -14,37 +14,31 @@ export default class extends React.Component {
       {
         key: 'task',
         name: 'Title',
-        width: 200,
         sortable: true
       },
       {
         key: 'priority',
         name: 'Priority',
-        width: 200,
         sortable: true
       },
       {
         key: 'issueType',
         name: 'Issue Type',
-        width: 200,
         sortable: true
       },
       {
         key: 'complete',
         name: '% Complete',
-        width: 200,
         sortable: true
       },
       {
         key: 'startDate',
         name: 'Start Date',
-        width: 200,
         sortable: true
       },
       {
         key: 'completeDate',
         name: 'Expected Complete',
-        width: 200,
         sortable: true
       }
     ];

packages/react-data-grid-addons/src/cells/headerCells/filters/NumericFilter.tsx

@@ -45,31 +45,19 @@ export default function NumericFilter<R>({ column, onChange }: Props<R>) {
   }
 
   const inputKey = `header-filter-${column.key as keyof R}`;
-  const columnStyle: React.CSSProperties = {
-    float: 'left',
-    marginRight: 5,
-    maxWidth: '80%'
-  };
-  const badgeStyle: React.CSSProperties = {
-    cursor: 'help'
-  };
 
   const tooltipText = 'Input Methods: Range (x-y), Greater Then (>x), Less Then (<y)';
 
   return (
-    <div>
-      <div style={columnStyle}>
-        <input
-          key={inputKey}
-          placeholder="e.g. 3,10-15,>20"
-          className="form-control input-sm"
-          onChange={handleChange}
-          onKeyPress={handleKeyPress}
-        />
-      </div>
-      <div className="input-sm">
-        <span className="badge" style={badgeStyle} title={tooltipText}>?</span>
-      </div>
+    <div className="rdg-numeric-filter">
+      <input
+        key={inputKey}
+        className="rdg-filter"
+        placeholder="e.g. 3,10-15,>20"
+        onChange={handleChange}
+        onKeyPress={handleKeyPress}
+      />
+      <span className="rdg-filter-badge" title={tooltipText}>?</span>
     </div>
   );
 }

packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { DragSource, DropTarget } from 'react-dnd';
 
 class DraggableHeaderCell extends React.Component {
@@ -21,18 +22,13 @@ class DraggableHeaderCell extends React.Component {
       canDrop
     } = this.props;
 
-    let opacity = 1;
-    if (isDragging) {
-      opacity = 0.2;
-    }
-
     // set drag source and drop target on header cell
     // width: 0 - otherwise drag clone was wrongly positioned
     return connectDragSource(
       connectDropTarget(
         <div
-          style={{ width: 0, cursor: 'move', opacity }}
-          className={isOver && canDrop ? 'rdg-can-drop' : ''}
+          className={classNames('rdg-draggable-header-cell', { 'rdg-can-drop': isOver && canDrop })}
+          style={{ opacity: isDragging ? 0.2 : 1 }}
         >
           {this.props.children}
         </div>

packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js

@@ -23,7 +23,7 @@ class DraggableHeaderCell extends Component {
     if (isDragging) {
       return null;
     }
-    return connectDragSource(<div style={{ cursor: 'move' }}>{this.props.children}</div>);
+    return connectDragSource(<div className="rdg-draggable-header-cell">{this.props.children}</div>);
   }
 }
 

packages/react-data-grid-addons/src/editors/DropDownEditor.js

@@ -63,7 +63,7 @@ export default class DropDownEditor extends React.Component {
     return (
       <select
         ref={this.setSelectRef}
-        style={{ width: '100%' }}
+        className="rdg-select-editor"
         defaultValue={this.props.value}
         onBlur={this.props.onBlur}
       >

packages/react-data-grid-addons/src/editors/__tests__/DropDownEditor.spec.js

@@ -23,11 +23,6 @@ describe('DropDownEditor', () => {
       );
     });
 
-    it('should pass width=100% to the select node as an inline style', () => {
-      const Select = TestUtils.findRenderedDOMComponentWithTag(component, 'select');
-      expect(Select.style.width).toBe('100%');
-    });
-
     it('should pass the value to the select node as an inline value', () => {
       const Select = TestUtils.findRenderedDOMComponentWithTag(component, 'select');
       expect(Select.value).toBe('option2');

packages/react-data-grid-addons/src/toolbars/GroupedColumnButton.tsx

@@ -15,7 +15,7 @@ export default function GroupedColumnButton({ name, columnKey, onColumnGroupDele
   return (
     <div className="grouped-col-btn btn btn-sm">
       <span className="grouped-col-btn__name">{name}</span>
-      <span className="grouped-col-btn__remove glyphicon glyphicon-trash" onClick={onClick} />
+      <span className="grouped-col-btn__remove glyphicon glyphicon-trash" onClick={onClick}>×</span>
     </div>
   );
 }

packages/react-data-grid-addons/style/rdg-contextmenu.less

@@ -0,0 +1,39 @@
+.react-contextmenu {
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.24);
+
+  font-size: 14px;
+  line-height: 2;
+  white-space: nowrap;
+
+  > .react-contextmenu-item:not(:last-child) {
+    border-bottom: 1px solid #ddd;
+  }
+
+  .react-contextmenu-submenu > & {
+    margin-top: -1px;
+  }
+}
+
+.react-contextmenu-item:not(.react-contextmenu-submenu) {
+  padding: 0 12px;
+}
+
+.react-contextmenu-item--selected {
+  background-color: darken(#fff, 4%);
+}
+
+.react-contextmenu-submenu > .react-contextmenu-item {
+  &::after {
+    content: "▶";
+    margin-left: 12px;
+    margin-right: -6px;
+  }
+
+  &:not(.react-contextmenu-item--active) + .react-contextmenu {
+    display: none;
+  }
+}

packages/react-data-grid-addons/style/rdg-image.less

@@ -4,4 +4,5 @@
   display: inline-block;
   height: 40px;
   width: 40px;
-}
+  vertical-align: middle;
+}

packages/react-data-grid-addons/style/react-data-grid-addons.less

@@ -1,3 +1,19 @@
+@import 'rdg-contextmenu.less';
 @import 'rdg-drop-target.less';
 @import 'rdg-image.less';
 @import 'rdg-toolbar.less';
+
+.rdg-dragging {
+  cursor: grabbing;
+}
+
+.rdg-draggable-header-cell {
+  cursor: move;
+  display: inline-block;
+  height: inherit;
+  background-color: inherit;
+}
+
+.rdg-can-drop {
+  background-color: #ececec;
+}

packages/react-data-grid/src/Canvas.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useState, useRef, useEffect, useMemo } from 'react';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { isElement } from 'react-is';
 
 import Row from './Row';
@@ -80,7 +80,7 @@ export default function Canvas<R>({
   rowHeight,
   rowKey,
   rowRenderer,
-  RowsContainer = Fragment,
+  RowsContainer,
   rowsCount,
   scrollToRowIndex,
   selectedRows
@@ -275,12 +275,26 @@ export default function Canvas<R>({
     );
   }
 
-  const paddingTop = rowOverscanStartIdx * rowHeight;
-  const paddingBottom = (rowsCount - 1 - rowOverscanEndIdx) * rowHeight;
+  let grid = (
+    <div
+      className="rdg-grid"
+      style={{
+        width: columnMetrics.totalColumnWidth,
+        paddingTop: rowOverscanStartIdx * rowHeight,
+        paddingBottom: (rowsCount - 1 - rowOverscanEndIdx) * rowHeight
+      }}
+    >
+      {getRows()}
+    </div>
+  );
+
+  if (RowsContainer !== undefined) {
+    grid = <RowsContainer id={contextMenu ? contextMenu.props.id : 'rowsContainer'}>{grid}</RowsContainer>;
+  }
 
   return (
     <div
-      className="react-grid-Canvas"
+      className="rdg-viewport"
       style={{ height }}
       ref={canvas}
       onScroll={handleScroll}
@@ -311,11 +325,7 @@ export default function Canvas<R>({
         editorPortalTarget={editorPortalTarget}
         {...interactionMasksMetaData}
       />
-      <RowsContainer id={contextMenu ? contextMenu.props.id : 'rowsContainer'}>
-        <div className="rdg-rows-container" style={{ width: columnMetrics.totalColumnWidth, paddingTop, paddingBottom }}>
-          {getRows()}
-        </div>
-      </RowsContainer>
+      {grid}
     </div>
   );
 }

packages/react-data-grid/src/Cell.tsx

@@ -79,14 +79,18 @@ export default class Cell<R> extends React.Component<CellProps<R>> implements Ce
   };
 
   getStyle(): React.CSSProperties {
-    const { column, height, scrollLeft } = this.props;
+    const { column } = this.props;
 
-    return {
-      height,
+    const style: React.CSSProperties = {
       width: column.width,
-      left: column.left,
-      transform: !isPositionStickySupported() && isFrozen(column) ? `translateX(${scrollLeft}px)` : 'none'
+      left: column.left
     };
+
+    if (!isPositionStickySupported() && isFrozen(column)) {
+      style.transform = `translateX(${this.props.scrollLeft}px)`;
+    }
+
+    return style;
   }
 
   getCellClass() {

packages/react-data-grid/src/Cell/CellContent.tsx

@@ -38,7 +38,7 @@ export default function CellContent<R>({
 }: CellContentProps<R>) {
   const isExpandCell = expandableOptions ? expandableOptions.field === column.key : false;
   const treeDepth = expandableOptions ? expandableOptions.treeDepth : 0;
-  const marginLeft = expandableOptions && isExpandCell ? expandableOptions.treeDepth * 30 : 0;
+  const style = expandableOptions && isExpandCell ? { marginLeft: expandableOptions.treeDepth * 30 } : undefined;
 
   function handleDeleteSubRow() {
     if (onDeleteSubRow) {
@@ -67,17 +67,15 @@ export default function CellContent<R>({
   return (
     <div className={classes}>
       {cellDeleter}
-      <div className="react-grid-Cell__container" style={{ marginLeft }}>
-        <span>
-          <CellValue<R>
-            rowIdx={rowIdx}
-            rowData={rowData}
-            column={column}
-            value={value}
-            isRowSelected={isRowSelected}
-            onRowSelectionChange={onRowSelectionChange}
-          />
-        </span>
+      <div style={style}>
+        <CellValue<R>
+          rowIdx={rowIdx}
+          rowData={rowData}
+          column={column}
+          value={value}
+          isRowSelected={isRowSelected}
+          onRowSelectionChange={onRowSelectionChange}
+        />
         {cellControls}
       </div>
       {tooltip && <span className="cell-tooltip-text">{tooltip}</span>}

packages/react-data-grid/src/Header.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef, useRef, useState, useMemo, useImperativeHandle } from 'react';
-import classNames from 'classnames';
 
 import HeaderRow from './HeaderRow';
 import { getColumnMetrics } from './utils/columnUtils';
@@ -26,7 +25,6 @@ export interface HeaderProps<R> extends SharedDataGridProps<R> {
   columnMetrics: ColumnMetrics<R>;
   headerRows: [HeaderRowData<R>, HeaderRowData<R> | undefined];
   cellMetaData: CellMetaData<R>;
-  rowOffsetHeight: number;
   onSort?(columnKey: keyof R, direction: DEFINE_SORT): void;
   onColumnResize(idx: number, width: number): void;
 }
@@ -124,17 +122,12 @@ export default forwardRef(function Header<R>(props: HeaderProps<R>, ref: React.R
     props.cellMetaData.onCellClick({ rowIdx: -1, idx: -1 });
   }
 
-  const className = classNames('react-grid-Header', {
-    'react-grid-Header--resizing': resizing !== null
-  });
-
   return (
     <div
+      className="rdg-header"
       style={{
-        height: props.rowOffsetHeight,
         paddingRight: getScrollbarSize()
       }}
-      className={className}
       onClick={onHeaderClick}
     >
       {getHeaderRows()}