Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/25.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用材质表库时,如何更改并删除过滤器图标?_Javascript_Reactjs_Material Ui_Material Table - Fatal编程技术网

Javascript 使用材质表库时,如何更改并删除过滤器图标?

Javascript 使用材质表库时,如何更改并删除过滤器图标?,javascript,reactjs,material-ui,material-table,Javascript,Reactjs,Material Ui,Material Table,我想删除过滤器图标,只有空白的输入框。我尝试过使用列道具,但由于它是内嵌样式,因此无法访问该图标 import React, { Children } from "react"; import ReactDOM from "react-dom"; import MaterialTable from 'material-table'; class Example extends React.Component { render() { return ( <Mat

我想删除过滤器图标,只有空白的输入框。我尝试过使用列道具,但由于它是内嵌样式,因此无法访问该图标


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);

显然,您可以使用图标道具删除任何图标,并将空div元素传递给图标:


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
        }}

      />
    )
  }
}