MUIDataTable：在反应应用程序 viewColumns 选项中如何垂直显示列的复选框列表

Question

我有一个 MUI 表实现，这样选项对象 viewColumns 设置为 true，这应该显示弹出器以选择要在复选框的垂直列表中显示的列，如下所示：

，但我将其水平显示在下面的屏幕截图中：

MUIDataTable组件中要传递的选项定义为：

const options = {
      filter: true,
      filterType: "dropdown",
      print: false,
      viewColumns: true,
      selectableRows: false,
      onRowClick: (rowData) => {
        console.log("RowClicked->", rowData);
      },
      responsive: "stacked",
      fixedHeaderOptions: {
        xAxis: false,
        yAxis: true,
      },
    };

列定义为：

export const DEAL_GRID_COLUMNS = [
  {
    name: "someReference",
    label: "Some Reference",
    options: {
      filter: true,
      sort: true,
    },
  },
  {
    name: "businessTeam",
    label: "Business Teams",
    options: {
      filter: true,
      sort: true,
    },
  },
  {
    name: "keyContact",
    label: "Key Contact Lead",
    options: {
      filter: true,
      sort: true,
    },
  },
.....
.....
.....
.....
];

组件被消费为

<MUIDataTable data={gridData} columns={DEAL_GRID_COLUMNS} options={options} />

这里 gridData 是从 Api 响应中收到的

Answer 1

我使用您的options 制作了示例示例，我发现viewColumns popper 是垂直的。我假设存在 mui-datatable 版本问题。仅供参考，我正在使用"mui-datatables": "^2.14.0"

示例如下：

import React, {useEffect, useState} from "react";
import MUIDataTable from "mui-datatables";
import axios from 'axios';

export default function DataTable() {
    const [posts, setPost] = useState([]);
    let signal = axios.CancelToken.source();

    useEffect(() => {
        let isSubscribed = true;
        axios.get(`https://jsonplaceholder.typicode.com/posts`, {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);
            }).catch(err => {
            console.log(err);
        });
        return function cleanup() {
            isSubscribed = false;
            signal.cancel('Api is being canceled');
        }
    }, []);

    const columns = ["id", "title", "body"];

    const options = {
        filter: true,
        filterType: "dropdown",
        print: false,
        viewColumns: true,
        selectableRows: 'none',
        onRowClick: (rowData) => {
            console.log("RowClicked->", rowData);
        },
        responsive: "stacked",
        fixedHeaderOptions: {
            xAxis: false,
            yAxis: true,
        },
    };

    return (
        <MUIDataTable
            title={"Posts"}
            data={posts}
            columns={columns}
            options={options}
        />
    );
}

您可以查看此输出屏幕

Answer 2

我通过覆盖它的 maxWidth 来解决这个问题

MuiPopover: {
    paper: {
      maxWidth: "16%",
    },
  }