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 поппер вертикальным. Я предполагаю, что есть проблема с версией 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%",
    },
  }