标签: material-table

我希望我的用户能够拖动材料表上的列并保持该状态持久化。我可以随时获取我的专栏的状态和他们的订单。我确实救了他们。但是，当我尝试使用列的保存顺序进行渲染时，它似乎没有更新我的材质表。

我正在使用 material-table.com 中的 react Material-Table

这是我正在尝试执行的代码：

const tableHeaders = [];
tableHeaders.push({ title: 'a', field: 'a' });
tableHeaders.push({ title: 'b', field: 'b' });
tableHeaders.push({ title: 'c', field: 'c' });

const Table = (props) => {

   const [state, setState] = useState({
      headers: tableHeaders,
      data: data // some data
   });


   const handleColumnDragged = (start, end) => {

      // process the order of columns
      // create as an array i.e. order = [2, 1, 0]

      updateOrder(order);

      // save to database

   }

   const updateHeaderOrder …

我是一个使用 react 的新手，为我的项目使用了材料表

但是字体大小是我喜欢的小，图片附在下面 我想增加表格的字体大小。

这是代码

state = {
      columns: [
        { title: "ID", field: "id", type: "numeric" },
        { title: "Title", field: "title" },
        { title: "Active", field: "active", type: "boolean" },
        { title: "# Questions", field: "number_of_questions" }
      ],
      data: [
        { id: 1, title: "First Survey", active: true, number_of_questions: 9 },
        { id: 2, title: "Second Survey", active: false, number_of_questions: 8 }
      ]
    };
render() {
    return (
      <div className="example-box-wrapper">
        <div className="adjust example-box-wrapper">
          <div id="dynamic-table-example-1_wrapper">
            <MaterialTable
              title="All …

我想生成一个基于 api 数据的自定义列，即使行被删除，该列也保持排序。像下面的图片，但不是硬编码的数字。我引用的库不是 angular-material-table 而是这个：react-table

这是我正在使用的代码：

import React from "react";
import ReactDOM from "react-dom";
import MaterialTable from "material-table";
import Check from "@material-ui/icons/Check";
import Clear from "@material-ui/icons/Clear";
import Delete from "@material-ui/icons/Delete";
import Add from "@material-ui/icons/Add";
import Edit from "@material-ui/icons/Edit";
import Search from '@material-ui/icons/Search'
import "./styles.css";

function App() {
  return (
    <div className="App">
      <MaterialTable
        icons={{
          Add: () => <Add />,
          Check: () => <Check />,
          Clear: () => <Clear />,
          ResetSearch: () => <Clear />,
          Delete: () => <Delete />,
          Search: …

嘿伙计们，我不知道这是否可行，但我想在表外的单独组件上使用下拉列表进行过滤，但仍要过滤当前表。这件事可能吗？如果是的话，我可以举个例子吗？

我在我的项目中使用 material-ui。对于数据表，我使用材料表。material-ui 基本表格有道具“stickyHeader”，它在滚动表格主体时固定表格标题。我需要同样的材料表，但我找不到类似的东西。

我试图用自定义 css 来做，但我的表格变得依赖于布局。是否有任何简单的解决方案可以为我的材料表固定页脚和页眉？

我在我的 React 项目中使用材料表。我有 3 层数据树。这是第一个：

当我单击数据树表中第一层的 2 个项目中的第一个时，是否可以对其进行着色，以便更容易看到其下的值是子元素。像这样：

另外，如果我在向它传递数据时可以给它着色，我会更高兴。这是我传递数据的方式：

data={[
        {
          id: 1, // MAIN ELEMENT 
          name: "Parent",
          value: `Parent`,
        },
        {
          id: 2, //CHILD OF THE MAIN ELEMENT
          name: "Child",
          value: `Child`,
          parentId: 1,
        }]}

是否有一个选项可以在打开父元素之前对其进行着色，这样就可以清楚地看出它是父元素，而其他元素是子元素？

更新：

这是codesandbox 示例。正如您所看到的，当您打开 Parent1 时，Parent2 似乎位于 Parent1 下。我想澄清的是它不在它下面。

https://codesandbox.io/s/jolly-germain-6fncr?file=/src/App.js

我在详细表中添加了图像（可能不正确）。现在我不会编辑数据并且图像字段有问题（没有图像一切正常）。 在此输入图像描述

           columns={[{ title: 'ID', field: 'id' },
                     { title: '', field: 'img'},
                     { title: 'Title', field: 'title' },
                     { title: 'Price', field: 'price' },
                     { title: 'Quantity', field: 'quantity' },
                     { title: 'Subtotal', field: 'subtotal' },
                     { title: 'Description', field: 'description', hidden: true}, ]}
          data={rowData.items.map((item)=>
                  ({id: item.id, title:item.title, 
                    price:item.price,
                    quantity:item.quantity,
                    subtotal:item.price*item.quantity, 
                    description:item.description,
                    img:<img src={item.img} alt="" border="3" height="100" width="100" />
                                                 }))}

        editable={{
                  onRowDelete: oldData =>
                       new Promise((resolve, reject) => {
                           console.log(oldData);   
                           setTimeout(() => {
                               const index = oldData.tableData.id;
                               rowData.items.splice(index, 1); …

我想更改 Material Ui Autocomplet 的占位符字体大小。有什么办法吗？

             <Autocomplete
                  multiple
                  id="tags-outlined"
                  options={top100Films}
                  getOptionLabel={(option) => option.title}
                  defaultValue={[top100Films[13]]}
                  filterSelectedOptions
                  size="small"

                  renderInput={(params) => (
                    <TextField
                      {...params}
                     
                      variant="outlined"

                      placeholder="Enter Transshipment Ports"

                      
                    />
                  )}
                />

我正在使用material-table. 在TablePagination不工作。它在控制台中引发错误。

我尝试按照文档安装软件包。

https://material-table.com/#/docs/install

npm install material-table --save
npm install @material-ui/core --save

我得到这个错误：

Material-UI：caption提供给 classes 道具的键未在 ForwardRef(TablePagination) 中实现。您只能覆盖以下其中一项：root,toolbar,spacer,selectLabel,selectRoot,select,selectIcon,input,menuItem,displayedRows,actions。

警告：失败的道具类型：道具onPageChange在 中标记为必需ForwardRef(TablePagination)，但其值为 undefined。

警告：未知的事件处理程序属性onChangePage。它将被忽略。

警告：未知的事件处理程序属性onChangeRowsPerPage。它将被忽略。

版本：

"@material-ui/core": "^5.0.0-alpha.24",
"material-table": "^1.69.2",

如果我尝试分页，它会在控制台中引发错误。

未捕获的类型错误：_this.props.onChangePage 不是函数

示例代码：

 <MaterialTable
  icons={tableIcons}
  columns={columns}
  data={editable}
  title="Orders"
  localization={{
    toolbar: {
      searchPlaceholder: 'Filter',
      searchTooltip: 'filters the given text'
    },
    header: {
      actions: 'Actions'
    }
  }}
  actions={[
    {
      icon: 'save',
      tooltip: 'Save User',
      onClick: (event, rowData) => …