向 mui-datatable 添加水平滚动条答案

【问题标题】：Adding horizontal scrollbar to mui-datatable向 mui-datatable 添加水平滚动条
【发布时间】：2020-11-23 08:26:11
【问题描述】：

我在我的 react 应用程序中使用 mui-datatable，我想在我的表格中添加一个水平滚动条来显示溢出列，而不是让表格超出 Windows 屏幕宽度。 p>

这是我的代码

const TableSection = (props) => {

  const columns = [
    { name: "invoice_id", label: "Invoice No" },
    { name: "mode", label: "Mode" },
    { name: "date", label: "Date" },
    { name: "quantity", label: "Quantity" },
    { name: "status", label: "Status" },
    { name: "shipping_address_owner", label: "Customer" },
    {
      name: "product",
      label: "Products",
      options: {
        customBodyRender: (value, tableMeta, updateValue) => (
          <div>{value.join(",")}</div>
        ),
      },
    },
    {
      name: "payment_made",
      label: "Amount paid",
      options: {
        customBodyRender: function (value, tableMeta, updateValue) {
          return new Intl.NumberFormat().format(value); // comma separator
        },
      },
    },
  ];

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>
            <MUIDataTable
              title={"Recent Purchases Invoice"}
              data={invoiceData}
              columns={columns}
              options={options}
            />
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
};

export default TableSection;

const options = {
  filterType: "checkbox",
  rowsPerPage: 5,
  rowsPerPageOptions: [5, 10, 15, 20],
  downloadOptions: { filename: "InvoiceData.csv", separator: "," },
  elevation: 6,
};

编辑：添加表格选项值

【问题讨论】：

你的选择在哪里？
我已经更新了代码。

标签： reactjs horizontal-scrolling mui-datatable

【解决方案1】：

您可以在选项中使用responsive: 'scrollMaxHeight' 来显示水平滚动。

const options = {
        filterType: 'dropdown',
        responsive: 'scrollMaxHeight',
        count: total,
        page: page,
        rowsPerPage: tableState.rowsPerPage,
        rowsPerPageOptions: [10, 20, 50, 100],
    };

然后将选项传递给 MUIDataTable，如下所示：

<MUIDataTable
  title={"Service Request List"}
  data={requests}
  columns={columns}
  options={options}
/>

【讨论】：

【解决方案2】：

createMuiTheme({
    overrides: {
      MUIDataTable: {
        responsiveStacked: {
          maxHeight: 'none',
          overflowX:'auto'
        },
      },
    },
  });

在选项对象中你可以传递响应属性。它有 3 个不同的值...垂直、标准和简单。 Stacked 来自之前的版本，很快就会被弃用。

【讨论】：