diff --git a/example/my-app/src/App.css b/example/my-app/src/App.css
index 5fe6895d..16ad6715 100644
--- a/example/my-app/src/App.css
+++ b/example/my-app/src/App.css
@@ -9,6 +9,7 @@ aside {
     width: 300px;
     margin: 0 10px 0 0;
 }
+
 main {
     float: left;
     width: calc(100% - 310px);
@@ -24,9 +25,11 @@ span {
 span.schedguled {
     background-color: #b8975d;
 }
+
 span.error {
     background-color: #de7773;
 }
+
 span.await {
     background-color: #52d2d2;
 }
@@ -102,14 +105,50 @@ table > thead .filter-rules {
     float: right;
 }
 
-.filter-rules {
+/* make definitions inline, but new definition term must start from new line
+   definition is on right side, and wraps text */
+dl {
+    margin: 0 10px 0 0;
+    padding: 0;
+    overflow: auto;
+}
 
+dt {
+    float: left;
+    clear: left;
+    font-weight: normal;
+    text-align: right;
+    margin: 0;
+    padding: 2px 10px;
+    width: 30px;
+}
+
+dd {
+    float: left;
+    padding: 2px 0;
+    margin-bottom: 5px;
+    text-wrap: normal;
+}
+
+dt:hover {
+    background-color: #51887a;
+    color: #ffffff;
+    padding: 2px 10px;
 }
 
+
 .filter-group, .filter-rule {
     margin-left: 40px;
 }
 
+.filter-in,
+.filter-out {
+    font-size: 0.8em;
+    padding: 2px 10px;
+    background-color: #97a8a4;
+    border: none;
+}
+
 table > tbody > tr {
     border-bottom: 1px solid #dddddd;
 }
@@ -129,10 +168,11 @@ tfoot tr {
     font-size: 1.2em;
 }
 
-button.next-page{
+button.next-page {
     float: right;
 }
-button.prev-page{
+
+button.prev-page {
     float: left;
 }
 
@@ -142,6 +182,7 @@ table table {
     font-size: 0.8em;
     min-width: 0;
 }
+
 table table th, td {
     padding: 5px 10px;
 }
@@ -179,4 +220,13 @@ table table th, td {
 .sort-asc,
 .sort-desc {
     cursor: pointer;
+}
+
+.debug-window {
+    background-color: #ffffff;
+    border: 1px solid #cccccc;
+    overflow: auto;
+    padding: 10px;
+    font-size: 0.8em;
+    color: #666666;
 }
\ No newline at end of file
diff --git a/example/my-app/src/App.tsx b/example/my-app/src/App.tsx
index 20ad6b25..cd0ea138 100644
--- a/example/my-app/src/App.tsx
+++ b/example/my-app/src/App.tsx
@@ -725,6 +725,9 @@ function App() {
                     <tr>
                         <td>
                             <PaginatedTable<workflow.Flow>
+                                sort={{
+                                    "ID": true,
+                                }}
                                 load={(state) => {
                                     return listFlows({
                                         ...state,
@@ -746,9 +749,18 @@ function App() {
                                     },
                                 ]}
                             />
+
+                            <div className={"debug-window"}>
+                                <img src={`data:image/jpeg;base64,${image}`} alt=""/>
+                                <pre>Func output: {output}</pre>
+                                <pre>Workflow output: {JSON.stringify(state, null, 2)} </pre>
+                            </div>
                         </td>
                         <td>
                             <PaginatedTable<workflow.State>
+                                sort={{
+                                    "ID": true,
+                                }}
                                 load={(state) => {
                                     return listStates({
                                         ...state,
@@ -799,9 +811,11 @@ function App() {
                                                     return (
                                                         <>
                                                             <span className="done">workflow.Done</span>
-                                                            <img
-                                                                src={`data:image/jpeg;base64,${done.Result["schema.Binary"]}`}
-                                                                alt=""/>
+                                                            <div className={"result"}>
+                                                                <img
+                                                                    src={`data:image/jpeg;base64,${done.Result["schema.Binary"]}`}
+                                                                    alt=""/>
+                                                            </div>
                                                             <WorkflowToString flow={done.BaseState?.Flow}/>
                                                             <ListVariables data={done.BaseState}/>
                                                         </>
@@ -827,7 +841,7 @@ function App() {
                                                                 }
                                                             }
                                                         })}
-                                                                className={"filter filter-in"}>only
+                                                                className={"filter filter-in"}>show only
                                                         </button>
                                                         <button onClick={() => ctx.filter({
                                                             Predicate: {
@@ -849,7 +863,10 @@ function App() {
                                                         })}
                                                                 className={"filter filter-out"}>exclude
                                                         </button>
-                                                        {done.Result["schema.String"]}
+                                                        <div className={"result"}>
+                                                            {done.Result["schema.String"]}
+                                                        </div>
+
                                                         <WorkflowToString flow={done.BaseState?.Flow}/>
                                                         <ListVariables data={done.BaseState}/>
                                                     </>
@@ -868,10 +885,12 @@ function App() {
                                                     <dd>{error.Code}</dd>
                                                     <dt>Message</dt>
                                                     <dd>{error.Reason}</dd>
+                                                    <dt>Retried</dt>
+                                                    <dd>{error.Retried} / {error.BaseState?.DefaultMaxRetries}</dd>
                                                 </dl>
                                                 <WorkflowToString flow={error.BaseState?.Flow}/>
                                                 <ListVariables data={error.BaseState}/>
-                                                <TryRecover error={error}/>
+                                                <TryRecover error={error} onFinish={() => ctx.refresh()}/>
                                             </>
 
                                         case "workflow.Await":
@@ -915,6 +934,7 @@ function App() {
                                                         submitCallbackResult(await_.CallbackID, {
                                                             "schema.String": (document.getElementById("callbackValue") as HTMLInputElement).value
                                                         }, (data) => {
+                                                            ctx.refresh()
                                                             setState(data)
                                                         })
                                                     }}>
@@ -940,7 +960,9 @@ function App() {
                                                     <WorkflowToString flow={scheduled.BaseState?.Flow}/>
                                                     <ListVariables data={scheduled.BaseState}/>
                                                     <button onClick={() => {
-                                                        stopSchedule(parentRunID)
+                                                        stopSchedule(parentRunID).finally(() => {
+                                                            ctx.refresh()
+                                                        })
                                                     }}>
                                                         Stop Schedule
                                                     </button>
@@ -961,7 +983,9 @@ function App() {
                                                 <WorkflowToString flow={scheduleStopped.BaseState?.Flow}/>
                                                 <ListVariables data={scheduleStopped.BaseState}/>
                                                 <button onClick={() => {
-                                                    resumeSchedule(parentRunID1)
+                                                    resumeSchedule(parentRunID1).finally(() => {
+                                                        ctx.refresh()
+                                                    })
                                                 }}>
                                                     Resume Schedule
                                                 </button>
@@ -973,11 +997,6 @@ function App() {
                                     </>
                                 }}/>
                         </td>
-                        <td>
-                            <img src={`data:image/jpeg;base64,${image}`} alt=""/>
-                            <pre>Func output: {output}</pre>
-                            <pre>Workflow output: {JSON.stringify(state, null, 2)} </pre>
-                        </td>
                     </tr>
                     </tbody>
                 </table>
@@ -1323,8 +1342,9 @@ const recover = (runID: string) => {
         .then(data => data as workflow.State)
 }
 
-function TryRecover(props: { error: workflow.Error }) {
-    return <button onClick={() => props.error.BaseState?.RunID && recover(props.error.BaseState?.RunID)}>
+function TryRecover(props: { error: workflow.Error, onFinish: (data: workflow.State) => void }) {
+    return <button
+        onClick={() => props.error.BaseState?.RunID && recover(props.error.BaseState?.RunID).then(props.onFinish)}>
         Try recover
     </button>
 }
diff --git a/example/my-app/src/component/PaginatedTable.tsx b/example/my-app/src/component/PaginatedTable.tsx
index 2ec9f71f..1302c056 100644
--- a/example/my-app/src/component/PaginatedTable.tsx
+++ b/example/my-app/src/component/PaginatedTable.tsx
@@ -71,7 +71,11 @@ export function PaginatedTable<T>(props: PaginatedTableProps<T>) {
         filter: (x: predicate.WherePredicates) => {
             setState({
                 ...state,
-                where: mergeFilters(state.where, x)
+                where: mergeFilters(state.where, x),
+                // always reset the cursor when filtering
+                // user can be on a page that doesn't exist anymore
+                nextPage: undefined,
+                prevPage: undefined
             })
         }
     } as PaginatedTableContext<T>
@@ -195,7 +199,7 @@ export function PaginatedTable<T>(props: PaginatedTableProps<T>) {
     return <table>
         <thead>
         <tr>
-            <th colSpan={5} className={"option-row"}>
+            <th colSpan={3} className={"option-row"}>
                 <button className={"refresh"} onClick={() => ctx.refresh()}>Refresh</button>
 
                 {props.actions && props.actions.map((action) => {
@@ -216,11 +220,9 @@ export function PaginatedTable<T>(props: PaginatedTableProps<T>) {
         </tr>
         <tr>
             <th onClick={batchSelection} className={batchSelectionState()}>
-                <button>select</button>
+                <button>✧</button>
             </th>
-            <th onClick={changeSort("ID")} className={sortState("ID")}>ID</th>
-            <th onClick={changeSort("Type")} className={sortState("Type")}>Type</th>
-            <th onClick={changeSort("Version")} className={sortState("Version")}>Version</th>
+            <th>Prop</th>
             <th>Data</th>
         </tr>
         </thead>
@@ -229,9 +231,18 @@ export function PaginatedTable<T>(props: PaginatedTableProps<T>) {
             return (
                 <tr key={item.ID}>
                     <td><input type={"checkbox"} onChange={selectRowToggle(item)} checked={isSelected(item)}/></td>
-                    <td>{item.ID}</td>
-                    <td>{item.Type}</td>
-                    <td>{item.Version}</td>
+                    <td>
+                        <dl>
+                            <dt onClick={changeSort("ID")} className={sortState("ID")}>ID</dt>
+                            <dd>{item.ID}</dd>
+
+                            <dt onClick={changeSort("Type")} className={sortState("Type")}>Type</dt>
+                            <dd>{item.Type}</dd>
+
+                            <dt onClick={changeSort("Version")} className={sortState("Version")}>Version</dt>
+                            <dd>{item.Version}</dd>
+                        </dl>
+                    </td>
                     <td>{props.mapData && props.mapData(item, ctx)}</td>
                 </tr>
             );
@@ -243,7 +254,7 @@ export function PaginatedTable<T>(props: PaginatedTableProps<T>) {
         </tbody>
         <tfoot>
         <tr>
-            <td colSpan={5} className={"option-row"}>
+            <td colSpan={3} className={"option-row"}>
                 {data.Next && <button onClick={nextPage} className={"next-page"}>Next page</button>}
                 {data.Prev && <button onClick={prevPage} className={"prev-page"}>Prev page</button>}
             </td>