标签: material-table

我编写了一个函数，用于在单击行时onRowClick更改行值，如此处的答案＃300所示tableData.checked

我可以在控制台日志中看到选中状态的更新，但在我实际单击另一个行复选框之前，复选框本身不会发生明显变化。然后它将显示所有已tableData.checked更新其值的复选框。我希望能够让复选框在 RowClick 上实际向用户显示此更改。

这是我当前的代码：

<MaterialTable
          onRowClick={(event, rowData) => {
            console.log(event.target, rowData);
            console.log(
              "Row Selection State Before: " + rowData.tableData.checked
            );
            rowData.tableData.checked = !rowData.tableData.checked;
            console.log(
              "Row Section State After: " + rowData.tableData.checked
            );
          }}
         options={{ selection: true}}
/>

这是我单击第一行时的 UI 状态：

控制台登录第一行单击：

UI 选择一个复选框后（直接单击另一行的复选框）：

再次单击初始行后的控制台日志：

checked当以编程方式更新状态时，有什么方法可以确保 MaterialTable 组件的 UI 更新而无需重置任何内容？

我也让 tableRef.onRowSelected 正常工作，但 UI 仍然不会在选中行复选框的情况下重新渲染。

这是我尝试过的修复的代码和框

我正在尝试使用反应钩子编辑/删除材料表中的一行。虽然我可以看到状态正在被修改，但它并没有重新渲染材质表。在 setdata 之后 useeffect 不会触发。

import React, { useState, useEffect } from "react";
import faker from "faker";
import MaterialTable from "material-table";
import * as _ from "lodash";

let testData = [];

for (var i = 0; i < 100; i++) {
    testData.push({
        _id: i,
        fullName: faker.name.findName(),
        "email.address": faker.internet.email(),
        phone_number: faker.phone.phoneNumber(),
        address: {
            city: faker.address.city(),
            state: faker.address.state(),
            country: faker.address.country()
        }
    });
}

let columndata = [
    { title: "Id", field: "_id" },
    { title: "Name", field: "fullName" },
    { title: "Email", …

我正在尝试使用材料表，我想在材料表中使用colspan和rowspan。我已经搜索了 example 和 sample，但我什么也没看到。

目前，我以前喜欢在材料表中

<TableHead>
                      <TableRow>
                        <TableCell rowSpan={2}>Approve</TableCell>
                        <TableCell rowSpan={2} align="center">Date</TableCell>
                        <TableCell rowSpan={2} align="center">Emp id</TableCell>
                        <TableCell rowSpan={2} align="center">Emp Name</TableCell>
                        <TableCell rowSpan={2} align="center">Shift</TableCell>
                        <TableCell rowSpan={2} align="center">Cost Center</TableCell>

                        <TableCell colSpan={2} align="center">In</TableCell>
                        <TableCell colSpan={2} align="center">Out</TableCell>

                        <TableCell rowSpan={2} align="center">Action</TableCell>
                      </TableRow>
                      <TableRow>                       
                        <TableCell align="center">Time</TableCell>
                        <TableCell align="center">Date</TableCell>
                        <TableCell align="center">Time</TableCell>
                        <TableCell align="center">Date</TableCell>
                      </TableRow>
                    </TableHead>

我怎样才能在material-table.

这是我的代码：

import React, { useState, useEffect } from 'react';
import { Fade } from "@material-ui/core";
import MaterialTable from 'material-table';
import { makeStyles } from '@material-ui/core/styles';

import './styles.css';

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
        width: '70%',
        margin: 'auto',
        marginTop: 20,
        boxShadow: '0px 0px 8px 0px rgba(0,0,0,0.4)'
    }
}));

