标签: material-table

当鼠标悬停在材料表中的一行上时突出显示一行

我必须使用哪个组件,才能使用材质表组件在鼠标悬停在一行上时获得一行中的突出显示?

我找不到任何属性或覆盖哪个组件来获取它。

预先感谢您抽出时间 最好的问候

这是代码https://codesandbox.io/s/yv13zjr9w9

reactjs material-table

5
推荐指数
1
解决办法
1429
查看次数

使用远程数据搜索不适用于React物料表

我在这里使用物料表模块[1]和来自Web服务的远程数据。我已经包含了搜索参数,但是它不起作用,并且控制台中没有错误消息。

这是代码:

import React from 'react';
import ReactDOM from "react-dom";
import MaterialTable from 'material-table';


import { forwardRef } from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn'; …
Run Code Online (Sandbox Code Playgroud)

reactjs material-table

5
推荐指数
2
解决办法
493
查看次数

从材料表中的React状态动态查找

我正在使用material-table组件,该组件填充了来自Redux(对象数组)的动态数据,但是随后我在组件状态内对该数据进行了其他处理。要创建列下拉过滤器,每列选项数组中都有一个元素,该元素lookup接收一个对象并根据其值创建下拉列表。我正在从数据中提取一些项目,并将它们放入处于组件状态的元素中。这是一个对象,与lookup收到。事实是该组件显示一个空的下拉菜单,就像对象是空的一样,但不是。我将其登录到控制台,并且该对象充满了我需要的数据。我最初以为是一个渲染问题,对象在开始时是空的,然后填充了数据,但是组件每次都渲染(是的,React是反应性的)。这只是帮助我解决此问题的代码:

表组件

import React, { Component } from "react";
import MaterialTable from "material-table";

class CustomTable extends Component {
  state = {
    column1: "",
    column2: "",
    column3: "",
    column1FilterList: {}
    columns: [
      {
        title: "Column1",
        field: "column1",
        editable: "onAdd",
        filtering: true,
        lookup: { ...this.column1FilterList }
      },
      {
        title: "Column2",
        field: "column2",
        editable: "onAdd",
        filtering: true,
      },
      {
        title: "Column3",
        field: "column3",
        editable: "onAdd",
        filtering: true
      }
    ]
  };

  componentDidMount() {
    this.props.fetchValues()
    this.props.fetchApplications()
    this.filterColumn1ExistingKeys()
  }

