标签: mui-datatable

在 MUI DataGrid 中，通过单击任何标题列上的选项菜单，您可以访问列可见性面板。

但我还没有找到从网格外部显示此面板的方法。这个想法是有一个按钮，当单击该按钮时，可以显示面板。即使它保留在网格内的位置

这将避免为此目的构建组件。

例子：

我正在DataGrid @mui/x-data-grid使用导出表CustomToolbar

我有如下一列

        {
            field: 'industry_type',
            headerName: 'Industry',
            renderCell: (params) => {
                const industry = params.row.industry_type;
                return (
                    <>
                        <p>{`${industry.code}- ${industry.value}`} </p>
                    </>
                );
            }
        }

从导出选项下载的 csv 文件给出的值为[object Object]

如何获取 csv 下载文件中的实际值？我需要帮助来解决这个问题。谢谢。

我使用 React.js 和MUI-Datatables创建了一个简单的表：

import MUIDataTable from "mui-datatables";

const columns = ["Name", "Company", "City", "State"];

const data = [
 ["Joe James", "Test Corp", "Yonkers", "NY"],
 ["John Walsh", "Test Corp", "Hartford", "CT"],
 ["Bob Herm", "Test Corp", "Tampa", "FL"],
 ["James Houston", "Test Corp", "Dallas", "TX"],
];

const options = {
  filterType: 'checkbox',
};

<MUIDataTable
  title={"Employee List"}
  data={data}
  columns={columns}
  options={options}
/>

如何将自定义 CSS 类添加到表格内的单行。假设我希望 John Walsh 的第二行具有绿色背景色。

更新：

使用customRowRender允许设置特定行的样式，但我对解决方案仍然不是 100% 满意，因为诸如可选行之类的某些功能不再开箱即用：

const options = {
    filterType: "checkbox",
    customRowRender: (data, dataIndex, …

我正在使用 mui-datatable，其中 onRowClick 将引导用户到另一个页面。我还在每一行都有自定义操作按钮。但是，如果我单击自定义操作按钮，它还会触发 onRowClick，从而将用户引导到另一个页面。单击自定义操作按钮时如何防止 onRowClick？

class orders extends Component {
  constructor() {
    super();
    this.state = { orders: [] };
  }

  handleRowClick = (rowData, rowMeta) => {
    this.props.history.push("/details", `${rowData[0]}`);
  };

  columns = [
    "Order ID",
    "Items",
    "Address",
    "Total Amount",
    {
      name: "Action Button",
      options: {
        filter: true,
        sort: false,
        empty: true,
        customBodyRender: (value, tableMeta) => {
          return (
            <FormControlLabel
              value={value}
              control={
                <Button
                  value={value}                >
                  Action Button
                </Button>
              }
              onClick={(e) => {
                //firestore codes
              }}
            />
          );
        },
      },
    },
  ]; …

我是一个 React.js 初学者。当我尝试将图像头像添加到我的 MUI 表时，出现以下错误。“TypeError：params.rows 未定义”我将把我的代码放在下面。

import React from 'react'

导入“./userList.css”从'@mui/x-data-grid'导入{DataGrid}；

导出默认函数 UserList() {

const columns = [
    { field: 'id', headerName: 'ID', width: 70 },
    { field: 'user', headerName: 'User', width: 200, renderCell: (params)=>{
      return (
        <div>
          <img src={params.rows.avatar} alt='' />
          {params.rows.username}
        </div>
      )
    } },
    { field: 'email', headerName: 'E-mail', width: 130 },
    {
      field: 'status',
      headerName: 'Status',
      width: 90,
    },
    {
      field: 'transaction',
      headerName: 'Transaction',
      width: 100,
    },
    
  ];
  
  const rows = [
    { id: 1, 
    username: …

此代码与 Material UI Datagrid 有关，我需要在加载 API 时禁用“转到下一页”按钮

    <DataGrid
      autoHeight
      getRowHeight={getRowHeight}
      rows={rows}
      columns={columns}
      page={page - 1}
      rowCount={total}
      rowsPerPageOptions={rowsPerPage}
      pagination
      paginationMode='server'
      pageSize={pageSize}
      getRowClassName={(params) => getRowClassName(params)}
      onPageChange={(newPage) => handelPageChange(newPage)}
      loading={isLoading}
      // disableNextPage={isLoading}
      onPageSizeChange={(newPageSize) =>
        setAssetList((prveState) => ({
          ...prveState,
          pageSize: newPageSize,
        }))
      }
    />

我有使用 MUI-Data-Table 组件在数据表中显示的文本列表，但我面临的问题是不是在列中显示单个项目，而是显示项目列表。我有一个叫做系统的项目。它包含一个国家数组，所以我想只在一列中显示该数组，但我不知道该怎么做。

这是我的json：

systeme:{
          archived: 0
           id: 1
           nomSysteme: "Environnement Tn"
           systeme_country: Array(1)
                   {
                    0: {id: 1}
                   length: 1
                     }
        }

这就是我自定义专栏的方式，因为我需要遵循某种模式：

 {
    name: "titre",
    label: "Titre",
    options: {
        filter: true,
        sort: false,
    }
},
{

    name: "theme.systeme.systeme_country",
    label: "Countries",
    options: {
        filter: true,
        sort: false,

    }
},

有关更多解释，选项名称必须与 json 中的相同，并且它只呈现一个对象，但 theme.systeme.system_country 是我想要显示的一组国家/地区 ID，但它不会让我不知道如何自定义我的专栏来做这样的事情，或者我可以做些什么来实现它