added displayData to onFilterChange and added test

gregnb · Jun 7, 2020 · fd8fdba · fd8fdba
1 parent 6ecfc0a
commit fd8fdba
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -210,7 +210,7 @@ The component accepts the following props:
 |**`onSearchOpen`**|function||Callback function that triggers when the searchbox opens. `function() => void`
 |**`onFilterDialogOpen`**|function||Callback function that triggers when the filter dialog opens. `function() => void`
 |**`onFilterDialogClose`**|function||Callback function that triggers when the filter dialog closes. `function() => void`
-|**`onFilterChange`**|function||Callback function that triggers when filters have changed. `function(changedColumn: string, filterList: array, type: enum('checkbox', 'dropdown', 'multiselect', 'textField', 'custom', 'chip', 'reset'), changedColumnIndex) => void`
+|**`onFilterChange`**|function||Callback function that triggers when filters have changed. `function(changedColumn: string, filterList: array, type: enum('checkbox', 'dropdown', 'multiselect', 'textField', 'custom', 'chip', 'reset'), changedColumnIndex, displayData) => void`
 |**`onFilterConfirm`**|function||Callback function that is triggered when a user presses the "confirm" button on the filter popover. This occurs only if you've set **confirmFilters** option to true. `function(filterList: array) => void` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/serverside-filters/index.js)
 |**`onSearchClose`**|function||Callback function that triggers when the searchbox closes. `function() => void`
 |**`onColumnSortChange`**|function||Callback function that triggers when a column has been sorted. `function(changedColumn: string, direction: string) => void`

diff --git a/examples/customize-filter/index.js b/examples/customize-filter/index.js
@@ -29,6 +29,7 @@ class Example extends React.Component {
             renderValue: v => v ? v.replace(/^(\w).* (.*)$/, '$1. $2') : ''
           },
           display: 'excluded',
+          filterType: 'textField'
         },
       },
       {

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
@@ -1193,7 +1193,7 @@ class MUIDataTable extends React.Component {
       () => {
         this.setTableAction('filterChange');
         if (this.options.onFilterChange) {
-          this.options.onFilterChange(column, this.state.filterList, type, index);
+          this.options.onFilterChange(column, this.state.filterList, type, index, this.state.displayData);
         }
         next && next(this.state.filterList);
       },

diff --git a/src/components/TableFilter.js b/src/components/TableFilter.js
@@ -252,6 +252,7 @@ class TableFilter extends React.Component {
             fullWidth
             label={column.label}
             value={filterList[index].toString() || ''}
+            data-testid={"filtertextfield-" + column.name}
             onChange={event => this.handleTextFieldChange(event, index, column.name)}
           />
         </FormControl>

diff --git a/test/MUIDataTable.test.js b/test/MUIDataTable.test.js
@@ -1235,7 +1235,7 @@ describe('<MUIDataTable />', function() {
 
   it('should recalculate page when calling changeRowsPerPage method', () => {
     const mountWrapper = mount(
-      shallow(<MUIDataTable columns={columns} data={data} options={{ rowsPerPage: 2 }} />).get(0),
+      shallow(<MUIDataTable columns={columns} data={data} options={{ rowsPerPageOptions: [2,4,10,15,100], rowsPerPage: 2 }} />).get(0),
     );
     const instance = mountWrapper.instance();
 
@@ -1841,6 +1841,37 @@ describe('<MUIDataTable />', function() {
     });
   });
 
+  it('should correctly filter data from filter popover menu', () => {
+
+    let filteredData = [];
+    const options = {
+      filter: true,
+      filterType: 'dropdown',
+      onFilterChange: (column, filterList, type, index, displayData) => {
+        filteredData = displayData;
+      }
+    };
+
+    const fullWrapper = mount(<MUIDataTable columns={columns} data={data} options={options} />);
+
+    fullWrapper
+      .find('[data-testid="Filter Table-iconButton"]')
+      .at(0)
+      .simulate('click');
+
+    fullWrapper
+      .find('[data-testid="filtertextfield-Name"] input')
+      .at(0)
+      .simulate('change', { target: { value: 'James' } })
+
+    fullWrapper.unmount();
+
+    assert.strictEqual(filteredData.length, 2);
+    assert.strictEqual(filteredData[0].data[0], 'James, Joe');
+    assert.strictEqual(filteredData[1].data[0], 'Houston, James');
+
+  });
+
   describe('should correctly run comparator function', () => {
     it('correctly compares two equal strings', () => {
       expect(getCollatorComparator()('testString', 'testString')).to.equal(0);