function User(props) {
    const classes = useStyles();
    const [checked, setChecked] = React.useState(false);

    useEffect(() => {
        setChecked(prev => !prev);
    }, [])

    const [state, setState] = React.useState({
        columns: [
            { title: …

首先，我已经测试了我找到的所有可能的解决方案，但仍然没有解决我的问题。

我想在材料表行中设置较短的高度。这就是现在的样子。

桌子

我希望我的行的高度与该图像中的标题相似。我尝试了很多事情，其中​​之一如下：

    options={{
         headerStyle: {
             whiteSpace: "nowrap",
             height: 20,
             maxHeight: 20,
             padding: 0
         },
         rowStyle: {
             height: 20,
             maxHeight: 20,
             padding: 0
         },
    }}

如果有人可以帮助我，我将非常感激。

我想删除过滤器图标，只保留空白输入框。我尝试使用列属性filterCellStyle但无法访问该图标，因为它是内联样式。

\nimport React, { Children } from "react";\nimport ReactDOM from "react-dom";\nimport MaterialTable  from \'material-table\';\n\nclass Example extends React.Component {\n  render() {\n    return (\n      <MaterialTable\n        title="Non Filtering Field Preview"\n        columns={[\n          { title: \'Name\', field: \'name\', filterCellStyle: {\n            background: "red"\n          }},\n\n          { title: \'Surname\', field: \'surname\' },\n          { title: \'Birth Year\', field: \'birthYear\', type: \'numeric\' },\n          {\n            title: \'Birth Place\',\n            field: \'birthCity\',\n            lookup: { 34: \'\xc4\xb0stanbul\', 63: \'\xc5\x9eanl\xc4\xb1urfa\' },\n          },\n        ]}\n        data={[\n          { name: \'Mehmet\', surname: \'Baran\', birthYear: 1987, birthCity: …

我想增加材料表页脚分页部分的字体大小。

在下图中，我可以使用以下代码更改每页行的字体大小

[1]：https://i.stack.imgur.com/cjNmp.png

components={{
    Pagination: props => (
      <TablePagination
        {...props}

        SelectProps={{
          style:{
            fontSize: 20
          }
        }}
      />
    )
  }}

但仍然无法改变整个下划线部分的增加尺寸

我需要在材质表列渲染属性中使用自定义函数。该函数被调用，我在控制台上打印了预期的结果，但是，结果根本不会在表中呈现。这是代码：

import React from 'react';
import HraReferenceDataContext from '../context/hraReferenceData/hraReferenceDataContext';
import MaterialTable from 'material-table';

const EmployeeDetailsCompanyDocuments = ({ companyDocumentsData }) => {
    const hraReferenceDataContext = React.useContext(HraReferenceDataContext);
    const { companyDocumentTypes } = hraReferenceDataContext;

    const getDocumentTypeForRow = id => {
        companyDocumentTypes.forEach(type => {
            if (type.id === id) {
                console.log(type.name)
                return type.name;
            }
        });
    };

    const columnInfo = [
        {
            field: 'typeId',
            title: 'Type',
            render: rowData =>{ getDocumentTypeForRow(rowData.typeId)}, //here is the problem
        },
        { field: 'created', title: 'Created On' },

    ];

    return (
              <MaterialTable …

您好，我正在尝试在材质表上应用自定义 CSS，但它无法正常工作。我尝试在 Material UI 中使用 makeStyles 函数来做到这一点，但仍然不起作用。我想要排序箭头就在文本后面。现在排序箭头位于文本左侧。我还希望将向上箭头和向下箭头放在一起。我创建了一个函数 -

const useStylesTableSort = makeStyles({
  root: {
    flexDirection: "unset",
  },
});

这是我的材料表代码 -

<MaterialTable
  className={{useStylesTableSort.root}}
  style={{ flexDirection: "unset" }}
  title=""
/>

我想在材质表中使用 className 添加此函数，但材质表不支持 className。样式标签也不起作用。那么我怎样才能做到这一点呢？我想更改 MuiTableSortLabel 的根 css。任何帮助，将不胜感激。

I am using material-table https://material-table.com/#/docs/get-started. However I can't seem to find any information about showing a default message if no data is returned?

I am wondering if anyone knows how I would go about this. Below is the test table I have created (with fake data). Now if that data is empty I want a message to show where the table data would be saying "create your ad now", with a button.

import React from 'react';
import { forwardRef …