UX-94 Table row/column colors

playground/src/App.js

@@ -1,5 +1,4 @@
-import React, { Component } from 'react'
-
+import React, { Component, useState } from 'react'
 import {
   MLAffix,
   MLAlert,
@@ -23,6 +22,7 @@ import {
   MLEditableSlider,
   MLEmpty,
   MLHeader,
+  MLIcon,
   MLInput,
   MLInputNumber,
   MLLayout,
@@ -65,6 +65,8 @@ import {
   SmileBeamSolid,
 } from '@marklogic/design-system/es/MLIcon'
 
+import _ from 'lodash'
+
 const configValues = {
   dateFormat: 'YYYY-MMM-DD', // Default for all dates, and DatePicker
   dateTimeFormat: 'YYYY-MMM-DD, HH:mm:ss', // default for all dates with times, and DatePicker with times
@@ -73,6 +75,11 @@ const configValues = {
   yearFormat: 'YYYY', // default for Year picker
 }
 
+const pureLessThanSorter = (a, b) => (a < b) ? -1 : (a > b) ? 1 : 0
+const extractSortColumnDecorator = (sortFn) => (dataIndex) => (a, b) => sortFn(a[dataIndex], b[dataIndex])
+
+const lessThanSorter = extractSortColumnDecorator(pureLessThanSorter)
+
 function makeIcon(icon, title) {
   return (
     <MLTooltip
@@ -116,10 +123,50 @@ const customIcon = () => {
 }
 
 export default class App extends Component {
-  render() {
+  constructor(props) {
+    super(props)
+    this.state = {
+      columns: [
+        {
+          dataIndex: 'col1',
+          key: 'col1',
+          title: () => (
+            <div>
+              Column 1
+              <MLIcon.InfoCircleFilled />
+            </div>
+          ),
+          sorter: lessThanSorter('col1'),
+        },
+        {
+          dataIndex: 'col2',
+          key: 'col2',
+          title: 'Column 2',
+        },
+        {
+          dataIndex: 'col3',
+          key: 'col3',
+          title: 'Column 3',
+        },
+        {
+          dataIndex: 'col4',
+          key: 'col4',
+          title: 'Column 4',
+        },
+        {
+          dataIndex: 'col5',
+          key: 'col5',
+          title: 'Column 5',
+        },
+      ],
+    }
+  }
+
+  render () {
     return (
       <div>
         <MLConfigProvider {...configValues}>
+
           <MLLayout>
             <MLLayout.MLHeader style={{ padding: 0, position: 'fixed', zIndex: 2, width: '100%' }}>
               <MLHeader
@@ -144,6 +191,70 @@ export default class App extends Component {
               />
             </MLLayout.MLHeader>
             <MLLayout.MLContent style={{ marginTop: 64 }}>
+
+              <MLButton
+                type='primary'
+                onClick={() => {
+                  this.setState({ columns: _.shuffle(this.state.columns) })
+                }}
+              >
+                Shuffle columns
+              </MLButton>
+              <MLTable
+                columns={this.state.columns}
+                scroll={{ y: 240 }}
+                dataSource={[
+                  {
+                    col1: 'garden plot',
+                    col2: 'garden seed',
+                    col3: 'garden spring',
+                    col4: 'garden worm',
+                    col5: 'garden water',
+                  },
+                  {
+                    col1: 'compost plot',
+                    col2: 'compost seed',
+                    col3: 'compost spring',
+                    col4: 'compost worm',
+                    col5: 'compost water',
+                  },
+                  {
+                    col1: 'roots plot',
+                    col2: 'roots seed',
+                    col3: 'roots spring',
+                    col4: 'roots worm',
+                    col5: 'roots water',
+                  },
+                  {
+                    col1: 'plough plot',
+                    col2: 'plough seed',
+                    col3: 'plough spring',
+                    col4: 'plough worm',
+                    col5: 'plough water',
+                  },
+                  {
+                    col1: 'weed plot',
+                    col2: 'weed seed',
+                    col3: 'weed spring',
+                    col4: 'weed worm',
+                    col5: 'weed water',
+                  },
+                  {
+                    col1: 'crop plot',
+                    col2: 'crop seed',
+                    col3: 'crop spring',
+                    col4: 'crop worm',
+                    col5: 'crop water',
+                  },
+                  {
+                    col1: 'soil plot',
+                    col2: 'soil seed',
+                    col3: 'soil spring',
+                    col4: 'soil worm',
+                    col5: 'soil water',
+                  }]}
+                showBody
+              />
               <MLButton type='primary'>Test</MLButton>
               <MLButton type='highlight'>Test</MLButton>
               <>

src/MLTable/MLTable.js

@@ -125,6 +125,14 @@ class MLTable extends React.Component {
     this.setState(stateTransform)
   }
 
+  getCellStyle(text, row, rowIndex, column, colIndex) {
+    return Object.assign(
+      { before: ' ' },
+      this.props.rowStyle(column, colIndex),
+      this.props.columnStyle(row, rowIndex),
+    )
+  }
+
   handleDragEnterRow(draggingRecordInfo, dropTargetRecordInfo) {
     this.setState({
       dropTargetRecordInfo,
@@ -253,12 +261,21 @@ class MLTable extends React.Component {
   }
 
   render() {
-    const { showBody, dataSource, columns } = this.props
+    const {
+      showBody,
+      dataSource,
+      columns,
+      columnStyle,
+    } = this.props
+
     if (!showBody) {
       return <MLHeaderTable columns={columns} />
     }
     const restructuredColumns = columns.map((originalColumn) => {
       const restructuredColumn = clone(originalColumn)
+      restructuredColumn.render = restructuredColumn.render || ((text, record, index) => {
+        return text
+      })
       if (originalColumn.columns !== undefined) {
         if (originalColumn.dataIndex === undefined) {
           throw Error('dataIndex must be specified when nesting columns')
@@ -276,7 +293,7 @@ class MLTable extends React.Component {
           )
         }
         // If the column has sub-columns, render a sub-table
-        restructuredColumn.render = (text, record, index) => (
+        restructuredColumn.render = (text, record, colIndex) => (
           <MLTable
             columns={originalColumn.columns}
             dataSource={record[originalColumn.dataIndex]}
@@ -318,6 +335,18 @@ class MLTable extends React.Component {
         </div>)
     }
 
+    // const restructuredOnRow = (record, rowIndex) => {
+    //   const originalOnRowResult = this.props.onRow(record, rowIndex)
+    //   const rowClassName = this.props.rowClassName(record, rowIndex)
+    //   if (rowClassName === undefined) {
+    //     return originalOnRowResult
+    //   }
+    //   const newRowProps = {
+    //     className: rowClassName,
+    //   }
+    //   return Object.assign(newRowProps, originalOnRowResult)
+    // }
+
     return (
       <MLTableContextProvider isInsideTable={true}>
         <Table
@@ -346,6 +375,9 @@ class MLTable extends React.Component {
 MLTable.defaultProps = {
   size: 'middle',
   showBody: true,
+  columnStyle: () => ({}),
+  rowStyle: () => ({}),
+  rowClassName: () => undefined,
   onChange: () => {},
   rowKey: undefined,
   defaultShowEmbeddedTableBodies: false,

src/MLTable/style/index.less

@@ -5,6 +5,18 @@
 }
 
 .ml-table {
+  thead > tr > th {
+    background: unset; // Undo too-specific background so we can set it on the tr with JS
+  }
+
+  thead tr {
+    background: @table-header-bg;
+  }
+
+  tbody > tr > td.ant-table-row-expand-icon-cell {
+    background: @table-expand-button-column-bg;
+  }
+
   td:not(.ant-table-row-expand-icon-cell) {
     vertical-align: top;
   }