向mui-datatable添加水平滚动条

Question

我在我的react应用程序中使用了mui，我希望在我的表中添加一个水平滚动条来显示溢出列，而不是让表超出窗口屏幕的宽度。

这是我的密码

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,
};

编辑:添加表选项值

Answer 1

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

在options对象中，可以传递响应属性。它有3种不同的values...vertical，标准和简单。堆栈是来自上一个版本，它将很快被废弃。

Answer 2

您可以在选项中使用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}
/>