How do I style react-table filter input field?

Question

I'm using react-table and have a filter method for each column which works. However, I cannot seem to figure out how I actually style the filter input field - it's white now and blends in with the background.

Here's a codepen where the "Last Name" column is filterable, with an input field: https://codepen.io/anon/pen/QgOdOp?editors=0010

I want to add some semantic styling to this input field, such as this:

                    <div className="ui icon input">
                        // Input values would go here
                        <i className="search icon" />
                    </div>

But I do not seem to know how to bind the input value to the column itself.

I've tried the following in the specific column, but it doesn't render anything:

{
    Header: 'Last Name',
    filterable: true,
    id: 'lastName',
    accessor: d => d.lastName
    Filter: Cellinfo => (
                <div className="ui icon input">
                     <select onChange={event => onFiltersChange(event.target.value)} value={filter ? filter.value : ''}></select> 
                    <i className="search icon" />
                </div>
    )
  }

Mike

Is this 2 questions - how to style the input? and how to bind the input value to the column? – Mafia

Mainly how do actually apply the styling. The other part I'll figure out from the docs I suppose :) – Mike

Are you trying to add an icon to the input field? Or what type of styling do you want? – Mafia

Yes, I have some css from semantic-ui that I want to apply to the input field, and a part of that is adding a search icon indeed :) – Mike

Does the demo contain the input in the Last Name column? – Mafia

I'm very sorry my changes were not saved. It should be updated now with a filter input. – Mike

A bit down the examples here, they do a custom filtering this way.. But I still don't quite get how to apply it. react-table.js.org/#/story/custom-filtering – Mike

Answer 1

This could be accomplished with plain CSS. Give the table an id or class, then target the inputs and style them as needed.

<ReactTable 
  showFilters={true} 
  data={makeData()} 
  columns={columns} 
  className='react-table' 
/>

.react-table input {
  background-color: black;
  color: white;
}

The better option would be to use react-tables built-in Filter column option to define a custom UI for the filter. This is documented in the Custom Filtering example. This allows you to pass a style object.

const columns = [
  {
    Header: 'Name',
    columns: [
      {
        Header: 'First Name',
        accessor: 'firstName',
      },
      {
        Header: 'Last Name',
        filterable: true,
        id: 'lastName',
        accessor: d => d.lastName,
        Filter: ({filter, onChange}) => (
          <input
            onChange={event => onChange(event.target.value)}
            value={filter ? filter.value : ''}
            style={{
              width: '100%',
              backgroundColor: 'gray',
              color: 'white',
            }}
          />
        ),
      },
    ],
  },
  {
    Header: 'Info',
    columns: [
      {
        Header: 'Age',
        accessor: 'age',
      },
    ],
  },
];

Using this you could define a background image to achieve the icon you want. Or you could pass in a custom component which sets an icon element behind the input. Something like this:

Filter: ({filter, onChange}) => {
  return (
        <div style={{position: 'relative'}}>
        <input
          onChange={event => onChange(event.target.value)}
          value={filter ? filter.value : ''}
          style={{
            width: '100%',
            backgroundColor: 'transparent',
            color: '#222222',
          }}
        />
        <i style={{position: 'absolute', right: '10px', lineHeight: '30px'}}>
          Icon
        </i>
      </div>
  )
);

Mafia

I tried implementing your second example, adding a style property(pretty much copy-pasting your entire Filter into my current column). Nothing changes at all, it doesn't affect the styling? – Mike

Wait - it works in the codepen, but not my own example. Something is iffy... This must be the issue all along. Thanks for your help.. Checking it out. It's really weird, i can style the rows but apparently the filter column doesn't take it. – Mike

Don't ever just copy/paste without looking over the code. Many example on Stackoverflow contain psuedocode and typos due to people trying to answer questions quickly. Were you able to get it working? – Mafia

It's just styling, though. And no, the table renders with no errors or warnings, and the filter inputs are there(and working), but the style simply isn't applied somehow. – Mike

I see the styling you applied in your Codepen. Are you talking about on a local build? – Mafia

Yes, my local build; however, it does not differ in terms of column complexity than the codepen, so I'm a bit confused - perhaps the .css from the react-table is overwriting everything? – Mike

Try another change to the input, like a className to make sure your build is working. – Mafia

I can change stuff by overwriting .rt-thead.-filters in my own css - that's strange.. And no, adding className or adding the <i> with an icon simply doesn't do anything – Mike

Are you sure your build script is running? Sounds like your js isn't rebuilding if adding the Filter option isn't working. – Mafia

I am 100% sure. Running webpack in watch mode, and it builds on every change. That isn't the issue. Like I wrote, I can overwrite the css from the react-table.css, but somehow adding this style property does nothing – Mike