Repository: gregnb/mui-datatables
Pull request #572 (2019-04-23 16:51:58)

Use label instead of name in filterType = textField

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

Coverage remained the same at 73.38% when pulling **cdc3b01040736839945743fa8eee7fd53ae5f3b9 on MBCSDave:bugfix/use-label-instead-name-filter-textfield** into **8747d11ceb4df00ea3e04afb8a2c55cbc6d3c8e8 on gregnb:master**.


Patch:
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/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 = [[], [], [], []];