select visible

frontend/src/components/demo/DemoDataTable.vue

@@ -14,14 +14,39 @@ type DemoObject = {
 };
 
 // State
-const initialDatatableValues: Ref<DemoObject[]> = ref([
+const tableData: Ref<DemoObject[]> = ref([
   { id: 0, name: 'Item 1', value: 'a', toggle: false },
   { id: 1, name: 'Item 2', value: 'b', toggle: false },
   { id: 2, name: 'Item 3', value: 'c', toggle: true },
   { id: 3, name: 'Item 4', value: 'd', toggle: true }
 ]);
+
+const selectVisible = ref(false);
+const selectedObjects = ref();
+
+let rows = ref(3);
+let first = 0;
+// capture current page details
+const onPageEmit = (event: any) => {
+  rows.value = event.rows;
+  first = event.first;
+  // uncheck if switching pages or changing row count
+  selectVisible.value = false;
+  selectedObjects.value = [];
+};
+// when select all is checked
+const onSelectVisibleChange = (event: any) => {
+  selectVisible.value = event.checked;
+  if (selectVisible.value) {
+    // get visible table data
+    selectedObjects.value = tableData.value.slice(first, first + rows.value);
+  } else {
+    selectVisible.value = false;
+    selectedObjects.value = [];
+  }
+};
+
 const panelObject: Ref<DemoObject | undefined> = ref(undefined);
-const selectedDatatableObjects: Ref<Array<DemoObject>> = ref([]);
 const showSidePanel: Ref<boolean> = ref(false);
 
 // Datatable filter(s)
@@ -36,15 +61,18 @@ const filters = ref({
   <div class="flex">
     <div class="flex-grow-1">
       <DataTable
-        v-model:selection="selectedDatatableObjects"
+        v-model:selection="selectedObjects"
         v-model:filters="filters"
+        @select-all-change="onSelectVisibleChange"
+        @page="onPageEmit"
+        :selectAll="selectVisible"
         :loading="false"
-        :value="initialDatatableValues"
+        :value="tableData"
         data-key="id"
         class="p-datatable-sm"
         responsive-layout="scroll"
         :paginator="true"
-        :rows="10"
+        :rows="rows"
         paginator-template="RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink "
         current-page-report-template="{first}-{last} of {totalRecords}"
         :rows-per-page-options="[10, 20, 50]"
@@ -83,27 +111,6 @@ const filters = ref({
           header="Value"
           :sortable="true"
         />
-        <Column header="Toggle">
-          <template #body="{ data }">
-            <InputSwitch v-model="data.toggle" />
-          </template>
-        </Column>
-        <Column header="Actions">
-          <template #body="{ data }">
-            <Button
-              class="p-button-lg p-button-rounded p-button-text p-0"
-              aria-label="help text"
-              @click="
-                () => {
-                  showSidePanel = true;
-                  panelObject = data;
-                }
-              "
-            >
-              <font-awesome-icon icon="fa-solid fa-circle-info" />
-            </Button>
-          </template>
-        </Column>
       </DataTable>
     </div>
     <Divider