diff --git a/src/ts/@overflow/commons/api/model/PageParams.ts b/src/ts/@overflow/commons/api/model/PageParams.ts
new file mode 100644
index 0000000..68dab49
--- /dev/null
+++ b/src/ts/@overflow/commons/api/model/PageParams.ts
@@ -0,0 +1,8 @@
+interface PageParams {
+    pageNo: string;
+    countPerPage: string;
+    sortCol: string;
+    sortDirection: string;
+}
+
+export default PageParams;
diff --git a/src/ts/@overflow/commons/react/component/Pager.tsx b/src/ts/@overflow/commons/react/component/Pager.tsx
index 9666b96..6ca54ed 100644
--- a/src/ts/@overflow/commons/react/component/Pager.tsx
+++ b/src/ts/@overflow/commons/react/component/Pager.tsx
@@ -17,8 +17,6 @@ export interface State {
 
 export class Pager extends React.Component<Props, State> {
 
-    private countPerPage: number = 10;
-
     constructor(props: Props, context: State) {
         super(props, context);
         this.state = {
diff --git a/src/ts/@overflow/history/react/HistoryList.tsx b/src/ts/@overflow/history/react/HistoryList.tsx
index e500223..f98ae5e 100644
--- a/src/ts/@overflow/history/react/HistoryList.tsx
+++ b/src/ts/@overflow/history/react/HistoryList.tsx
@@ -14,6 +14,8 @@ import * as readAllByProbeActions from '../redux/action/read_all_by_probe';
 import * as readAllByProbeAndTypeActions from '../redux/action/read_all_by_probe_and_type';
 import * as probeListActions from '@overflow/probe/redux/action/read_all_by_domain';
 import * as historyTypeListActions from '@overflow/meta/redux/action/history_type_read_all';
+import PageParams from '@overflow/commons/api/model/PageParams';
+
 
 export function mapStateToProps(state: any, ownProps?: any): HistoryStateProps {
   return {
@@ -26,21 +28,21 @@ export function mapStateToProps(state: any, ownProps?: any): HistoryStateProps {
 
 export function mapDispatchToProps(dispatch: Dispatch<HistoryDispatchProps>, ownProps?: HistoryDispatchProps): HistoryDispatchProps {
   return {
-    onReadAllByDomain: (domain: Domain, pageNo: string, countPerPage: string) => {
+    onReadAllByDomain: (domain: Domain, pageParams: PageParams) => {
       dispatch(asyncRequestActions.request('HistoryService', 'readAllByDomain', readAllByProbeActions.REQUEST,
-                                           JSON.stringify(domain), pageNo, countPerPage));
+                                           JSON.stringify(domain), JSON.stringify(pageParams)));
     },
-    onReadAllByProbe: (probe: Probe, pageNo: string, countPerPage: string) => {
+    onReadAllByProbe: (probe: Probe, pageParams: PageParams) => {
       dispatch(asyncRequestActions.request('HistoryService', 'readAllByProbe', readAllByProbeActions.REQUEST,
-                                           JSON.stringify(probe), pageNo, countPerPage));
+                                           JSON.stringify(probe), JSON.stringify(pageParams)));
     },
-    onReadAllByProbeAndType: (probe: Probe, type: MetaHistoryType, pageNo: string, countPerPage: string) => {
+    onReadAllByProbeAndType: (probe: Probe, type: MetaHistoryType, pageParams: PageParams) => {
       dispatch(asyncRequestActions.request('HistoryService', 'readAllByProbeAndType', readAllByProbeAndTypeActions.REQUEST,
-                                           JSON.stringify(probe), JSON.stringify(type), pageNo, countPerPage));
+                                           JSON.stringify(probe), JSON.stringify(type), JSON.stringify(pageParams)));
     },
-    onReadAllByDomainAndType: (domain: Domain, type: MetaHistoryType, pageNo: string, countPerPage: string) => {
+    onReadAllByDomainAndType: (domain: Domain, type: MetaHistoryType, pageParams: PageParams) => {
       dispatch(asyncRequestActions.request('HistoryService', 'readAllByProbeAndType', readAllByProbeAndTypeActions.REQUEST,
-                                           JSON.stringify(domain), JSON.stringify(type), pageNo, countPerPage));
+                                           JSON.stringify(domain), JSON.stringify(type), JSON.stringify(pageParams)));
     },
     onReadAllProbeByDomain: (domain: Domain) => {
       dispatch(asyncRequestActions.request('ProbeService', 'readAllByDomain', probeListActions.REQUEST, JSON.stringify(domain)));
diff --git a/src/ts/@overflow/history/react/components/HistoryList.tsx b/src/ts/@overflow/history/react/components/HistoryList.tsx
index c410d47..f346685 100644
--- a/src/ts/@overflow/history/react/components/HistoryList.tsx
+++ b/src/ts/@overflow/history/react/components/HistoryList.tsx
@@ -8,6 +8,7 @@ import Page from '@overflow/commons/api/model/Page';
 import MetaHistoryType from '@overflow/meta/api/model/MetaHistoryType';
 import { Pager } from '@overflow/commons/react/component/Pager';
 import { SortTableHeaderRow } from '@overflow/commons/react/component/SortTableHeaderRow';
+import PageParams from '@overflow/commons/api/model/PageParams';
 
 export interface StateProps {
   probes: Probe[];
@@ -20,10 +21,10 @@ export interface DispatchProps {
   onReadAllProbeByDomain?(domain: Domain): void;
   onReadAllMetaHistoryType?(): void;
 
-  onReadAllByDomain?(domain: Domain, pageNo: string, countPerPage: string): void;
-  onReadAllByProbe?(probe: Probe, pageNo: string, countPerPage: string): void;
-  onReadAllByProbeAndType?(probe: Probe, type: MetaHistoryType, pageNo: string, countPerPage: string): void;
-  onReadAllByDomainAndType?(domain: Domain, type: MetaHistoryType, pageNo: string, countPerPage: string): void;
+  onReadAllByDomain?(domain: Domain, pageParams: PageParams): void;
+  onReadAllByProbe?(probe: Probe, pageParams: PageParams): void;
+  onReadAllByProbeAndType?(probe: Probe, type: MetaHistoryType, pageParams: PageParams): void;
+  onReadAllByDomainAndType?(domain: Domain, type: MetaHistoryType, pageParams: PageParams): void;
 }
 
 export type Props = StateProps & DispatchProps;
@@ -66,16 +67,23 @@ export class HistoryList extends React.Component<Props, State> {
   }
 
   public getAllHistory(pageNo: number): void {
+    const pageParams: PageParams = {
+      pageNo: String(pageNo),
+      countPerPage: String(10),
+      sortCol: 'id',
+      sortDirection: 'descending',
+    };
+
     if (this.selectedProbeId === 0) {
       let domain: Domain = {
         id: 1,
       };
-      this.props.onReadAllByDomain(domain, String(pageNo), String(this.countPerPage));
+      this.props.onReadAllByDomain(domain, pageParams);
     } else {
       let probe: Probe = {
         id: this.selectedProbeId,
       };
-      this.props.onReadAllByProbe(probe, String(pageNo), String(this.countPerPage));
+      this.props.onReadAllByProbe(probe, pageParams);
     }
   }
 
@@ -84,7 +92,13 @@ export class HistoryList extends React.Component<Props, State> {
     let probe: Probe = {
       id: url[2],
     };
-    this.props.onReadAllByProbeAndType(probe, this.getMetaType(url[1]), String(pageNo), String(this.countPerPage));
+    const pageParams: PageParams = {
+      pageNo: String(pageNo),
+      countPerPage: String(10),
+      sortCol: 'id',
+      sortDirection: 'descending',
+    };
+    this.props.onReadAllByProbeAndType(probe, this.getMetaType(url[1]), pageParams);
   }
 
   public getMetaType(typeStr: string): MetaHistoryType {
@@ -117,19 +131,29 @@ export class HistoryList extends React.Component<Props, State> {
     }
   }
 
-  private handleSort = (col:string, direction:string):void => {
+  private handleSort = (col: string, direction: string): void => {
     console.log(col + ' || direction:' + direction);
+    const pageParams: PageParams = {
+      pageNo: String(0),
+      countPerPage: String(10),
+      sortCol: col,
+      sortDirection: direction,
+    };
+    let domain: Domain = {
+      id: 1,
+    };
+    this.props.onReadAllByDomain(domain, pageParams);
   }
 
   public render(): JSX.Element {
     // let cols:string[] = ['No.', 'Probe', 'Type', 'Message', 'Created At', 'Created By'];
-    let colsmap:Map<string, string> = new Map();
+    let colsmap: Map<string, string> = new Map();
     colsmap.set('No.', 'id');
-    colsmap.set('Probe', 'probe.id');
-    colsmap.set('Type', ' type.id');
+    colsmap.set('Probe', 'probe.displayName');
+    colsmap.set('Type', 'type.name');
     colsmap.set('Message', 'message');
     colsmap.set('Created At', 'createDate');
-    colsmap.set('Created By', 'member.id');
+    colsmap.set('Created By', 'member.name');
 
     let historyList: JSX.Element = (
       <Container fluid>
@@ -137,12 +161,12 @@ export class HistoryList extends React.Component<Props, State> {
           <Table.Header>
             <SortTableHeaderRow columnMap={colsmap} onHeaderColumnClick={this.handleSort} />
             {/*<Table.Row>*/}
-              {/*<Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>*/}
-              {/*<Table.HeaderCell textAlign={'center'}>Probe</Table.HeaderCell>*/}
-              {/*<Table.HeaderCell textAlign={'center'}>Type</Table.HeaderCell>*/}
-              {/*<Table.HeaderCell textAlign={'center'}>Message</Table.HeaderCell>*/}
-              {/*<Table.HeaderCell textAlign={'center'}>Created At</Table.HeaderCell>*/}
-              {/*<Table.HeaderCell textAlign={'center'}>Created By</Table.HeaderCell>*/}
+            {/*<Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>*/}
+            {/*<Table.HeaderCell textAlign={'center'}>Probe</Table.HeaderCell>*/}
+            {/*<Table.HeaderCell textAlign={'center'}>Type</Table.HeaderCell>*/}
+            {/*<Table.HeaderCell textAlign={'center'}>Message</Table.HeaderCell>*/}
+            {/*<Table.HeaderCell textAlign={'center'}>Created At</Table.HeaderCell>*/}
+            {/*<Table.HeaderCell textAlign={'center'}>Created By</Table.HeaderCell>*/}
             {/*</Table.Row>*/}
           </Table.Header>
 
@@ -171,7 +195,7 @@ export class HistoryList extends React.Component<Props, State> {
           </Table.Body>
           <Table.Footer>
             <Table.Row>
-              <Table.HeaderCell colSpan='3'>
+              <Table.HeaderCell colSpan='6' textAlign='center'>
                 <Pager page={this.props.histories} onPageChange={this.handlePaging} />
               </Table.HeaderCell>
             </Table.Row>