CODEWITHSUNDEEP
cssreactjsmaterial-ui
Ali Ahmadi
Ali Ahmadi

Reputation: 731

Is there an option for splitting cells in Material UI table

I want to split a cell in Material UI table :
import Table from '@material-ui/core/Table'
Of course i know i always have the option of creating a component which does this and instead of a text, putting this component inside a cell, but since this feature is so widely used in tables i thought maybe there is an option i don't know about ?, which is why i decided to ask a question here
Just to clarify, this is why i mean by splitting a cell:
enter image description here

As you can see each cell has two values which are separated using a line.
Is there a setting, option or recommended way to achieve this in Material UI table?

Upvotes: 0

Views: 2921

Answers (2)

Othmane
Othmane

Reputation: 289

    const useStyles = makeStyles(theme => ({
      ...
      divider: {
        margin: theme.spacing(1)
      }
    })); 




  <TableCell align="center" >
      153
      <Divider className={classes.divider} />
      186
    </TableCell>

Upvotes: 0

Mathias-S
Mathias-S

Reputation: 805

There's no specific feature to do this, but you can very easily achieve this by using a <Divider /> inside the cell, like this:

<TableCell>
  9703
  <Divider />
  (16.23) 0.54
</TableCell>

Upvotes: 1

Related Questions