Добавление горизонтальной полосы прокрутки в mui-datatable

Question

• 1000 1003 *

Вот мой код

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

EDIT: добавлены значения параметров таблицы

Answer 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}
/>

Answer 2

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

В объекте параметров вы можете передать свойство responseive. Он имеет 3 различных значения: вертикальное, стандартное и простое. Stacked - это предыдущая версия, которая скоро будет прекращена.