Mui-datatables: Customize search element

[NickToye]

Expose search component so that it can be customized, such as adding a Placeholder.

[gregnb]

hey @NickToye thanks for the suggestion. I will look into it as it's a fair request and figure out a good approach

[NickToye]

Good news, although you've spelt Customise wrong. ;)

[gregnb]

Really? http://www.dictionary.com/browse/customize

[NickToye]

Americanisms.

[gregnb]

So #96 has a similar question about more customization support, but for the column header. I have given it some time and I'm trying to come up with a way to solve the current issues and get ahead of future issues. I think it's going to require some breaking changes and what I'm proposing is the following changes to options:

Change options object on custom columns from customRender to customBodyCell which will then setup nicely customHeadCell:

const columns = [
      {
        name: "Active",
        options: {
          filter: true,
          customHeadCell: {
             render: (value, tableMeta, updateValue) => {}
          },
          customBodyCell: {
            render: (value, tableMeta, updateValue) => {
              return (
              <FormControlLabel
                label={value ? "Yes" : "No"}
                value={value ? "Yes" : "No"}
                control={
                  <Switch color="primary" checked={value} value={value ? "Yes" : "No"} />
                }
                onChange={event => {
                  updateValue(event.target.value === "Yes" ? false : true);
                }}
              />
            );

          }
        }
      }
    ];

and then on the options prop adding a property named exposeInternals or exposeMUI (I need a better name here) that would expose the underlying Material-UI components on different sections in the table. That way, if someone has a request like you do above you can go ahead and override without me having to solve requests for opening such access on a ticket by ticket basis.

const options = {
  exposeMUI: {
    search: {
       textField: { someProp: true }
    },
    ...
  }
}; 

then you could go ahead and add a placeholder or any other props to change the underlying MUI component

[gregnb]

@NickToye Since you were quick to correct my usage of customise (lol) I would love some help here on a good way to name that property that would expose access to MUI components. :)

[NickToye]

Happy to help. I’m not at my computer at the moment, but I’ll have a think.

[allenjoy123]

Has this feature been implemented yet. I'd like to be able to allow user to search by entering search terms so as not generate a backend request for every letter.

[allenjoy123]

I have a requirement to have a search button so that the user can trigger and wait for the search request to complete.
I have used lodash debounce to trigger the search but since the response needs to come from the server, it is easy to trigger multiple search requests to the server that overlap each other and confuse the user.
I'd like to be able to add a Search chip beside the 'Close' chip that occurs on clicking on the search icon. Can this component be exposed so I can customize it.

[somsub]

@gregnb Thanks for this awesome component. We also have a requirement to customize the search input control. If there is any assistance I can provide please let me know. exposeMUI seems be a good name if you want to proceed with that. If you don't have bandwidth, I can create a PR with some guidance from you. Thanks

[somsub]

@gregnb Can we do something where the Implementing App (IA) can pass in a Custom Search component that is similar to what we have
<CustomTableSearch onSearch={...} onHide={...} options={options} />. If the IA passes one, then mount that, else mount the inbuilt TableSearch.

_Our Use case:_ We want to override the search UX behavior.

1. We'd like the text field to appear _left of the search icon_ when the user clicks the icon.

1. Hide the Search Icon and have the Close(X) in the same position as the Search Icon.

2. When the user clicks X, then show the Search icon again.

I tried CSS for positioning the Search TextField to open on the left of the Search Icon. That worked partially. But got an error while dynamically setting the search prop to false on onSearchOpen. The hideFocus throws an error

Any suggestions, or thoughts on how to make this happen?

[gabrielliwerant]

The ability to add a custom search bar is now available in 2.8.0. See documentation or release notes for more information.