  filterColumn1ExistingKeys …
Run Code Online (Sandbox Code Playgroud)

javascript jsx reactjs material-table

5
推荐指数
1
解决办法
375
查看次数

检查材料表行是否仍处于编辑模式

我在material-ui Stepper 中使用材料表,即使该表仍处于编辑模式,用户也倾向于单击“下一步”按钮。这会导致数据丢失。

当用户单击“下一步”按钮时,我能否以某种方式访问​​表信息以检查表/行是否仍处于编辑模式?

reactjs material-ui material-table

5
推荐指数
1
解决办法
2202
查看次数

如何获取ReactJS Material-table搜索结果计数

我在我的项目中使用 Material-table ( https://material-table.com/#/ )。我一直试图弄清楚是否有一种方法可以在使用过滤器或搜索操作时检索搜索结果计数。我已经查看了所有示例和属性,但没有看到任何方法来检索此信息。

例如,如果我总共有 100 行数据,并按“stackOverflow”进行过滤...如果结果列表返回现在呈现的 50 行数据,我如何获得“50”?

reactjs material-table

5
推荐指数
1
解决办法
3242
查看次数

Material-Table React 中的 StickyHeader

我正在看这个例子,我的问题是粘性标题。例子: https: //material-table.com/#/docs/features/fixed-columns

\n\n

我试图弄清楚是否可以将名称高达 BirthPlace 的标题粘贴下来,这样当我创建滚动条时,它就会保留在那里。我尝试了一切,但它总是给我不同的结果。任何帮助都会很棒

\n\n
class BasicFixedColumns extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n    }\n  }\n\n  render() {\n    return (\n      <MaterialTable\n        title="Basic Fixed Columns Preview"\n        columns={[\n          { title: \'Name\', field: \'name\', width: 150 },\n          { title: \'Surname\', field: \'surname\', width: 150 },\n          { title: \'Birth Year\', field: \'birthYear\', type: \'numeric\', width: 150 },\n          {\n            title: \'Birth Place\',\n            field: \'birthCity\',\n            lookup: { 34: \'\xc4\xb0stanbul\', 63: \'\xc5\x9eanl\xc4\xb1urfa\' },\n            width: 150\n          },\n          { title: \'Name\', field: \'name\', width: …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs material-table

5
推荐指数
1
解决办法
8318
查看次数

材料表反应。如何使表格标题和标题具有粘性

是否可以使 Material-Table 中的表格标题、搜索字段、全局操作图标和列标题具有粘性?

我试过将 headerStyle 添加到选项中,但没有效果(无论如何只会影响列标题而不影响表格标题等)

options={{
        headerStyle: { position: 'sticky'},
        paging: false,
        search: false,
    }}
Run Code Online (Sandbox Code Playgroud)

有没有人有任何想法如何做到这一点?

我希望存在“粘性标题”选项,但如果存在,我看不到它!我原以为粘性标题是表格的一个相当常见的用例。

这是使用材料表的基本代码:

import React from 'react';
import MaterialTable from 'material-table';

export default function MaterialTableDemo() {
  const [state, setState] = React.useState({
    columns: [
      { title: 'Name', field: 'name' },
      { 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', …
Run Code Online (Sandbox Code Playgroud)

user-interface reactjs material-ui material-table

5
推荐指数
1
解决办法
8859
查看次数

Material-table:是否可以默认打开detailsPanel?

我正在尝试创建主 React Material-Table的子表。一切都正常工作,因为它应该工作,详细信息面板(子表)显示在按下切换图标时。

有什么方法可以显示它默认打开吗?我的意思是删除切换图标并显示detailPanel组件渲染的右侧?

这是我的 mat-table 的样子(我不想插入整个组件代码,因为它会太多代码,完整代码位于沙箱中):

<MaterialTable
        icons={tableIcons}
        tableRef={tableRef}
        columns={tableColumns}
        data={tableData}
        onRowClick={(evt, selectedRow) =>
          setSelectedRow(selectedRow.tableData.id)
        }
        title="Remote Data Example"
        detailPanel={detailSubtable}
        options={{
          rowStyle: rowData => ({
            backgroundColor:
              selectedRow === rowData.tableData.id ? "#EEE" : "#FFF"
          })
        }}
      />
Run Code Online (Sandbox Code Playgroud)

以及Codesandbox的链接

html javascript reactjs material-ui material-table

5
推荐指数
1
解决办法
3676
查看次数

如何更改 onRowAdd、onRowUpdate、onRowDelete 材质表图标的颜色?

我尝试使用库的材料表进行基本的增删改查操作。通过使用onRowAdd, onRowUpdate, onRowDelete,我得到了相同的图标,但我想知道如何更改这三个图标中每一个的颜色?

你可以看到我的表格有几个图标,我专注于添加、编辑、删除图标,我想更改这些图标的颜色。

这是我的codesandbox 的链接

应用程序.js 文件

import React, { useState } from 'react';
import './App.css';
import MaterialTable from 'material-table'

const empList = [
  { id: 1, name: "Neeraj", email: 'neeraj@gmail.com', phone: 9876543210, city: "Bangalore" },
  { id: 2, name: "Raj", email: 'raj@gmail.com', phone: 9812345678, city: "Chennai" },
  { id: 3, name: "David", email: 'david342@gmail.com', phone: 7896536289, city: "Jaipur" },
  { id: 4, name: "Vikas", email: 'vikas75@gmail.com', phone: 9087654321, city: "Hyderabad" },
] …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs material-ui material-table

5
推荐指数
1
解决办法
3549
查看次数

每次渲染后,React Hook useEffect 中对“data”变量的赋值将会丢失

有一个完整的警告消息:每次渲染后,React Hook useEffect 内部对“data”变量的赋值将丢失。要随着时间的推移保留该值,请将其存储在 useRef Hook 中,并将可变值保留在“.current”属性中。否则,您可以直接将此变量移动到 useEffect 内部。

我正在尝试使用材质表中 useState Hook 中的数据状态来显示数据。这就是为什么我将 const 更改为 let,但它不断给我警告,我不知道如何将 useRef Hook 与 useState Hook 一起使用。

const filterrr = () => {
    
    
            if (age.length !== 0) {
              return true;
            } 
            else {
              return false;
            }
        
          }
    
          let [data, setData] = useState(Data);
    
    
          useEffect(() => {
    
    
            console.log(Data);
            data = Data.filter(filterrr);
            setData(data);
          }, [age])
Run Code Online (Sandbox Code Playgroud)

所以我尝试在 useEffect 之外使用 useState ,以便其他函数可以使用数据状态。

reactjs react-hooks material-table

5
推荐指数
1
解决办法
8810
查看次数