Skip to content

Commit

Permalink
Merge pull request #2848 from oliviertassinari/docs-table-migration
Browse files Browse the repository at this point in the history 
[Docs] Update Documentation for Table
  • Loading branch information
@oliviertassinari
oliviertassinari committed Jan 9, 2016
2 parents 0ea78a0 + 2e1885e commit 6757cbf
Show file tree
Hide file tree
Showing 14 changed files with 530 additions and 687 deletions.
4 changes: 2 additions & 2 deletions docs/src/app/app-routes.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ import SliderPage from './components/pages/components/Slider/Page';
import SnackbarPage from './components/pages/components/Snackbar/Page';
import SvgIconPage from './components/pages/components/SvgIcon/Page';
import Switches from './components/pages/components/switches';
import Table from './components/pages/components/table';
import TablePage from './components/pages/components/Table/Page';
import TabsPage from './components/pages/components/Tabs/Page';
import TextFieldPage from './components/pages/components/TextField/Page';
import TimePickerPage from './components/pages/components/TimePicker/Page';
Expand Down Expand Up @@ -109,7 +109,7 @@ const AppRoutes = (
<Route path="slider" component={SliderPage} />
<Route path="switches" component={Switches} />
<Route path="snackbar" component={SnackbarPage} />
<Route path="table" component={Table} />
<Route path="table" component={TablePage} />
<Route path="tabs" component={TabsPage} />
<Route path="text-field" component={TextFieldPage} />
<Route path="time-picker" component={TimePickerPage} />
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/components/CodeExample/CodeBlock.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import StylePropable from 'material-ui/lib/mixins/style-propable';
import FlatButton from 'material-ui/lib/flat-button';
import Transitions from 'material-ui/lib/styles/transitions';

const LINE_MAX = 17;
const LINE_MAX = 7;

const styles = {
root: {
Expand Down
172 changes: 172 additions & 0 deletions docs/src/app/components/pages/components/Table/ExampleSimple.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
import React from 'react';
import Table from 'material-ui/lib/table/table';
import TableHeaderColumn from 'material-ui/lib/table/table-header-column';
import TableRow from 'material-ui/lib/table/table-row';
import TableHeader from 'material-ui/lib/table/table-header';
import TableRowColumn from 'material-ui/lib/table/table-row-column';
import TableBody from 'material-ui/lib/table/table-body';
import TableFooter from 'material-ui/lib/table/table-footer';
import TextField from 'material-ui/lib/text-field';
import Toggle from 'material-ui/lib/toggle';

const propContainerStyle = {
width: 200,
overflow: 'hidden',
margin: '20px auto 0 auto',
};

export default class TableExampleSimple extends React.Component {

constructor(props) {
super(props);

this.state = {
fixedHeader: true,
fixedFooter: true,
stripedRows: false,
showRowHover: false,
selectable: true,
multiSelectable: false,
enableSelectAll: false,
deselectOnClickaway: true,
height: '300px',
};
}

handleToggle = (event, toggled) => {
this.setState({
[event.target.name]: toggled,
});
};

handleChange = (event) => {
this.setState({height: event.target.value});
};

render() {
return (
<div>
<Table
height={this.state.height}
fixedHeader={this.state.fixedHeader}
fixedFooter={this.state.fixedFooter}
selectable={this.state.selectable}
multiSelectable={this.state.multiSelectable}
onRowSelection={this._onRowSelection}>
<TableHeader enableSelectAll={this.state.enableSelectAll}>
<TableRow>
<TableHeaderColumn colSpan="3" tooltip="Super Header" style={{textAlign: 'center'}}>
Super Header
</TableHeaderColumn>
</TableRow>
<TableRow>
<TableHeaderColumn tooltip="The ID">ID</TableHeaderColumn>
<TableHeaderColumn tooltip="The Name">Name</TableHeaderColumn>
<TableHeaderColumn tooltip="The Status">Status</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody
deselectOnClickaway={this.state.deselectOnClickaway}
showRowHover={this.state.showRowHover}
stripedRows={this.state.stripedRows}>
<TableRow selected={true}>
<TableRowColumn>1</TableRowColumn>
<TableRowColumn>John Smith</TableRowColumn>
<TableRowColumn>Employed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>2</TableRowColumn>
<TableRowColumn>Randal White</TableRowColumn>
<TableRowColumn>Unemployed</TableRowColumn>
</TableRow>
<TableRow selected={true}>
<TableRowColumn>3</TableRowColumn>
<TableRowColumn>Stephanie Sanders</TableRowColumn>
<TableRowColumn>Employed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>4</TableRowColumn>
<TableRowColumn>Steve Brown</TableRowColumn>
<TableRowColumn>Employed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>5</TableRowColumn>
<TableRowColumn>Joyce Whitten</TableRowColumn>
<TableRowColumn>Employed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>6</TableRowColumn>
<TableRowColumn>Samuel Roberts</TableRowColumn>
<TableRowColumn>Unemployed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>7</TableRowColumn>
<TableRowColumn>Adam Moore</TableRowColumn>
<TableRowColumn>Employed</TableRowColumn>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableRowColumn>ID</TableRowColumn>
<TableRowColumn>Name</TableRowColumn>
<TableRowColumn>Status</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn colSpan="3" style={{textAlign: 'center'}}>
Super Footer
</TableRowColumn>
</TableRow>
</TableFooter>
</Table>

<div style={propContainerStyle}>
<h3>Table Properties</h3>
<TextField
floatingLabelText="Table Body Height"
defaultValue={this.state.height}
onChange={this.handleChange} />
<Toggle
name="fixedHeader"
label="Fixed Header"
onToggle={this.handleToggle}
defaultToggled={this.state.fixedHeader} />
<Toggle
name="fixedFooter"
label="Fixed Footer"
onToggle={this.handleToggle}
defaultToggled={this.state.fixedFooter} />
<Toggle
name="stripedRows"
label="Stripe Rows"
onToggle={this.handleToggle}
defaultToggled={this.state.stripedRows} />
<Toggle
name="showRowHover"
label="Show Row Hover"
onToggle={this.handleToggle}
defaultToggled={this.state.showRowHover} />
<Toggle
name="selectable"
label="Selectable"
onToggle={this.handleToggle}
defaultToggled={this.state.selectable} />
<Toggle
name="multiSelectable"
label="Multi-Selectable"
onToggle={this.handleToggle}
defaultToggled={this.state.multiSelectable} />
<Toggle
name="enableSelectAll"
label="Enable Select All"
onToggle={this.handleToggle}
defaultToggled={this.state.enableSelectAll} />
<Toggle
name="deselectOnClickaway"
label="Deselect On Clickaway"
onToggle={this.handleToggle}
defaultToggled={this.state.deselectOnClickaway} />
</div>
</div>
);
}
}
33 changes: 33 additions & 0 deletions docs/src/app/components/pages/components/Table/Page.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';
import CodeExample from '../../../CodeExample';
import PropTypeDescription from '../../../PropTypeDescription';
import MarkdownElement from '../../../MarkdownElement';

import tableReadmeText from './README';
import tableCode from '!raw!material-ui/lib/table/table';
import tableRowCode from '!raw!material-ui/lib/table/table';
import tableBodyCode from '!raw!material-ui/lib/table/table-body';
import tableFooterCode from '!raw!material-ui/lib/table/table-footer';
import tableHeaderColumnCode from '!raw!material-ui/lib/table/table-header-column';
import tableHeaderCode from '!raw!material-ui/lib/table/table-header';
import tableRowColumnCode from '!raw!material-ui/lib/table/table-row-column';
import TableExampleSimple from './ExampleSimple';
import tableExampleSimpleCode from '!raw!./ExampleSimple';

const TablePage = () => (
<div>
<MarkdownElement text={tableReadmeText} />
<CodeExample code={tableExampleSimpleCode}>
<TableExampleSimple />
</CodeExample>
<PropTypeDescription code={tableCode} header="### Table Properties"/>
<PropTypeDescription code={tableBodyCode} header="### TableBody Properties"/>
<PropTypeDescription code={tableFooterCode} header="### TableFooter Properties"/>
<PropTypeDescription code={tableHeaderColumnCode} header="### TableHeaderColumn Properties"/>
<PropTypeDescription code={tableHeaderCode} header="### TableHeader Properties"/>
<PropTypeDescription code={tableRowColumnCode} header="### TableRowColumn Properties"/>
<PropTypeDescription code={tableRowCode} header="### TableRow Properties"/>
</div>
);

export default TablePage;
6 changes: 6 additions & 0 deletions docs/src/app/components/pages/components/Table/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
## Table

[Tables](https://www.google.com/design/spec/components/data-tables.html)
are used to display data and to organize it.

### Examples
Loading

0 comments on commit 6757cbf

Please sign in to comment.