-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3017 from mbrookes/docs-example-title-desc-9
[Docs] Tabs, Table - Add title & description to examples. IconButton - Correct README typo.
- Loading branch information
Showing
8 changed files
with
296 additions
and
200 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
194 changes: 194 additions & 0 deletions
194
docs/src/app/components/pages/components/Table/ExampleComplex.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,194 @@ | ||
| 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 styles = { | ||
| propContainerStyle: { | ||
| width: 200, | ||
| overflow: 'hidden', | ||
| margin: '20px auto 0', | ||
| }, | ||
| propToggleHeader: { | ||
| margin: '20px auto 10px', | ||
| }, | ||
| }; | ||
|
|
||
| const tableData = [ | ||
| { | ||
| name: 'John Smith', | ||
| status: 'Employed', | ||
| selected: true, | ||
| }, | ||
| { | ||
| name: 'Randal White', | ||
| status: 'Unemployed', | ||
| }, | ||
| { | ||
| name: 'Stephanie Sanders', | ||
| status: 'Employed', | ||
| selected: true, | ||
| }, | ||
| { | ||
| name: 'Steve Brown', | ||
| status: 'Employed', | ||
| }, | ||
| { | ||
| name: 'Joyce Whitten', | ||
| status: 'Employed', | ||
| }, | ||
| { | ||
| name: 'Samuel Roberts', | ||
| status: 'Employed', | ||
| }, | ||
| { | ||
| name: 'Adam Moore', | ||
| status: 'Employed', | ||
| }, | ||
| ]; | ||
|
|
||
| export default class TableExampleComplex 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} | ||
| > | ||
| {tableData.map( row => ( | ||
| <TableRow selected={row.selected}> | ||
| <TableRowColumn>{row.index}</TableRowColumn> | ||
| <TableRowColumn>{row.name}</TableRowColumn> | ||
| <TableRowColumn>{row.status}</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={styles.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="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} | ||
| /> | ||
| <h3 style={styles.propToggleHeader}>TableBody Properties</h3> | ||
| <Toggle | ||
| name="deselectOnClickaway" | ||
| label="Deselect On Clickaway" | ||
| onToggle={this.handleToggle} | ||
| defaultToggled={this.state.deselectOnClickaway} | ||
| /> | ||
| <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} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.