score:0
try this:
import react from 'react';
import { makestyles } from '@material-ui/core/styles';
import table from '@material-ui/core/table';
import tablebody from '@material-ui/core/tablebody';
import tablecell from '@material-ui/core/tablecell';
import tablehead from '@material-ui/core/tablehead';
import tablerow from '@material-ui/core/tablerow';
import paper from '@material-ui/core/paper';
const usestyles = makestyles(theme => ({
root: {
fontsize: '200pt',
},
table: {
fontsize: '200pt',
},
}));
function createdata(name, calories, fat, carbs, protein) {
return { name, calories, fat, carbs, protein };
}
const rows = [
createdata('frozen yoghurt', 159, 6.0, 24, 4.0),
createdata('ice cream sandwich', 237, 9.0, 37, 4.3),
createdata('eclair', 262, 16.0, 24, 6.0),
createdata('cupcake', 305, 3.7, 67, 4.3),
createdata('gingerbread', 356, 16.0, 49, 3.9),
];
add the body class to table tag not in tablecell
export default function simpletable() {
const classes = usestyles();
return (
<paper classname={classes.root}>
<table classname={classes.table}>
<tablehead>
<tablerow>
<tablecell>dessert (100g serving)</tablecell>
<tablecell align="right">calories</tablecell>
<tablecell align="right">fat (g)</tablecell>
<tablecell align="right">carbs (g)</tablecell>
<tablecell align="right">protein (g)</tablecell>
</tablerow>
</tablehead>
<tablebody>
{rows.map(row => (
<tablerow key={row.name}>
<tablecell component="th" scope="row">
{row.name}
</tablecell>
<tablecell align="right">{row.calories}</tablecell>
<tablecell align="right">{row.fat}</tablecell>
<tablecell align="right">{row.carbs}</tablecell>
<tablecell align="right">{row.protein}</tablecell>
</tablerow>
))}
</tablebody>
</table>
</paper>
);
}
Source: stackoverflow.com
Related Query
- Fontsize Change for Cell in Material UI Table
- Material Table rowStyle background color change based on cell value in
- How to change Button Color and Name in specific cell in Material UI Table
- Change all cell values in table column, already using 2D array for row and cell
- React testing library on change for Material UI Select component
- How can I change a width of table Material UI / React?
- How to change the text color of the selected row in material ui table
- material ui: how to change fontSize in Lists?
- How can i change the cell colour in ANTD table according to the value?
- How to hide the overflow content in material ui table cell instead of wrapping
- color change for the loading bar component of material ui
- React Material Table action button markup overriding for multiple actions
- How to change the language for KeyboardDatePicker material ui?
- Custom sort for custom render cell Data Grid Material UI
- How to change Table Cell width in Material-ui React table
- how to change material table action fields icon
- onClick event - change data for a single row in react table
- Implement pagination for React Material table
- How to change fontsize of options in Material ui autocomplete?
- Material UI Textfield Can't Change Font Size for Multiline
- How can I show edit button in column cell while hovering over table row in Material UI Table?
- How to change icon size on Alert in Material UI for React
- React - how to handle a cell click of a specific column of a datagrid table of material ui?
- ReactJS 7 - How to conditionally change the background color of table cell only (not the row) based on its value?
- How to change the fontSize in an Antd table
- Material table for react font size is way too small
- React: How to change Table cell background depending on cell value in React table
- How can I change font size of pagination part in material table using react js?
- React Material UI conditional render table cell color
- React table - how to merge tables for specific column and cell value
More Query from same tag
- Identifier is expected || Unexpected token
- Avoiding If statements in render method
- JSON data printing issue in react-js
- Access to XMLHttpRequest at '...' from origin 'localhost:3000' has been blocked by CORS policy
- React - Render complex json data
- Apex chart doesn't display immediately
- Reading docker environmental variables through react-env plugin for a dockerize React application?
- React / NextJS - onClick targets all mapped items - how do i target just one?
- Do we need to do cross browser testing of React application
- Redux toolkit returns the previous state when you make a request for data, how do I fix this?
- how to stop rerendering in react on checkbox check?
- Pass parameter to dynamic import react
- When using Redirect, my state won't update so I never redirect
- How to namespace parent props using mapState
- How to design a ReactJS component that listens to a WebSocket and interacts with CSS animation
- Set background image to full screen in Reactjs
- WebStorm use wrong @types definition file?
- Can't access this.props.location from react-router Link
- clearInterval is not clearing the interval
- React Router with optional path parameter
- React Native - why padding does not work?
- Yup validation based on nested object within nested object
- program to print the frequency of elements in react but getting error "Cannot read property 'charAt' of undefined"
- Set a background for my page in React
- this.props equal to nextProps componentShouldUpdate
- How to make the storybook dynamic in react
- React: How should I populate the HTML?
- How to edit a React component and change the text displayed on screen
- Setting the initial value for a radio button group in Formik
- Restore scroll position on infinite scroll page