Repository: gregnb/mui-datatables
Pull request #575 (2019-04-24 02:36:25)

Issue 213 Clarify customHeadRender
Should help to close https://github.com/gregnb/mui-datatables/issues/213.

`customHeadRender` actually works properly as of `2.0.0-beta.59`, so the issue is out of date, however, I also noticed that the documentation around this feature was out of date, and could have been leading to confusion, so I did the following:

- Updated the documentation
- Added the option to example code
- Added testing around `customHeadRender` to help prevent future regressions

coveralls: 
[![Coverage Status](https://coveralls.io/builds/22985049/badge)](https://coveralls.io/builds/22985049)

Coverage increased (+0.09%) to 73.468% when pulling **24bef2aa7406db9f556cc960ef9c580feed00daf on gabrielliwerant:issue-213-custom-head-render** into **8747d11ceb4df00ea3e04afb8a2c55cbc6d3c8e8 on gregnb:master**.


Patch:
diff --git a/README.md b/README.md
index 5611170..05aab14 100644
--- a/README.md
+++ b/README.md
@@ -219,7 +219,7 @@ const columns = [
 |**`print`**|boolean|true|Display column when printing
 |**`download`**|boolean|true|Display column in CSV download file
 |**`hint`**|string||Display hint icon with string as tooltip on hover.
-|**`customHeadRender`**|function||Function that returns a string or React component. Used as display for column header. `function(value, tableMeta, updateValue) => string`&#124;
+|**`customHeadRender`**|function||Function that returns a string or React component. Used as display for column header. `function(columnMeta, handleToggleColumn) => string`&#124;` React Component`
 |**`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/gregnb/mui-datatables/blob/master/examples/component/index.js)
 |**`setCellProps`**|function||Is called for each cell and allows to return custom props for this cell based on its data. `function(cellValue: string, rowIndex: number, columnIndex: number) => object`
 
@@ -227,11 +227,20 @@ const columns = [
 
 ```js
 function(columnMeta: {
+  customHeadRender: func,
   display: enum('true', 'false', 'excluded'),
   filter: bool,
   sort: bool,
   sortDirection: bool,
-}, updateDirection: function)
+  download: bool,
+  empty: bool,
+  index: number,
+  label: string,
+  name: string,
+  print: bool,
+  searchable: bool,
+  viewColumns: bool
+}, handleToggleColumn: function(columnIndex))
 ```
 
 
diff --git a/examples/customize-columns/index.js b/examples/customize-columns/index.js
index a3113db..04c11a0 100644
--- a/examples/customize-columns/index.js
+++ b/examples/customize-columns/index.js
@@ -26,6 +26,11 @@ class Example extends React.Component {
         name: "Location",
         options: {
           filter: false,
+          customHeadRender: (columnMeta, updateDirection) => (
+            <th key={2} onClick={() => updateDirection(2)} style={{ cursor: 'pointer' }}>
+              {columnMeta.name}
+            </th>
+          )
         }
       },
       {
diff --git a/src/components/TableFilter.js b/src/components/TableFilter.js
index ba7f025..ea975fa 100644
--- a/src/components/TableFilter.js
+++ b/src/components/TableFilter.js
@@ -222,7 +222,7 @@ class TableFilter extends React.Component {
         <div className={classes.textFieldRoot}>
           <FormControl className={classes.textFieldFormControl} key={index}>
             <TextField
-              label={column.name}
+              label={column.label}
               value={filterList[index].toString() || ''}
               onChange={event => this.handleTextFieldChange(event, index)}
             />


Test patch:
diff --git a/test/MUIDataTable.test.js b/test/MUIDataTable.test.js
index 107e1c9..174d217 100644
--- a/test/MUIDataTable.test.js
+++ b/test/MUIDataTable.test.js
@@ -21,6 +21,7 @@ describe('<MUIDataTable />', function() {
   );
   let renderName = value => value.split(' ')[1] + ', ' + value.split(' ')[0];
   let renderState = value => value;
+  let renderHead = columnMeta => columnMeta.name + 's';
   let defaultRenderCustomFilterList = f => f;
   let renderCustomFilterList = f => `Name: ${f}`;
 
@@ -29,7 +30,7 @@ describe('<MUIDataTable />', function() {
       { name: 'Name', options: { customBodyRender: renderName, customFilterListRender: renderCustomFilterList } },
       'Company',
       { name: 'City', label: 'City Label', options: { customBodyRender: renderCities, filterType: 'textField' } },
-      { name: 'State', options: { customBodyRender: renderState, filterType: 'multiselect' } },
+      { name: 'State', options: { customBodyRender: renderState, filterType: 'multiselect', customHeadRender: renderHead } },
       { name: 'Empty', options: { empty: true, filterType: 'checkbox' } },
     ];
     data = [
@@ -141,6 +142,7 @@ describe('<MUIDataTable />', function() {
         viewColumns: true,
         sortDirection: null,
         customBodyRender: renderState,
+        customHeadRender: renderHead,
       },
       {
         display: 'true',
@@ -511,6 +513,7 @@ describe('<MUIDataTable />', function() {
         viewColumns: true,
         sortDirection: null,
         customBodyRender: renderState,
+        customHeadRender: renderHead,
       },
       {
         name: 'Empty',
diff --git a/test/MUIDataTableFilter.test.js b/test/MUIDataTableFilter.test.js
index 723a9cf..ab52813 100644
--- a/test/MUIDataTableFilter.test.js
+++ b/test/MUIDataTableFilter.test.js
@@ -16,10 +16,10 @@ describe('<TableFilter />', function() {
 
   beforeEach(() => {
     columns = [
-      { name: 'First Name', label: 'First Name', display: true, sort: true, filter: true, sortDirection: 'desc' },
-      { name: 'Company', label: 'Company', display: true, sort: true, filter: true, sortDirection: 'desc' },
-      { name: 'City', label: 'City Label', display: true, sort: true, filter: true, sortDirection: 'desc' },
-      { name: 'State', label: 'State', display: true, sort: true, filter: true, sortDirection: 'desc' },
+      { name: 'firstName', label: 'First Name', display: true, sort: true, filter: true, sortDirection: 'desc' },
+      { name: 'company', label: 'Company', display: true, sort: true, filter: true, sortDirection: 'desc' },
+      { name: 'city', label: 'City Label', display: true, sort: true, filter: true, sortDirection: 'desc' },
+      { name: 'state', label: 'State', display: true, sort: true, filter: true, sortDirection: 'desc' },
     ];
 
     data = [
@@ -111,6 +111,19 @@ describe('<TableFilter />', function() {
     assert.strictEqual(actualResult.length, 4);
   });
 
+  it("should render column.label as filter label if filterType = 'textField'", () => {
+    const options = { filterType: 'textField', textLabels };
+    const filterList = [[], [], [], []];
+    const shallowWrapper = mount(
+      <TableFilter columns={columns} filterData={filterData} filterList={filterList} options={options} />,
+    );
+    const labels = shallowWrapper
+      .find(TextField)
+      .filterWhere(n => n.html().match(/MuiInputLabel-formControl/))
+      .map(n => n.text());
+    assert.deepEqual(labels, ['First Name', 'Company', 'City Label', 'State']);
+  });
+
   it("should data table filter view with TextFields if filterType = 'textfield'", () => {
     const options = { filterType: 'textField', textLabels };
     const filterList = [[], [], [], []];
diff --git a/test/MUIDataTableHead.test.js b/test/MUIDataTableHead.test.js
index 0b0a37a..beff059 100644
--- a/test/MUIDataTableHead.test.js
+++ b/test/MUIDataTableHead.test.js
@@ -16,7 +16,18 @@ describe('<TableHead />', function() {
       { name: 'First Name', label: 'First Name', display: 'true', sort: null },
       { name: 'Company', label: 'Company', display: 'true', sort: null },
       { name: 'City', label: 'City Label', display: 'true', sort: null },
-      { name: 'State', label: 'State', display: 'true', sort: null },
+      {
+        name: 'State',
+        label: 'State',
+        display: 'true',
+        options: { fixedHeader: true },
+        customHeadRender: columnMeta => (
+          <TableHeadCell {...columnMeta}>
+            {columnMeta.name + 's'}
+          </TableHeadCell>
+        ),
+        sort: null
+      },
     ];
 
     handleHeadUpdateRef = () => {};
@@ -53,7 +64,7 @@ describe('<TableHead />', function() {
       />,
     );
     const labels = mountWrapper.find(TableHeadCell).map(n => n.text());
-    assert.deepEqual(labels, ['First Name', 'Company', 'City Label', 'State']);
+    assert.deepEqual(labels, ['First Name', 'Company', 'City Label', 'States']);
   });
 
   it('should render a table head with no cells', () => {