Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Docs] Update Documentation for Table #2848

Merged
merged 2 commits into from
Jan 9, 2016
Merged

[Docs] Update Documentation for Table #2848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b9b03b7
Update Documentation for Table
Zadielerick Jan 8, 2016
2e1885e
[Docs] Clean up the Table docs
oliviertassinari Jan 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/src/app/app-routes.jsx
View file
Open in desktop
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 TimePicker from './components/pages/components/time-picker';
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={TimePicker} />
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/components/CodeExample/CodeBlock.jsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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