Search code examples
javascriptreactjsmaterial-uimaterial-table

Material Table Get and Set Filter Values


How can I get and set the filter values programmatically using material-table?

I want users to be able to save filter configurations as reports and recall them as needed.


Solution

  • Get works with a hook on change:

    onFilterChange={(filters) => {
      console.log('onFilterChange', filters);
    }}
    

    result is an array of filter definitions per column, looks like:

    [
    // [...]
      {
        "column": {
          "title": "Date",
          "field": "file_date",
          "type": "date",
          "tableData": {
            "columnOrder": 3,
            "filterValue": "2020-11-10T15:20:00.000Z",
            "groupSort": "asc",
            "width": "...", // lots of css calc stuff... :(
            "additionalWidth": 0,
            "id": 4
          }
        },
        "operator": "=",
        "value": "checked"
      }
    ]
    

    setting the filter on mount could/should work with defaultFilter at each column definition.