REECT MUI DATAGRID-插入线路断开时，当行中的文本命中最大宽度

发布于 2025-01-26 03:48:17 字数 1657 浏览 3 评论 0原文

我有一个使用MUI DataGrid创建的表，并且正在存储一些用户输入。我的问题是，如果文本输入太大，则文本将在最后显示“ ...”。我要实现的目标是如果文本太大，则是在该列内的线路，这就是一个示例。

我希望文本击中列的末尾，将文本分成更多行。

这是我的代码：

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}
    />
  );
};

这是我加载表的地方：

<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>

原文

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.

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陪我终i 2025-02-02 03:48:17

请尝试以下代码。

添加RenderCell如下所示。

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

Please try below code.

Add rendercell as shown below.

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

回复收藏 0 原文

沧桑㈠ 2025-02-02 03:48:17

在Note列中使用渲染单元格方法并写入功能组件，并写出您的逻辑，如果超过某个长度走下一行，只需将数据传递到该函数组件

回复收藏 0 原文

待天淡蓝洁白时 2025-02-02 03:48:17

使用此ValueGetter，您可以调整行的长度，值长度。

{
      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",
}

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

回复收藏 0 原文

指尖凝香 2025-02-02 03:48:17

使用getrowheight将修复它：

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

use getRowHeight will fix it:

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

回复收藏 0 原文

~没有更多了~