React-table: Support for filter input placeholders

[atfergus]

Is there currently a suggested way to have placeholder attributes in the default filter inputs?

I see that I can specify a custom rendering of the filter, but that also requires me to also manage the onChange handler and other attributes of the filter. The custom rendering looks something like this (from the demo):

filterRender: ({filter, onFilterChange}) => (
      <select
        onChange={event => onFilterChange(event.target.value)}
        style={{width: '100%'}}
        value={filter ? filter.value : 'all'}>
        <option value="all"></option>
        <option value="true">Can Drink</option>
        <option value="false">Can't Drink</option>
      </select>
    )

I would expect an interface similar to the defaultSorting property, something like:

defaultFiltering={[{
        id: 'age',
        placeholder:'Search for age'
      }]}

Is anything similar possible?

I am using version 5.4.1. Appreciate the help!

[aaronschwartz]

I'm not sure that will make it into the Core but we can certainly have a discussion about it in the react-chat slack channel.

The defaultFiltering option isn't really meant to hold that sort of information. If we did something like this it would probably have it's own filterPlaceholder option on the column.

I think this is easy enough to do currently though. The default filter isn't too complicated. Just create a little helper function that generates the filterRender option for you:

makePlaceholderFilter(placeholder) {
  return ({filter, onFilterChange}) => (
      <input type='text'
        placeholder={placeholder}
        style={{
          width: '100%'
        }}
        value={filter ? filter.value : ''}
        onChange={(event) => onFilterChange(event.target.value)}
      />
    )
}

filterRender: makePlaceholderFilter("Custom Text")

[tannerlinsley]

Closing for now. If there are more questions on implementation, please inquire on the slack channel

[ThomasVuillaume]

I don't have any questions about @aaronschwartz suggestion (which is working fine btw), but i'd rather like to have it like @atfergus mentioned:

defaultFiltering={[{
        id: 'age',
        placeholder:'Search for age'
      }]}

It's sad and not really cool to have empty filter boxes.

[Darex1991]

Now, for changing filtering you need to use 'Filter'
```
Filter: ({filter, onChange}) => (
placeholder="test"
value={filter ? filter.value : ''}
onChange={event => onChange(event.target.value)}
/>
)

[heikunKeikun]

I created a simple function to add the placeholder to the filter fields:

addFilterPlaceholder = () => {
  const filters = document.querySelectorAll("div.rt-th > input");
  for (let filter of filters) {
    filter.placeholder = "Search..";
  }
}

componentDidMount() {
  this.addFilterPlaceholder();
}

[Alan-Hinton]

I found that method really useful but it required a couple of changes to get the typing working correctly in typescript. Here is my typescript version:

  addFilterPlaceholder = () =>
    document
      .querySelectorAll<HTMLInputElement>('div.rt-th > input')
      .forEach(filter => (filter.placeholder = 'Search..'))

[ntanwir10]

@heikunKeikun and @Alan-Hinton both of your suggestions work perfectly fine when I try them out in codeSandbox but not in the project and I've no clue why.

and defaultFiltering={[{placeholder: "search"}]} and this does not work either.