I would like to remove the filter icons and just have blank input boxes. I have tried using the column prop filterCellStyle but the icon can't be reached since it's inline styling.

import React, { Children } from "react";
import ReactDOM from "react-dom";
import MaterialTable  from 'material-table';

class Example extends React.Component {
  render() {
    return (
      <MaterialTable
        title="Non Filtering Field Preview"
        columns={[
          { title: 'Name', field: 'name', filterCellStyle: {
            background: "red"
          }},

          { title: 'Surname', field: 'surname' },
          { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
          {
            title: 'Birth Place',
            field: 'birthCity',
            lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
          },
        ]}
        data={[
          { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
          { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        ]}        
        options={{
          filtering: true
        }}

      />
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

I would like to remove the filter icons and just have blank input boxes. I have tried using the column prop filterCellStyle but the icon can't be reached since it's inline styling.

import React, { Children } from "react";
import ReactDOM from "react-dom";
import MaterialTable  from 'material-table';

class Example extends React.Component {
  render() {
    return (
      <MaterialTable
        title="Non Filtering Field Preview"
        columns={[
          { title: 'Name', field: 'name', filterCellStyle: {
            background: "red"
          }},

          { title: 'Surname', field: 'surname' },
          { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
          {
            title: 'Birth Place',
            field: 'birthCity',
            lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
          },
        ]}
        data={[
          { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
          { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        ]}        
        options={{
          filtering: true
        }}

      />
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

• javascript
• reactjs
• material-ui
• material-table

1 Answer 1

Apparently you can use the icons prop to remove any icon and pass an empty div element to the icon:

import React, { Children } from "react";
import ReactDOM from "react-dom";
import MaterialTable  from 'material-table';

class Example extends React.Component {
  render() {
    return (
      <MaterialTable
        icons={{ Filter: () => <div /> }} // <== this solves it
        title="Non Filtering Field Preview"
        columns={[
          { title: 'Name', field: 'name', filterCellStyle: {
            background: "red"
          }},

          { title: 'Surname', field: 'surname' },
          { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
          {
            title: 'Birth Place',
            field: 'birthCity',
            lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
          },
        ]}
        data={[
          { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
          { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        ]}        
        options={{
          filtering: true
        }}

      />
    )
  }
}