CODEWITHSUNDEEP
reactjstypescriptmaterial-uidatagridline-breaks
gjs
gjs

Reputation: 193

React Mui DataGrid - insert line break when text inside row hits max width

I have a table that I created using MUI DataGrid, and I am storing some user input. My issue is, if the text input is too big, the text will truncate showing "..." at the end. What I'm trying to achieve is to break the line inside that column if the text is too big, here is the example. enter image description here

I want the text to be broken into more lines if it hits the end of the column.

Here is my code:

const columnData: GridColDef[] = [
    {
      field: "createdAt",
      headerName: "DATE",
      minWidth: 150,
      width: 244,
      valueFormatter: (params: GridValueFormatterParams) =>
        dateString(DateTime.fromSeconds(params.value as number).toJSDate()),
    },
    {
      field: "content",
      headerName: "NOTE",
      minWidth: 600,
      width: 1150,
    },
    {
      field: "note-menu-button",
      disableColumnMenu: true,
      sortable: false,
      headerName: "",
      width: 0,
      renderCell: (params) => {
        return (
          <ActionMenu
            id="note-menu-button"
            menuItems={menu}
            rowId={params.id}
          />
        );
      },
    },
  ];
return (
    <Table
      {...props}
      columns={columnData}
      rowHeight={55}
      autoHeight
      pageSize={6}
    />
  );
};

Here is where I load the table:

<Card id="notes-table" sx={{ mb: 4 }}>
        <CardContent>
          <NotesTable
            onNotesEditClick={(id: string) => {
              openEditNoteDialog(id);
            }}
            onNotesDeleteClick={(id: string) => {
              onDeleteNote(id);
            }}
            rows={notes}
            loading={loading}
          />
        </CardContent>
      </Card>

Upvotes: 5

Views: 9851

Answers (4)

farshid
farshid

Reputation: 166

use getRowHeight will fix it:

  <DataGrid
    rows={rows}
    columns={columns}
    getRowHeight={() => 'auto'}
    sx={{
      [`& .${gridClasses.cell}`]: {
        py: 1,
      },
    }}
  />

Upvotes: 0

Dhaval Halari
Dhaval Halari

Reputation: 1

Using this valueGetter you can adjust the length of the row , value length.

{
      field: "description",
      headerName: "Description",
      minWidth: 300,
      sortable: false,
      flex: 1,
      valueGetter: (params) => params.value ? 
                   params.value.toString().slice(0, 34) + 
                   (params.value.toString().length > 34 ? "..." : " ")
                   : params.value,
      headerClassName: "super-app-theme--header",
}

Upvotes: 0

Saranya Rajeshwaran
Saranya Rajeshwaran

Reputation: 31

Please try below code.

Add rendercell as shown below.

renderCell: (cellValues) => {
  return (
    <TextField
      value={cellValues.row.value}
      InputProps={{ disableUnderline: true }}
      multiline
    />
  )
 }

Upvotes: 3

Ali Safarpour
Ali Safarpour

Reputation: 276

use render cell method in note column and write function component and write your logic if more than some length go next line then just pass your data to that function component

Upvotes: 0

Related Questions