customHeadLabelRender function and performance update to TableBodyCell

patorjk · Sep 19, 2019 · 3b03a1b · 3b03a1b
1 parent fb95aa3
commit 3b03a1b
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -225,7 +225,8 @@ const columns = [
 |Name|Type|Default|Description
 |:--:|:-----|:--|:-----|
 |**`customBodyRender`**|function||Function that returns a string or React component. Used as display data within all table cells of a given column. `function(value, tableMeta, updateValue) => string`&#124;` React Component` [Example](https://github.com/patorjk/mui-dt/blob/master/examples/component/index.js)
-|**`customHeadRender`**|function||Function that returns a string or React component. Used as display for column header. `function(columnMeta, handleToggleColumn) => string`&#124;` React Component`
+|**`customHeadLabelRender`**|function||Function that returns a string or React component. Used to replace the display for the column header's label. `function(columnMeta, handleToggleColumn) => string`&#124;` React Component`
+|**`customHeadRender`**|function||Function that returns a string or React component. Used as display for column header. In most cases you want customHeadLabelRender instead, as this method is for overriding the full header cell. `function(columnMeta, handleToggleColumn) => string`&#124;` React Component`
 |**`display`**|string|'true'|Display column in table. `enum('true', 'false', 'excluded')`
 |**`download`**|boolean|true|Display column in CSV download file.
 |**`empty`**|boolean|false|This denotes whether the column has data or not (for use with intentionally empty columns).

diff --git a/examples/customize-columns/index.js b/examples/customize-columns/index.js
@@ -59,7 +59,10 @@ function Example(props) {
       name: "Title",
       options: {
         filter: true,
-        sortDirection: 'asc'
+        sortDirection: 'asc',
+        customHeadLabelRender: (columnMeta) => {
+          return columnMeta.label + '!!';
+        }
       }
     },
     {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-dt",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [

diff --git a/src/components/TableBody.js b/src/components/TableBody.js
@@ -259,6 +259,7 @@ class TableBody extends React.Component {
                           columnHeader={columns[columnIndex].label}
                           print={columns[columnIndex].print}
                           options={options}
+                          visibleColumnCount={visibleColCnt}
                           key={columnIndex}>
                           {column}
                         </TableBodyCell>

diff --git a/src/components/TableBodyCell.js b/src/components/TableBodyCell.js
@@ -16,9 +16,9 @@ const useStyles = makeStyles(
         width: '50%',
         boxSizing: 'border-box',
         whiteSpace: 'nowrap',
-        '&::after': {
-          content: "'\xa0'"
-        },
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        height: props => 1/props.visibleColumnCount + '%',
         '&:nth-last-child(2)': {
           borderBottom: 'none'
         },
@@ -30,9 +30,9 @@ const useStyles = makeStyles(
       width: '50%',
       boxSizing: 'border-box',
       whiteSpace: 'nowrap',
-      '&::after': {
-        content: "'\xa0'"
-      },
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      height: props => 1/props.visibleColumnCount + '%',
       '&:nth-last-child(2)': {
         borderBottom: 'none'
       },
@@ -46,9 +46,9 @@ const useStyles = makeStyles(
         width: '50%',
         boxSizing: 'border-box',
         whiteSpace: 'nowrap',
-        '&::after': {
-          content: "'\xa0'"
-        },
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        height: props => 1/props.visibleColumnCount + '%',
         '&:last-child': {
           borderBottom: 'none'
         },
@@ -60,9 +60,9 @@ const useStyles = makeStyles(
       width: '50%',
       boxSizing: 'border-box',
       whiteSpace: 'nowrap',
-      '&::after': {
-        content: "'\xa0'"
-      },
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      height: props => 1/props.visibleColumnCount + '%',
       '&:last-child': {
         borderBottom: 'none'
       },
@@ -74,7 +74,7 @@ const useStyles = makeStyles(
 );
 
 function TableBodyCell(props) {
-  const classes = useStyles();
+  const classes = useStyles(props);
   const { children, className, colIndex, columnHeader, dataIndex, options, print, rowIndex, ...otherProps } = props;
 
   const handleClick = event => {
@@ -84,37 +84,38 @@ function TableBodyCell(props) {
     }
   };
 
-  return [
-    <TableCell
-      key={1}
-      className={classNames(
-        {
-          [classes.root]: true,
-          [classes.cellHide]: true,
-          [classes.cellHeaderResponsiveStacked]: options.displayMode === 'responsiveStacked',
-          [classes.cellHeaderStacked]: options.displayMode === 'stacked',
-          'datatables-noprint': !print,
-        },
-        className,
-      )}>
-      {columnHeader}
-    </TableCell>,
-    <TableCell
-      key={2}
-      onClick={handleClick}
-      className={classNames(
-        {
-          [classes.root]: true,
-          [classes.responsiveStacked]: options.displayMode === 'responsiveStacked',
-          [classes.stacked]: options.displayMode === 'stacked',
-          'datatables-noprint': !print,
-        },
-        className,
-      )}
-      {...otherProps}>
-      {children}
-    </TableCell>,
-  ];
+  return (
+    <>
+      {options.displayMode !== 'scroll' &&
+        <TableCell
+          className={classNames(
+            {
+              [classes.root]: true,
+              [classes.cellHide]: true,
+              [classes.cellHeaderResponsiveStacked]: options.displayMode === 'responsiveStacked',
+              [classes.cellHeaderStacked]: options.displayMode === 'stacked',
+              'datatables-noprint': !print,
+            },
+            className)}>
+          {columnHeader}
+        </TableCell>
+      }
+      <TableCell
+        onClick={handleClick}
+        className={classNames(
+          {
+            [classes.root]: true,
+            [classes.responsiveStacked]: options.displayMode === 'responsiveStacked',
+            [classes.stacked]: options.displayMode === 'stacked',
+            'datatables-noprint': !print,
+          },
+          className,
+        )}
+        {...otherProps}>
+        {children}
+      </TableCell>
+    </>
+  );
 }
 
 export default TableBodyCell;
diff --git a/src/components/TableHead.js b/src/components/TableHead.js
@@ -102,7 +102,7 @@ class TableHead extends React.Component {
                   }
                   options={options}
                   setCellRef={setCellRef}>
-                  {column.label}
+                  {column.customHeadLabelRender ? column.customHeadLabelRender({ index, ...column }) : column.label}
                 </TableHeadCell>
               )),
           )}

diff --git a/src/components/TableHeadCell.js b/src/components/TableHeadCell.js
@@ -28,6 +28,10 @@ const useStyles = makeStyles(
     data: {
       display: 'inline-block',
     },
+    noSortAction: {
+      display: 'flex',
+      verticalAlign: 'top',
+    },
     sortAction: {
       display: 'flex',
       verticalAlign: 'top',
@@ -151,7 +155,7 @@ function TableHeadCell(props) {
           </span>
         </Tooltip>
       ) : (
-        <div className={classes.sortAction}>
+        <div className={hint ? classes.sortAction : classes.noSortAction}>
           {children}
           {hint && (
             <Tooltip title={hint} placement={'bottom-end'} enterDelay={300} classes={{ popper: classes.mypopper }}>