table sort file create and modify
This commit is contained in:
parent
aae212a9db
commit
34adb75d10
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user