How do i fix the text/data overflow in material-ui?

Question

I'm using MaterialTable from material-ui the problem i'm having is In my mobile size, the data in my table tends to overflow. This is not an issue in the normal desktop mode. How do i fix this.

<MaterialTable
      className={classes.table}
      title="Editable Example"
      columns={state.columns}
      data={state.data}
      options={{
        padding: "dense",
        tableLayout: "fixed",
        actionsColumnIndex: -1,
        exportButton: true,
      }}
      editable={{
        onRowAdd: (newData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              setState((prevState) => {
                const data = [...prevState.data];
                data.push(newData);
                return { ...prevState, data };
              });
            }, 600);
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              if (oldData) {
                setState((prevState) => {
                  const data = [...prevState.data];
                  data[data.indexOf(oldData)] = newData;
                  return { ...prevState, data };
                });
              }
            }, 600);
          }),
        onRowDelete: (oldData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              setState((prevState) => {
                const data = [...prevState.data];
                data.splice(data.indexOf(oldData), 1);
                return { ...prevState, data };
              });
            }, 600);
          }),
      }}
    />

Below is the visual of the problem

To fix this you can style the text so that it has overflow: none; text-overflow: ellipsis; white-space: nowrap. But I think your issue is also that you have 7 columns on a tiny mobile screen. Your design should accommodate mobile users in a usable way, just because the columns can squish down doesn't mean it's practical. — JMadelaine
– JMadelaine, Commented Jul 2, 2020 at 20:22

Eric · Accepted Answer · 2020-07-03 02:22:04Z

1

This can be fixed by adding rowStyle to options. A demo example here Live Demo

options={{
    padding: "dense",
    tableLayout: "fixed",
    actionsColumnIndex: -1,
    exportButton: true,
    rowStyle: {
      wordWrap: 'break-word',
    },
  }}

answered Jul 3, 2020 at 2:22

Eric

1,3771 gold badge11 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shadow Walker Over a year ago

This solves the problem uniquely by extending the row height but is there a way of having a horizontal scroll for the table to cover the overflow?

Guru Hadadi · Accepted Answer · 2020-07-03 02:17:54Z

You can solve your issue in 2 ways.

use overflow and set it to scroll or hidden or anything of your choice (but not none)

{
    title: "col1",
    field: "col1",
    cellStyle: {
      overflow: "scroll"
    }
  },

Remove tableLayout: fixed By removing the tableLayout in options, you will automatically get the horizontal scroll

Working demo

full code snippet

const columns = propValue => [
  {
    title: "Avatar",
    field: "avatar",
    render: rowData => (
      <img
        style={{ height: 36, borderRadius: "50%" }}
        src={rowData.avatar}
        alt=""
      />
    ),
    cellStyle: {
      backgroundColor: "#039be5",
      color: "#FFF"
    },
    width: "14%" //<---- here
  },
  {
    title: "col1",
    field: "col1",
    cellStyle: {
      overflow: "scroll"
    }
  },
  {
    title: "col2",
    field: "col2",
    cellStyle: {
      overflow: "auto"
    }
  },
  {
    title: "col3",
    field: "col3",
    cellStyle: {
      overflow: "hidden"
    }
  },
  { title: "Id", field: "id" },
  { title: "First Name", field: "first_name" },
  {
    title: "Last Name",
    field: "last_name",
    cellStyle: {
      backgroundColor: "#039be5",
      color: "#FFF",
      display: propValue ? "inline-block" : "block" //<---- here
    }
  }
];

class App extends Component {
  tableRef = React.createRef();
  propValue = true;

  render() {
    return (
      <div style={{ maxWidth: "100%" }}>
        <MaterialTable
          tableRef={this.tableRef}
          columns={columns(this.propValue)}
          data={query =>
            new Promise((resolve, reject) => {
              let url = "https://reqres.in/api/users?";
              url += "per_page=" + query.pageSize;
              url += "&page=" + (query.page + 1);
              fetch(url)
                .then(response => response.json())
                .then(result => {
                  resolve({
                    data: result.data.map(x => ({
                      ...x,
                      col1:
                        "overflow scroll overflow scroll overflow scroll overflow scroll ",
                      col2:
                        "overflow auto overflow auto overflow auto overflow auto ",
                      col3:
                        "overflow hidden overflow hidden overflow hidden overflow hidden"
                    })),
                    page: result.page - 1,
                    totalCount: result.total
                  });
                });
            })
          }
          title="Fix overlap issue"
          options={{ tableLayout: "fixed" }} //<------here
        />
        <button
          onClick={() => {
            this.tableRef.current.onQueryChange();
          }}
        >
          ok
        </button>
      </div>
    );
  }
}

Collectives™ on Stack Overflow

How do i fix the text/data overflow in material-ui?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related