Mui-datatables: Request : Allow user provided search text, shown columns, sorting, etc.

Created on 9 Nov 2018  路  8Comments  路  Source: gregnb/mui-datatables

First, thank you for making this amazing datatable module. As I'm using material-ui for the first time, I couldn't be happier with such an amazing tool that automatically uses the theme of my application and offers so many features to pick from.

That being said, I love your callback functions that inform us about what the current search query is, which filters are applied, etc. I decided to use those callbacks to implement a "persistent" config in my application, so that the datatable can automatically render using the persistent config if the table is ever unmounted / mounted back in a short period of time.

Expected Behavior

To be able to render the DataTable by providing the searchText, displayedColumns, etc.

This feature would make it easy to "persist" every datatable settings on componentWillUnmount (in cookies, for example) then to load them back the next time the DataTable is mounted.

Current Behavior

Currently, we are able to provide the "filterList" array, which makes us able to save the user filters and load them back anytime we want (great !), but other options (like the search query or the current sorting parameters) cannot seem to be provided as props.

Example of an expected behavior :

 constructor(props) {
   super(props);
   // Retrieve the persisted settings and set them to the state
 }

 componentWillUnmount() {
   // Retrieve the settings from the state and persist them (cookies, local storage, wherever)
 }

 handleWhateverFunction() {
   // Update the current state with the latest changes
 }

 render() {
    const { data } = this.props;
    const { filtersConfig, searchQuery, sortingConfig, displayedColumns } = this.state;
    return (
      <DataTable
        columns={config.columns}
        data={data}
        options={{
          displayColumns: displayedColumns,
          filter: true,
          filterList: filtersConfig,
          searchText: searchQuery,
          selectableRows: false,
          textLabels: config.labels,
          print: false,
          responsive: 'scroll',
          onDisplayedColumnsChange: this.handleDisplayedColumnsChanged,
          onFilterChange: this.handleFilterChange,
          onRowClick: this.handleRowPress,
          onSearchChange: this.handleSearchChange,
          onSortChange: this.handleSortChange,
          sortingList: sortingConfig
        }}
      />
    );
  }

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 3.4.0 |
| MUI-datatables | 2.0.0-beta-38" |
| React | 16.4.1 |
| browser | Chrome |

duplicate

Most helpful comment

I'm trying to find the time to redo the filterList along side many other options that would be used to rehydrate the table. It'll be a breaking change in the near future but bear with me

All 8 comments

I'm trying to find the time to redo the filterList along side many other options that would be used to rehydrate the table. It'll be a breaking change in the near future but bear with me

I also need this

This will be really helpful, i will wait for it. My project need this feature

I also need this default searchText option, for After page reloading.
On my strategy with Server query,

  1. Capture MUIDataTable search events, save searchText on Web Browser URL and fetch data from Server
  2. When Users reload page, re-build State from URL and fetch data from Server
  3. But I cannot set MUIDataTable's initial searchText state
  4. So when Users click Next Page button, Server query does't includes searchText

Yes, I can avoid this problem via comparing State's (from URL) searchText vs MUIDataTable's searchText before Server query. But I hope I can set MUIDataTable's searchText initially.

One more tip for people here, as far as I can tell, you can set sortDirection to null, 'asc', or 'desc' for each column in its nested options object and that gets reflected both in the UI and in the tableInfo passed to onTableChange. ~Still trying to figure out a good way to hide the arrow if sortDirection is null though...~

(edit: we were explicitly showing inactive column sort header arrows via our MUI theme, default behaviour is for those to be hidden)

I'm willing to use this to save state between different applications. I want te restore filter input, search, sort, column size, etc.

I'm currently testing my changes. I got: sorting, filters, search text, page and rows per page state parsing in the options.

I hope @gregnb is ready to get this pull request checked. It will be tomorrow.

This issue has become a duplicate of https://github.com/gregnb/mui-datatables/pull/441 which was followed up on here https://github.com/gregnb/mui-datatables/pull/603. After the PR is merged, this issue should be resolved.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kylane picture kylane  路  3Comments

T-pirithiviraj picture T-pirithiviraj  路  3Comments

cahna picture cahna  路  3Comments

gangakrishh picture gangakrishh  路  3Comments

geekashu picture geekashu  路  3Comments