6

I'm trying to have two separate lines of text within one cell, where one line of text is on top of the other, in Material-UI's datagrid component and can not seem to get anything to work. This is what I have tried:

 const columns: ColDef[] = [
        {
            field: "name",
            headerName: "Sector",
            width: 300,
            renderCell: (params) => {
                let name = params.data.name
                const flow = params.data as IOFlow;
                const title = Currency.format(flow.value)
                    + " " + props.direction
                    + " per " + Currency.format(1);
                return (
                    <>
                         <Typography fullWidth display='block'>
                              {name}
                         </Typography>
                         <br/>
                         <Typography fullWidth display='block'>
                              {title}
                         </Typography>
                    </>
                );
            }
        },
    ];

Please let me know if there is anymore information I should provide.

ZimZimma
  • 178
  • 1
  • 1
  • 7

1 Answers1

10

The main issue is that you should not use a fragment (<>...</>) around your cell contents. Use a <div> instead. The cell is styled with display: flex which will layout the direct children (i.e. your Typography elements) horizontally. If you wrap the cell contents in a <div>, the contents within the <div> will behave as you would expect.

Here's a working example:

import * as React from "react";
import { DataGrid } from "@material-ui/data-grid";
import Typography from "@material-ui/core/Typography";

const columns = [
  {
    field: "name",
    headerName: "Sector",
    width: 300,
    renderCell: (params) => (
      <div>
        <Typography>{params.value.name}</Typography>
        <Typography color="textSecondary">{params.value.title}</Typography>
      </div>
    )
  }
];

const rows = [
  {
    id: 1,
    name: { name: "Name1", title: "Title1" }
  },
  {
    id: 2,
    name: { name: "Name2", title: "Title2" }
  },
  {
    id: 3,
    name: { name: "Name3", title: "Title3" }
  }
];

export default function RenderCellGrid() {
  return (
    <div style={{ height: 300, width: "300" }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}

Edit Multi-line DataGrid cell

Ryan Cogswell
  • 75,046
  • 9
  • 218
  • 198
  • 1
    I want to have a variable list of items but when I did this using a map around the Typography the row's height didn't adjust for it. Do you know if there is a way to change the row's height? – Lianne May 24 '21 at 15:18
  • This does not work multilines, it only fits for two lines for me. – Eoop Xoeno Jun 11 '21 at 06:39
  • @EoopXoeno You can use the `rowHeight` prop on `DataGrid` to change the row height (which defaults to 52px), but this will change all rows in the grid -- it isn't dynamic based on content. – Ryan Cogswell Jun 11 '21 at 15:28
  • If I want to have one value as multiline like "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." How to achieve this ? – Prateek Goyal Dec 28 '21 at 07:47