[docs] Customized tables

docs/src/pages/demos/tables/CustomizedTable.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Table, { TableBody, TableCell, TableHead, TableRow } from 'material-ui/Table';
+import Paper from 'material-ui/Paper';
+
+const CustomTableCell = withStyles(theme => ({
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
+}))(TableCell);
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing.unit * 3,
+    overflowX: 'auto',
+  },
+  table: {
+    minWidth: 700,
+  },
+  row: {
+    '&:nth-of-type(odd)': {
+      backgroundColor: theme.palette.background.default,
+    },
+  },
+});
+
+let id = 0;
+function createData(name, calories, fat, carbs, protein) {
+  id += 1;
+  return { id, name, calories, fat, carbs, protein };
+}
+
+const data = [
+  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),
+];
+
+function CustomizedTable(props) {
+  const { classes } = props;
+
+  return (
+    <Paper className={classes.root}>
+      <Table className={classes.table}>
+        <TableHead>
+          <TableRow>
+            <CustomTableCell>Dessert (100g serving)</CustomTableCell>
+            <CustomTableCell numeric>Calories</CustomTableCell>
+            <CustomTableCell numeric>Fat (g)</CustomTableCell>
+            <CustomTableCell numeric>Carbs (g)</CustomTableCell>
+            <CustomTableCell numeric>Protein (g)</CustomTableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data.map(n => {
+            return (
+              <TableRow className={classes.row} key={n.id}>
+                <CustomTableCell>{n.name}</CustomTableCell>
+                <CustomTableCell numeric>{n.calories}</CustomTableCell>
+                <CustomTableCell numeric>{n.fat}</CustomTableCell>
+                <CustomTableCell numeric>{n.carbs}</CustomTableCell>
+                <CustomTableCell numeric>{n.protein}</CustomTableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </Paper>
+  );
+}
+
+CustomizedTable.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomizedTable);

docs/src/pages/demos/tables/tables.md

@@ -34,6 +34,12 @@ custom actions.
 
 {{"demo": "pages/demos/tables/CustomPaginationActionsTable.js"}}
 
+## Customized tables
+
+You can customize most of the look and feel of the table by on overriding the styles of the `TableCell` component.
+
+{{"demo": "pages/demos/tables/CustomizedTable.js"}}
+
 ## Advanced use cases
 
 For more advanced use cases you might be able to take advantage of [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/). It's a data grid for Material-UI with paging, sorting, filtering, grouping and editing features.

pages/demos/tables.js

@@ -27,6 +27,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/tables/CustomPaginationActionsTable'), 'utf8')
+`,
+        },
+        'pages/demos/tables/CustomizedTable.js': {
+          js: require('docs/src/pages/demos/tables/CustomizedTable').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/tables/CustomizedTable'), 'utf8')
 `,
         },
       }}

src/Dialog/DialogActions.d.ts

@@ -3,8 +3,8 @@ import { StandardProps } from '..';
 
 export interface DialogActionsProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, DialogActionsClassKey> {
-    disableActionSpacing?: boolean;
-  }
+  disableActionSpacing?: boolean;
+}
 
 export type DialogActionsClassKey = 'root' | 'action';