1

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

这是我的代码

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

编辑：添加表选项值

4

2 回答 2

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}
/>
于 2020-08-23T11:05:30.290 回答
0 
createMuiTheme({
    overrides: {
      MUIDataTable: {
        responsiveStacked: {
          maxHeight: 'none',
          overflowX:'auto'
        },
      },
    },
  });

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

于 2020-08-03T17:10:52.853 回答