How can I change a width of table Material UI / React?

Question

I'm making an application with React.JS and Material UI.

I use the table component for my application. I could change the width of column but I cannot change the width of table.

The width of table should be as same as the width of header component.(Purple color).

How can I achieve this?

Please find the current view below. I would appreciate any kind of advice. Thank you so much for your help in advance.

index.js

import React from 'react';
import {
Table,
TableBody,
TableHeader,
TableHeaderColumn,
TableRow,
TableRowColumn,
} from 'material-ui/Table';
import Check from './img/check.png';
import Fail from './img/fail.png';
import Master from './img/Master.png';
import Visa from './img/Visa.png';
import Paypal from './img/Paypal.png';

class PaymentTable extends React.Component {
render() {
return(
  <Table>
  <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
  <TableRow>
    <TableHeaderColumn></TableHeaderColumn>
    <TableHeaderColumn>Today</TableHeaderColumn>
    <TableHeaderColumn>Payment Method</TableHeaderColumn>
    <TableHeaderColumn>Narrative</TableHeaderColumn>
    <TableHeaderColumn>Amount</TableHeaderColumn>
  </TableRow>
</TableHeader>
<TableBody displayRowCheckbox={false}>
  <TableRow>
    <TableRowColumn><img src={Check} alt="Check" className="Check"/>
</TableRowColumn>
    <TableRowColumn>12N35, 22 March 2017</TableRowColumn>
    <TableRowColumn><img src={Master} alt="Master" 
    className="Master"/>MasterCard...4483</TableRowColumn>
    <TableRowColumn>Prestige Cosmetics, Total Intensity Eyeliner Long 
    Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)
   </TableRowColumn>
    <TableRowColumn>$912.51</TableRowColumn>
  </TableRow>
  <TableRow>
    <TableRowColumn><img src={Check} alt="Check" className="Check"/>
   </TableRowColumn>
    <TableRowColumn>12N35, 22 March 2017</TableRowColumn>
    <TableRowColumn><img src={Paypal} alt="Paypal" className="Paypal"/>PayPal</TableRowColumn>
    <TableRowColumn>Prestige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)</TableRowColumn>
    <TableRowColumn>$912.51</TableRowColumn>
  </TableRow>
  <TableRow>
    <TableRowColumn><img src={Check} alt="Check" className="Check"/></TableRowColumn>
    <TableRowColumn>12N35, 22 March 2017</TableRowColumn>
    <TableRowColumn><img src={Visa} alt="Visa" className="Visa"/>VISA...1532</TableRowColumn>
    <TableRowColumn>Prestige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)</TableRowColumn>
    <TableRowColumn>$912.51</TableRowColumn>
  </TableRow>
  <TableRow>
    <TableRowColumn><img src={Fail} alt="Fail" className="Fail"/></TableRowColumn>
    <TableRowColumn>12N35, 22 March 2017</TableRowColumn>
    <TableRowColumn><img src={Visa} alt="Visa" className="Visa"/>VISA...1532</TableRowColumn>
    <TableRowColumn>Prestige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)</TableRowColumn>
    <TableRowColumn>$912.51</TableRowColumn>
  </TableRow>
  <TableRow>
     <TableRowColumn><img src={Check} alt="Check" className="Check"/></TableRowColumn>
    <TableRowColumn>12N35, 22 March 2017</TableRowColumn>
    <TableRowColumn><img src={Master} alt="Master" className="Master"/>MasterCard...4483</TableRowColumn>
    <TableRowColumn>Prestige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)</TableRowColumn>
    <TableRowColumn>$912.51</TableRowColumn>
  </TableRow>
 </TableBody>
 </Table>
 );
 }
 }
 export default PaymentTable;

style.css

  .table {
   width: 1200px;
   }

** Edit **

I edited as per advice. Now, the width was widened but it does not cover the width of window. Instead, a slide bar appeared below the table..

Answer 1

material UI has a <TableContainer></TableContainer> component that you can size and will allow the table inside to overflow if the content is too big

It also keeps the table header at the top if you use stickyHeader on the table

Answer 2

overwrite the width using the style={} prop to the Table Component. An example would look like:

<Table style={{ width: 1200 }}>