table sort file create and modify

This commit is contained in:
geek 2017-07-28 18:17:03 +09:00
parent aae212a9db
commit 34adb75d10
3 changed files with 13 additions and 9 deletions

View File

@ -35,7 +35,6 @@ export class AppLayout extends React.Component<Props, State> {
<LeftMenu /> <LeftMenu />
<Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}> <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
<Header /> <Header />
<div>ddddddddddddd</div>
<Route exact path={`${this.props.match.url}/tablesort`} component={TableSortView} /> <Route exact path={`${this.props.match.url}/tablesort`} component={TableSortView} />
<Footer /> <Footer />
</Segment> </Segment>

View File

@ -8,7 +8,7 @@ export interface StateProps {
} }
export interface DispatchProps { export interface DispatchProps {
columnClick?(col:any):void; onBodyRowClick?(row:any):void;
} }
export type Props = StateProps & DispatchProps; export type Props = StateProps & DispatchProps;
@ -63,7 +63,7 @@ const tableData = [
]; ];
export class TableSort extends React.Component<Props, State> { export class TableSort extends React.Component<Props, State> {
constructor(props: any, context: any) { constructor(props: Props, context: State) {
super(props, context); super(props, context);
this.state = { this.state = {
@ -91,8 +91,11 @@ export class TableSort extends React.Component<Props, State> {
let column:Map<string, string> = new Map(); let column:Map<string, string> = new Map();
for (let obj in tem) { for (let obj in tem) {
if (tem.hasOwnProperty(obj)) { if (tem.hasOwnProperty(obj)) {
Object.keys(tem[obj]).map((key:string, index:number ) => { Object.keys(tem[obj]).map((key:string ) => {
if (tem[obj].hasOwnProperty(key)) { if (tem[obj].hasOwnProperty(key)) {
if (column.get(key) != null ) {
return column;
}
column.set(key, key); column.set(key, key);
} }
}); });
@ -117,7 +120,7 @@ export class TableSort extends React.Component<Props, State> {
private renderHeaderCells = ():JSX.Element[] => { private renderHeaderCells = ():JSX.Element[] => {
const { column, data, direction } = this.state; const { column, data, direction } = this.state;
let te = this.getHeaderValue(); let te = this.getHeaderValue();
let arr = new Array(); let arr = [];
te.forEach((value:string, key:string ) => { te.forEach((value:string, key:string ) => {
arr.push( arr.push(
@ -130,7 +133,7 @@ export class TableSort extends React.Component<Props, State> {
} }
private generationBodyRow(): JSX.Element[] { private generationBodyRow(): JSX.Element[] {
let arr = new Array<JSX.Element>(); let arr = [];
let idx:number = 0; let idx:number = 0;
for(let temp of this.state.data) { for(let temp of this.state.data) {
arr.push( <Table.Row key={idx++}> { this.renderBodyCells(temp) } </Table.Row> ); arr.push( <Table.Row key={idx++}> { this.renderBodyCells(temp) } </Table.Row> );
@ -140,7 +143,7 @@ export class TableSort extends React.Component<Props, State> {
private renderBodyCells = (temp:any): JSX.Element[] => { private renderBodyCells = (temp:any): JSX.Element[] => {
let te = this.getHeaderValue(); let te = this.getHeaderValue();
let arr = new Array(); let arr = [];
te.forEach((value:string, key:string ) => { te.forEach((value:string, key:string ) => {
@ -148,6 +151,8 @@ export class TableSort extends React.Component<Props, State> {
}); });
return arr; return arr;
} }
private handleSort = (clickedColumn:string) => ():void => { private handleSort = (clickedColumn:string) => ():void => {
const {column, data, direction} = this.state; const {column, data, direction} = this.state;

View File

@ -16,8 +16,8 @@ export function mapStateToProps(state: any): StateProps {
export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps { export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
return { return {
columnClick: (col: any) => { onBodyRowClick: (row: any) => {
console.log(col); console.log(row);
}, },
}; };
} }