This commit is contained in:
geek 2017-07-19 11:50:37 +09:00
parent 5f6f442cdf
commit 35e6d662a1
4 changed files with 80 additions and 1 deletions

View File

@ -12,6 +12,7 @@
"@types/react-dom": "^15.5.0",
"@types/react-router-dom": "^4.0.4",
"@types/react-tap-event-plugin": "^0.0.30",
"@types/lodash": "^4.14.69",
"awesome-typescript-loader": "^3.1.3",
"css-loader": "^0.28.2",
"copy-webpack-plugin": "^4.0.1",
@ -34,6 +35,7 @@
"react-dom": "15.5.4",
"react-router-dom": "^4.1.1",
"react-tap-event-plugin": "^2.0.1",
"semantic-ui-react": "^0.70.0"
"semantic-ui-react": "^0.70.0",
"lodash": "^4.17.4"
}
}

View File

@ -12,6 +12,7 @@ import { Components } from './containers/test/Components';
import { Sensors } from './containers/test/Sensors';
// import { Layout } from './containers/test/layout/Layout'
import { Tree } from './containers/test/commons/Tree';
import { TableExampleSortable } from './containers/test/TableExampleSortable'
export class Blank extends React.Component<any, any> {
render() {
@ -52,6 +53,7 @@ export class Routes extends React.Component<any, any> {
<Route exact path='/test5' component={ProbeDown} />
<Route exact path='/test6' component={DiscoveryDetails} />
<Route exact path='/test7' component={Tree} />
<Route exact path='/test8' component={TableExampleSortable} />
<Route exact path='/test14' component={Components} />

View File

@ -0,0 +1,74 @@
import * as _ from 'lodash';
import * as React from 'react';
import { Table } from 'semantic-ui-react';
const tableData = [
{ name: 'John', age: 15, gender: 'Male' },
{ name: 'Amber', age: 40, gender: 'Female' },
{ name: 'Leslie', age: 25, gender: 'Female' },
{ name: 'Ben', age: 70, gender: 'Male' },
];
export class TableExampleSortable extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = {
column: null,
data: tableData,
direction: null,
};
}
handleSort = (clickedColumn:any) => () => {
const { column, data, direction } = this.state
if (column !== clickedColumn) {
this.setState({
column: clickedColumn,
data: _.sortBy(data, [clickedColumn]),
direction: 'ascending',
});
return
}
this.setState({
data: data.reverse(),
direction: direction === 'ascending' ? 'descending' : 'ascending',
})
};
render() {
const { column, data, direction } = this.state;
return (
<Table sortable celled fixed>
<Table.Header>
<Table.Row>
<Table.HeaderCell sorted={column === 'name' ? direction : null} onClick={this.handleSort('name')}>
Name
</Table.HeaderCell>
<Table.HeaderCell sorted={column === 'age' ? direction : null} onClick={this.handleSort('age')}>
Age
</Table.HeaderCell>
<Table.HeaderCell sorted={column === 'gender' ? direction : null} onClick={this.handleSort('gender')}>
Gender
</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{_.map(data, ({ age, gender, name }) => (
<Table.Row key={name}>
<Table.Cell>{name}</Table.Cell>
<Table.Cell>{age}</Table.Cell>
<Table.Cell>{gender}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table>
)
}
}

View File

@ -88,6 +88,7 @@ export class LeftMenu extends React.Component<any, any> {
<Dropdown.Item href='#/test14'> Insanity </Dropdown.Item>
<Dropdown.Item href='#/test6'>DiscoveryDetails</Dropdown.Item>
<Dropdown.Item href='#/test7'>Tree</Dropdown.Item>
<Dropdown.Item href='#/test8'>TableExampleSortable</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Menu.Item>