diff --git a/package.json b/package.json
index edd7bf9..fb2aaac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fohn-ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Javascript library for Fohn-Ui php framework.",
   "main": "dist/fohn-ui.min.js",
   "files": [
diff --git a/src/components/components-install.js b/src/components/components-install.js
index 503b3e3..d8b0339 100644
--- a/src/components/components-install.js
+++ b/src/components/components-install.js
@@ -13,6 +13,7 @@ import TableRow from './table/row.component.vue';
 import TableCell from './table/cell.component.vue';
 import ExceptionModal from './modal/exception-modal.component.vue';
 import TablePaginator from './table/paginator.component.vue';
+import TableAction from "./table/table.action.component.vue";
 import Dummy from './dummy.component.vue';
 import Modal from './modal/modal.component.vue';
 import Tabs from './tabs/tabs.component.vue';
@@ -33,6 +34,7 @@ const fohnComponents = [
   {name: 'fohn-table-row', def:  TableRow},
   {name: 'fohn-table-cell', def:  TableCell},
   {name: 'fohn-table-paginator', def:  TablePaginator},
+  {name: 'fohn-table-action', def:  TableAction},
   {name: 'fohn-modal', def:  Modal},
   {name: 'fohn-ui-exception', def:  ExceptionModal},
   {name: 'fohn-tab', def:  Tab},
diff --git a/src/components/form/form.store.js b/src/components/form/form.store.js
index 03e61a1..6afe145 100644
--- a/src/components/form/form.store.js
+++ b/src/components/form/form.store.js
@@ -24,7 +24,7 @@ export const useFormStoreFactory = (id) => {
           this.fetchControlValues();
         }
       },
-      clearControlValues() {
+      clearControlsValue() {
         for (const value of this.controls.values()) {
           value.value = '';
         }
diff --git a/src/components/modal/modal.component.vue b/src/components/modal/modal.component.vue
index 8ddee02..5a24882 100644
--- a/src/components/modal/modal.component.vue
+++ b/src/components/modal/modal.component.vue
@@ -1,5 +1,5 @@
 <script>
-import {onMounted, ref, computed} from 'vue';
+import {onMounted, ref, watch, computed} from 'vue';
 import {useModalStoreFactory} from "./modal.store";
 import {useElementSize, useWindowSize} from "@vueuse/core";
 
@@ -7,6 +7,10 @@ export default {
   name: 'fohn-modal',
   props: {
     storeId: String,
+    message: {
+      type: String,
+      default: '',
+    },
     title: String,
     isClosable: {
       type: Boolean,
@@ -18,7 +22,8 @@ export default {
       default: 'close',
     }
   },
-  setup: function (props, extra) {
+  emits: ['onConfirm', 'onCancel'],
+  setup: function (props, { attrs, slots, emit }) {
     const { contentUrl, callbacks, storeId } = props;
     const modalTitle = ref(props.title);
     const hasRemoteContent = !!contentUrl;
@@ -30,7 +35,12 @@ export default {
     const { height: modalHeight } = useElementSize(modalEl);
     const { height: windowHeight } = useWindowSize();
     let maxHeight = false;
-    const message = ref('');
+    const modalMessage = ref('');
+
+    // listen top props change and update store message.
+    watch(() => props.message, (newMsg) => {
+      modalStore.setMessage(newMsg);
+    });
 
     const modalStore = useModalStoreFactory(storeId)();
     modalStore.status = status.value;
@@ -42,16 +52,23 @@ export default {
       status.value = state.status;
       isLoading.value = state.isLoading;
       modalTitle.value = state.title;
-      message.value = state.message;
+      modalMessage.value = state.message;
     });
 
-    const closeModal = () => {
-      if (isClosable) {
+    const closeModal = (forceClose = false) => {
+      if (forceClose || isClosable) {
         modalStore.closeModal();
         maxHeight = false;
       }
     }
 
+    const emitConfirm = (e) => {
+      emit('onConfirm', e);
+    }
+
+    const emitCancel = (e) => {
+      emit('onCancel', e);
+    }
     const openModal = () => {
       modalStore.openModal();
     }
@@ -85,9 +102,11 @@ export default {
       isLoading,
       container,
       heightCss,
-      message,
+      modalMessage,
       onCallback,
       hasRemoteContent,
+      emitConfirm,
+      emitCancel,
       isClosable,
     };
   },
@@ -104,9 +123,11 @@ export default {
         :closeModal="closeModal"
         :openModal="openModal"
         :onCallback="onCallback"
-        :message="message"
+        :message="modalMessage"
         :hasRemoteContent="hasRemoteContent"
         :isClosable="isClosable"
+        :confirm="emitConfirm"
+        :cancel="emitCancel"
         v-bind="$attrs">Modal
     </slot>
   </div>
diff --git a/src/components/modal/modal.store.js b/src/components/modal/modal.store.js
index eb9b31d..c99d608 100644
--- a/src/components/modal/modal.store.js
+++ b/src/components/modal/modal.store.js
@@ -58,13 +58,18 @@ export const useModalStoreFactory = (id) => {
        */
       openModal(options = {}) {
         const {message, args = {}, payload = {}} = options;
-        this.message = message;
+        if (message) {
+          this.setMessage(message);
+        }
         this.callbackPayload = payload;
         this.status = 'open';
         if (this.contentUrl) {
           this.fetchHtml(this.contentUrl, args);
         }
       },
+      setMessage(message) {
+        this.message = message;
+      },
       closeModal() {
         this.status = 'close';
         if (this.contentUrl && this.contentId) {
diff --git a/src/components/table/row.component.vue b/src/components/table/row.component.vue
index f3f77aa..c8931b8 100644
--- a/src/components/table/row.component.vue
+++ b/src/components/table/row.component.vue
@@ -1,27 +1,44 @@
-<template>
-    <slot :row="row" v-bind="$attrs">row</slot>
-</template>
-
 <script>
+import {computed, inject, toRefs} from "vue";
+import {useTableStoreFactory} from "./table.store";
+
 export default {
   name: 'fohn-table-row',
   props: {
+    // storeId: String,
+    hasSelection: {
+      type: Boolean,
+      default: false,
+    },
     row: Object,
   },
   emits: {},
   setup: function (props, { attrs, slots, emit }) {
-    const { row } = props;
-    const method = {};
+    const { hasSelection: isActionable } = props;
+    const { row } = toRefs(props);
+    const tableStore = useTableStoreFactory(inject('tableStoreId'))();
 
-    method.getRowClass = (idx) => ({
-      'bg-gray-200': idx % 2,
-    });
+    const isEvenRow = (idx) => (idx % 2) === 0;
+    const isSelected = computed(() => tableStore.isRowSelected(row.value.id));
 
-    return { row };
+    const toggleRow = (id) => {
+      tableStore.toggleRow(id);
+    }
+    return { row, isEvenRow, isActionable, isSelected, toggleRow };
   },
 };
 </script>
 
+<template>
+  <slot
+      :row="row"
+      :isEvenRow="isEvenRow"
+      :isActionable="isActionable"
+      :isSelected="isSelected"
+      :toggleRow="toggleRow"
+      v-bind="$attrs">row</slot>
+</template>
+
 <style scoped>
 
 </style>
diff --git a/src/components/table/table.action.component.vue b/src/components/table/table.action.component.vue
new file mode 100644
index 0000000..fe37c65
--- /dev/null
+++ b/src/components/table/table.action.component.vue
@@ -0,0 +1,61 @@
+<script>
+import {useTableStoreFactory} from "./table.store";
+import {computed, inject, toRefs} from "vue";
+import {toReactive} from "@vueuse/core";
+
+export default {
+  name: 'fohn-table-action',
+  props: {
+    actionUrl: String,
+    tableRowsSelected: Number,
+    isTableFetching: Boolean,
+    placeHolder: {
+      type: String,
+      default: '{#}',
+    },
+    messages: {
+      type: Object,
+      default: () => ({none: '', single: '', multiple: ''})
+    }
+  },
+
+  setup(props, { attrs, slots, emit }) {
+    const {actionUrl, placeHolder} = props;
+    const {isTableFetching, tableRowsSelected } = toRefs(props);
+    const {messages} = toReactive(props);
+    const tableStore = useTableStoreFactory(inject('tableStoreId'))();
+
+    const isEnable = computed(() => tableRowsSelected.value > 0);
+    const actionMsg = computed(() => {
+      if (tableRowsSelected.value === 0) {
+        return messages.none || '';
+      }
+      if (tableRowsSelected.value === 1 && messages.single) {
+        return messages.single.replace(placeHolder, tableRowsSelected.value);
+      }
+      if (tableRowsSelected.value > 1 && messages.multiple) {
+        return messages.multiple.replace(placeHolder, tableRowsSelected.value);
+      }
+
+      return '';
+    });
+    const execute = (event) => {
+      if (!isTableFetching.value) {
+        tableStore.executeAction(actionUrl, event?.currentTarget);
+      }
+    }
+
+    return {execute, isEnable, isTableFetching, tableRowsSelected, actionMsg}
+  }
+}
+</script>
+
+<template>
+  <slot
+      :isTableFetching="isTableFetching"
+      :tableRowsSelected="tableRowsSelected"
+      :execute="execute"
+      :isEnable="isEnable"
+      :actionMsg="actionMsg"
+      v-bind="$attrs">table action</slot>
+</template>
diff --git a/src/components/table/table.component.vue b/src/components/table/table.component.vue
index 4805eac..45cbfeb 100644
--- a/src/components/table/table.component.vue
+++ b/src/components/table/table.component.vue
@@ -3,14 +3,14 @@
  * Todo serve two different mode. Load all items and use fuse search internally or
  * use as it is now, loading items per page load.
  */
-import {onMounted, ref} from 'vue';
+import {onMounted, ref, provide, computed} from 'vue';
 import debounce from 'lodash.debounce';
 import { useTableStoreFactory } from './table.store';
 
 export default {
   name: 'fohn-table',
   props: {
-    actions: {
+    rowActions: {
       type: Object,
     },
     searchDebounceValue: {
@@ -20,16 +20,31 @@ export default {
     columns: {
       type: Array,
     },
+    hasSelectableRows: {
+      type: Boolean,
+      default: false,
+    },
     storeId: String,
     dataUrl: String,
     itemsPerPage: Number,
     keepTableState: {
       type: Boolean,
       default: true,
+    },
+    keepSelectionAcrossPage: {
+      type: Boolean,
+      default: false,
     }
   },
   setup(props, { attrs, slots, emit }) {
-    const { columns, dataUrl, searchDebounceValue, storeId, keepTableState } = props;
+    const { columns,
+      dataUrl,
+      searchDebounceValue,
+      storeId,
+      keepTableState,
+      hasSelectableRows,
+      keepSelectionAcrossPage } = props;
+
     const rows = ref([]);
     const isFetching = ref(false);
     const currentPage = ref(1);
@@ -37,12 +52,17 @@ export default {
     const sortDirection = ref('');
     const itemsPerPage = ref(props.itemsPerPage);
     const totalItems = ref(0);
+    const selectedRows = ref(new Set());
     const query = ref('');
+
     // each table get its own tableStore.
     const tableStore = useTableStoreFactory(storeId)();
 
     const debounceSearch = debounce((query) => {
       tableStore.searchItems(query);
+      if (!keepSelectionAcrossPage) {
+        clearSelectedRows();
+      }
     }, searchDebounceValue);
 
     tableStore.setDataUrl(dataUrl);
@@ -63,9 +83,36 @@ export default {
       sortDirection.value = state.tableState.sort.direction;
       itemsPerPage.value = state.tableState.itemsPerPage;
       query.value = state.tableState.currentQuery;
+      selectedRows.value = new Set(state.selectedRows) ;
+    });
+
+    const hasAllRowSelected = computed(() => {
+      return (selectedRows.value.size === 0) ? false : rows.value.every((row) => selectedRows.value.has(row.id));
+    });
+
+    const hasSomeRowSelected = computed( () => {
+      return rows.value.reduce((acc, row) => {
+        if (selectedRows.value.has(row.id)) {
+          acc.push(row.id);
+        }
+        return acc;
+      }, []).length > 0;
+    });
+
+    const selectedRowSize = computed(() => selectedRows.value.size);
+
+    const pageSelectState = computed(() => {
+      return {
+        all : hasAllRowSelected.value,
+        partial: hasSomeRowSelected.value && !hasAllRowSelected.value,
+        none: !hasAllRowSelected.value && !hasSomeRowSelected.value,
+      };
     });
 
     const loadPage = (pageNumber) => {
+      if (!keepSelectionAcrossPage) {
+        tableStore.clearSelectedRows();
+      }
       tableStore.loadPage(pageNumber);
     };
 
@@ -78,6 +125,18 @@ export default {
       tableStore.sortTable(columnName, dir);
     };
 
+    const togglePageRows = () => {
+      if (hasAllRowSelected.value) {
+        rows.value.forEach( (row) => tableStore.removeRowIdFromSelection(row.id));
+      } else {
+        rows.value.forEach( (row) => tableStore.addRowIdToSelection(row.id));
+      }
+    }
+
+    const clearSelectedRows = () => {
+      tableStore.clearSelectedRows();
+    }
+
     const searchItems = (query) => {
       debounceSearch(query);
     }
@@ -87,20 +146,23 @@ export default {
     }
 
     /**
-     * Execute a table action, i.e. call a javascript function pass into props.action.
+     * Execute a table row action, i.e. call a javascript function pass into props.action.
      * The function is executed with the row id as first param.
      *
      * @param actionName
      * @param id
      */
-    const executeAction = (actionName, id) => {
-      props.actions[actionName](id);
+    const executeRowAction = (actionName, id) => {
+      props.rowActions[actionName](id);
     }
 
     onMounted(() => {
       tableStore.fetchItems();
     });
 
+    // have storeId available to children component
+    provide('tableStoreId', storeId);
+
     return {
       isFetching,
       query,
@@ -116,7 +178,12 @@ export default {
       sortTable,
       clearSearch,
       setItemsPerPage,
-      executeAction,
+      hasSelectableRows,
+      selectedRowSize,
+      togglePageRows,
+      clearSelectedRows,
+      pageSelectState,
+      executeRowAction,
     };
   },
 };
@@ -139,7 +206,12 @@ export default {
         :sortTable="sortTable"
         :clearSearch="clearSearch"
         :setItemsPerPage="setItemsPerPage"
-        :executeAction="executeAction"
+        :executeRowAction="executeRowAction"
+        :hasSelectableRows="hasSelectableRows"
+        :selectedRowSize="selectedRowSize"
+        :togglePageRows="togglePageRows"
+        :pageSelectState="pageSelectState"
+        :clearSelectedRows="clearSelectedRows"
         v-bind="$attrs">table</slot>
   </div>
 </template>
diff --git a/src/components/table/table.store.js b/src/components/table/table.store.js
index 102eccd..a1907a6 100644
--- a/src/components/table/table.store.js
+++ b/src/components/table/table.store.js
@@ -26,10 +26,17 @@ export const useTableStoreFactory = (id) => {
         }
       }),
       currentRows: [],
+      selectedRows: new Set(),
       totalItems: 0,
       isFetching: false,
     }),
     getters: {
+      isRowSelected: (state) => {
+        return (id) => state.selectedRows.has(id);
+      },
+      hasRowSelected: (state) => {
+        return state.selectedRows.size > 0;
+      },
     },
     actions: {
       /**
@@ -75,10 +82,27 @@ export const useTableStoreFactory = (id) => {
           }
         });
       },
+      toggleRow(id) {
+        if(this.isRowSelected(id)) {
+          this.selectedRows.delete(id);
+        } else {
+          this.selectedRows.add(id);
+        }
+      },
+      addRowIdToSelection (id) {
+        this.selectedRows.add(id);
+      },
+      removeRowIdFromSelection (id) {
+        this.selectedRows.delete(id);
+      },
+      clearSelectedRows() {
+        this.selectedRows = new Set();
+      },
       deleteRow(id) {
         this.currentRows = [...this.currentRows.filter((tableRow) => {
           return tableRow.id !== id
         })];
+        this.fetchItems();
       },
       loadPage(pageNumber) {
         this.tableState.currentPage = pageNumber;
@@ -127,6 +151,43 @@ export const useTableStoreFactory = (id) => {
       setDataUrl(url) {
         this.url = url;
       },
+      /**
+       * Callback server for the purpose of executing an action.
+       * Callback will trigger onTrigger event in TriggerCtrl.
+       */
+      executeAction(url, targetElement) {
+        const options = {
+          method: 'POST',
+          body: utils().json().stringify({
+            ids: Array.from(this.selectedRows),
+          }),
+        }
+
+        targetElement.classList.add('loading');
+        const { isFetching, data, onFetchFinally, onFetchError } = apiService.fetchAsResponse(url, options);
+
+        watch(isFetching, (inProgress) => {
+          this.isFetching = inProgress;
+        });
+
+        onFetchFinally( () => {
+          const results = data.value || {};
+          if (results.jsRendered) {
+            apiService.evalResponse(results.jsRendered);
+          }
+          if (results?.state?.reload) {
+            this.fetchItems();
+          }
+          if (results?.state?.keepSelection === false) {
+            this.selectedRows = new Set();
+          }
+          targetElement.classList.remove('loading');
+        });
+
+        onFetchError( (error) => {
+          console.error(error);
+        });
+      }
     },
   });
   fohn.vueService.addStore(id, store);