I have this material-ui list:

<List dense>
  {this.state.issues.map((item, i) => {
    return <Link target="_blank" to={item.issue_url} key={i}>
      <ListItem button>
        <ListItemText primary={item.issue_state}/>
        <ListItemSecondaryAction>
          <IconButton>
            <ArrowForward/>
          </IconButton>
        </ListItemSecondaryAction>
      </ListItem>
    </Link>
  })
  }
</List>

issue_state is obtained from MongoDB. Can I add another column to my list showing another field from the database? I tried:

<ListItemText primary={item.issue_state}/>
<ListItemText primary={item.issue_title}/>

This displays what I want but the issue_title test is centered. I'd like it left aligned. Can this be done?

I have this material-ui list:

<List dense>
  {this.state.issues.map((item, i) => {
    return <Link target="_blank" to={item.issue_url} key={i}>
      <ListItem button>
        <ListItemText primary={item.issue_state}/>
        <ListItemSecondaryAction>
          <IconButton>
            <ArrowForward/>
          </IconButton>
        </ListItemSecondaryAction>
      </ListItem>
    </Link>
  })
  }
</List>

issue_state is obtained from MongoDB. Can I add another column to my list showing another field from the database? I tried:

<ListItemText primary={item.issue_state}/>
<ListItemText primary={item.issue_title}/>

This displays what I want but the issue_title test is centered. I'd like it left aligned. Can this be done?

• javascript
• reactjs
• material-ui
• listitem

• Have you tried alignItems property ? – Code Maniac Commented Dec 2, 2018 at 19:18
• Yes. I tried alignItems='flex-start but no luck. – runnerpaul Commented Dec 2, 2018 at 19:24

1 Answer 1

ListItemText ponent renders with the following CSS style that allows it to be flexible to grow and shrink according as the width and height of its content.

flex: 1 1 auto;

Its ancestor ListItem ponent renders as an inline-flex. AFAICT, the results you're looking to achieve can't be done without overriding these styles. Not to worry, there are other ways to go that uses available APIs exposed in the ponent.

Never mind that the name for the ponent seems to be misleading that its usage is specific for rendering text in the list item. A closer look in the ListItemText ponent API documentation shows that the primary property is of the node type.

That implies that the ListItemText can be used to render string, function, and React.Element in a manner similar to the snippet below.

<ListItemText primary={<div>Foo<br/>Bar<br/>Baz</div>} />

There is also the secondary property that renders the elements with textual emphasis.

<ListItemText primary="Foo" secondary={<div>Bar<br/>Baz</div>} />

If you need more control over the children of the ListItemText, the API allows for the flexibility to write it this way

      <ListItemText>
        <Typography variant="subheading">Foo</Typography>
        <Typography variant="body1" color="textSecondary">Bar</Typography>
        <Typography variant="body1" color="textSecondary">Baz</Typography>
      </ListItemText>