Horizontal scrollbar on React Admin List

Question

I have a problem, I have a ListView on react admin with 12 columns in the datagrid. The problem is that when the screen is too small I don't even have a horizontal scrollbar in this table ... Can you tell me where this might be coming from? Here's my ListView in question:

<>
      <List
        actions={<ListActions />}
        filters={ProductFilterBuilder(products, collections)}
        exporter={false}
      >
        <DatagridConfigurable bulkActionButtons={false} size={"medium"}>
          <ImageField source="image.src" label="Image" />
          <TextField source="title" label="Product Name" />
          <TextField source="vendor" label="Supplier" />
          <TextField source="product_type" label="Product type" />
          {/* <TextField source="tags" label="Tags" /> */}
          <WithRecord
            label="SKU"
            render={(record) => {
              return (
                <>
                  {record.variants
                    ? record.variants[0].sku
                    : "MLP-" + record.supplier}
                </>
              );
            }}
          />
          <WithRecord
            label="Price"
            render={(record) => {
              return <>{record.variants ? record.variants[0].price : "1,50"}</>;
            }}
          />
          <TextField source="status" label="Status" />
          <WithRecord
            label="Arrêté"
            render={(record) => {
              return record.metafields.stopped === true ? (
                <span>OUI</span>
              ) : (
                <span>NON</span>
              );
            }}
          />
          <WithRecord
            label="Sales history (365d/30d/7d)"
            render={(record) => {
              return (
                <div style={{ display: "flex" }}>
                  <div
                    style={{
                      borderRadius: "10px",
                      background: "#f0f0f0",
                      padding: "10px",
                      margin: "5px",
                    }}
                  >
                    <div>
                      {record.order_quantity_year
                        ? record.order_quantity_year
                        : 0}
                    </div>
                  </div>
                  <div
                    style={{
                      borderRadius: "10px",
                      background: "#f0f0f0",
                      padding: "10px",
                      margin: "5px",
                    }}
                  >
                    <div>
                      {record.order_quantity_month
                        ? record.order_quantity_month
                        : 0}
                    </div>
                  </div>
                  <div
                    style={{
                      borderRadius: "10px",
                      background: "#f0f0f0",
                      padding: "10px",
                      margin: "5px",
                    }}
                  >
                    <div>
                      {record.order_quantity_7day
                        ? record.order_quantity_7day
                        : 0}
                    </div>
                  </div>
                </div>
              );
            }}
          />
          <DateField source="updated_at" label="Update Date" />
        </DatagridConfigurable>
      </List>
     </>

When the screen is reduced to 13 inches, for example, you can't even access the buttons on the left, such as the editable column buttons.

Answer 1

One possible solution is to use a library like react-use to get the viewport's width, and then add some styling (via sx) to the <Datagrid> to fix its width and enable horizontal scrolling.

Something like:

import { List, DatagridConfigurable, ImageField } from 'react-admin';
import { Box } from '@mui/material';
import { useMeasure } from 'react-use';

const INNER_PADDING = 32;

export const MyList = () => {
    const [ref, { width }] = useMeasure<HTMLDivElement>();
    return (
      <Box ref={ref}>
        <List>
          <MyDatagrid width={width - INNER_PADDING} />
        </List>
      </Box>
    );
};

const MarketplaceDatagrid = (props: { width?: number }) => (
    <DatagridConfigurable
        sx={{
            overflowX: 'auto',
            width: props.width,
        }}
    >
        <ImageField source="image.src" label="Image" />
        {/* ... */}
    </DatagridConfigurable>
);

EDIT: I think I should also mention that the <DatagridAG> component, part of the Enterprise Edition of React Admin, has this feature built-in.