CODEWITHSUNDEEP
reactjsmaterial-designmaterial-ui
ton1
ton1

Reputation: 7628

How do I add borderTop to React Material UI Table?

enter image description here

What I want to do add top-border to above table.

I tried

const styles = theme => {
    root : { borderTopWidth: 1, borderColor: 'red'}
}

...

class TableComponent ...

{ classes } = this.props; 

<Table className={classes.root}>
</Table

export default withStyles(styles)(TableComponent)

I believe it's not a syntax problem, because other option like background: 'red' working properly. Perhaps I missed something. How can I implement topBorder to this table?

Upvotes: 10

Views: 30385

Answers (2)

Keet Sugathadasa
Keet Sugathadasa

Reputation: 13572

@Shrroy has already answered this. But I was struggling with how to add only the Right Border and not any other borders in a cell. I will share it here, assuming it might help someone else (@Shrroy's answer helped). Similarly, you can have the top border or any other combination (Eg: Right and Left borders only).

How to add Border to only one side of the Cell.

const styles = theme => {
    tableRightBorder : { borderWidth: 0, borderWidth: 1, borderColor: 'red',borderStyle: 'solid'} // or borderTop: '1px solid red'
}

...

class TableComponent ...

{ classes } = this.props; 

<Table >
    <TableHead>
        <TableRow >
            <TableCell>Column 1</TableCell>
            <TableCell>Column 2</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
        <TableRow>
            <TableCell className={classes.tableRightBorder}>Cell 1</TableCell>
            <TableCell>Cell 2</TableCell>
        </TableRow>
    </TableBody>
</Table>

export default withStyles(styles)(TableComponent)

It will look like this. enter image description here

For a complete working component of the above image, try this table

import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/styles';

import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
} from '@material-ui/core';
import { connect } from 'react-redux';

const useStyles = makeStyles(theme => ({
    root: {},
    tableRightBorder: {
        borderWidth: 0,
        borderRightWidth: 1,
        borderColor: 'black',
        borderStyle: 'solid',
    },
}));

const DataTable = props => {
    const classes = useStyles();

    return (
        <Table>
            <TableHead>
                <TableRow>
                    <TableCell>
                        Column 1
                    </TableCell>
                    <TableCell>Column 2</TableCell>
                </TableRow>
            </TableHead>
            <TableBody>
                <TableRow>
                    <TableCell className={classes.tableRightBorder}>
                        Cell 1
                    </TableCell>
                    <TableCell>Cell 2</TableCell>
                </TableRow>
            </TableBody>
        </Table>
    );
};

DataTable.propTypes = {
    className: PropTypes.string,
};

function mapStateToProps() {}

export default connect(mapStateToProps, {})(DataTable);

Upvotes: 0

Liam
Liam

Reputation: 6743

You forgot to define a borderStyle property

const styles = theme => {
    root : { borderTopWidth: 1, borderColor: 'red',borderStyle: 'solid'} // or borderTop: '1px solid red'
}

...

class TableComponent ...

{ classes } = this.props; 

<Table className={classes.root}>
</Table

export default withStyles(styles)(TableComponent)

or you can just add inline style like

<Table style={{borderTop: '1px solid red'}}>
</Table>

Upvotes: 20

Related Questions