javascript - 使用 Material 表库时如何更改删除过滤器图标?

标签 javascript reactjs material-ui material-table

我想删除过滤器图标,只有空白输入框。我试过使用列 Prop filterCellStyle但无法访问该图标,因为它是内联样式。


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

最佳答案

显然你可以使用 icons 属性来删除任何图标并将一个空的 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
        }}

      />
    )
  }
}

关于javascript - 使用 Material 表库时如何更改删除过滤器图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57191145/

相关文章:

javascript - 在 iPad 上使用 JS 进行图像缓存

javascript - 如何为父 JavaScript 文件编写可执行的 jQuery?

javascript - 如何使用 React-Redux 模拟事件?

javascript - 如何修复 : Context Provider not passing new context values down to children

reactjs - 嵌套类的 Material UI 主题样式

reactjs - Material-UI V0.20.2 和 React 16.8.3 自动完成,不会触发输入事件来确认选择

reactjs - 如何使用MUI风格的组件设置边框颜色?

javascript - 如何从 iframe 中获取选定的文本(在 IE 上工作)

javascript - 如何更新故事书中的组件 Prop

javascript - 首次使用后过滤数据功能不起作用