chore: wip

README.md

@@ -56,7 +56,7 @@ import { Table as TableV2 } from 'table-vue'
     :filterable="true"
     :sortable="true"
     :actionable="true"
-    :checkable="false"
+    :selectable="false"
     :per-page="20"
   />
 
@@ -71,7 +71,7 @@ import { Table as TableV2 } from 'table-vue'
     filters="customer_name, vendor_name, part_name, document_types"
     actions="Edit"
     per-page="10"
-    checkable="true"
+    selectable="true"
   />
 </template>
 ```

src/App.vue

@@ -40,7 +40,7 @@ import { Table as TableV2 } from './main'
           vendor_name: multi-select"
         actions="Info Icon"
         per-page="10"
-        checkable="true"
+        selectable="true"
       >
         <template #part_name="partNameProps">
           <div v-for="(part, x) in partNameProps.value" :key="x" class="text-yellow-600">

src/components/Table.vue

@@ -17,7 +17,7 @@ interface Props {
   actionable?: string | boolean
   actions?: string | string[]
   perPage?: string | number
-  checkable?: string | boolean
+  selectable?: string | boolean
   // stickyHeader?: string | boolean
   // stickyFooter?: string | boolean
 }
@@ -37,7 +37,7 @@ const {
   perPage = 20,
   actions = [],
   actionable = false,
-  checkable = false,
+  selectable = false,
 } = defineProps<Props>()
 
 const cols = computed((): string[] => {
@@ -83,7 +83,7 @@ const { table, search, colName } = await useTable({
   actionable,
   perPage: itemsPerPage.value,
   currentPage: 1,
-  checkable,
+  selectable,
 })
 
 // let's run the initial search upon page view/load
@@ -112,7 +112,7 @@ table.sortable = sortable
 table.perPage = itemsPerPage.value
 table.actions = actions
 table.actionable = actionable
-table.checkable = checkable
+table.selectable = selectable
 </script>
 
 <template>

src/components/TableHead.vue

@@ -4,7 +4,7 @@ import { useTable } from '~/composables/table'
 // eslint-disable-next-line no-console
 console.log('TableHead.vue')
 
-const { table, isColumnSortable, isColumnUsedAsSort, toggleSort, indeterminate, selectedHits, hits } = await useTable()
+const { table, isColumnSortable, isColumnUsedAsSort, toggleSort, indeterminate, selectedRows, hits } = await useTable()
 
 const lastColumn = computed(() => {
   if (table.actionable || table.actions?.length)
@@ -23,16 +23,16 @@ const readableLastColumn = computed(() => lastColumn[0]?.includes(':') ? lastCol
         <input
           type="checkbox"
           class="rounded border-gray-300 h-4 -mt-2 top-1/2 left-4 text-indigo-600 w-4 absolute sm:left-6 focus:ring-indigo-500"
-          :checked="indeterminate || selectedHits.length === hits.length"
+          :checked="indeterminate || selectedRows.length === hits.length"
           :indeterminate="indeterminate"
-          @change="selectedHits = $event?.target?.checked ? hits.map((h) => h.id) : []"
+          @change="selectedRows = $event?.target?.checked ? hits.map((h) => h.id) : []"
         >
         <!-- <input
           type="checkbox"
           class="rounded border-gray-300 h-4 -mt-2 top-1/2 left-4 text-indigo-600 w-4 absolute sm:left-6 focus:ring-indigo-500"
-          :checked="indeterminate || selectedHits?.length === hits?.length"
+          :checked="indeterminate || selectedRows?.length === hits?.length"
           :indeterminate="indeterminate"
-          @change="selectedHits = []"
+          @change="selectedRows = []"
         > -->
       </th>
 

src/components/TablePagination.vue

@@ -1,7 +1,29 @@
 <script setup lang="ts">
 const emit = defineEmits(['paginateToNextPage', 'paginateToPreviousPage', 'paginateToPage'])
 
-const { goToNextPage, goToPrevPage, goToPage, table, lastPageNumber, pages, isFirstPage, isLastPage } = await useTable()
+const { goToNextPage, goToPrevPage, goToPage, table, lastPageNumber } = await useTable()
+
+// eslint-disable-next-line no-console
+console.log('table', table)
+
+const totalPages = computed(() => Math.ceil(table.results?.nbHits ?? 1 / table.perPage))
+const pages = computed(() => [...Array(totalPages).keys()].map(i => i + 1))
+// const isFirstPage = computed(() => {
+//   if (table.currentPage === 1)
+//     return true
+
+//   return false
+// })
+
+// const isLastPage = computed(() => {
+//   if (table.currentPage === totalPages.value)
+//     return true
+
+//   return false
+// })
+
+// eslint-disable-next-line no-console
+console.log('pages', pages.value)
 
 function next() {
   goToNextPage()

src/components/TableRow.vue

@@ -3,7 +3,7 @@ import type { Hit } from 'meilisearch'
 
 const { hit } = defineProps<{ hit: Hit }>()
 
-const { table, colName, selectedHits } = await useTable()
+const { table, colName, selectedRows } = await useTable()
 
 // let's generate the value of the row
 function generateValue(hit: any, col: any) {
@@ -15,11 +15,11 @@ function generateValue(hit: any, col: any) {
 </script>
 
 <template>
-  <tr scope="row" :class="[selectedHits.includes(hit.id) && 'bg-gray-50']">
+  <tr scope="row" :class="[selectedRows.includes(hit.id) && 'bg-gray-50']">
     <td class="px-6 w-12 relative sm:px-8 sm:w-16">
-      <div v-if="selectedHits.includes(hit.id)" class="bg-indigo-600 inset-y-0 left-0 w-0.5 absolute" />
+      <div v-if="selectedRows.includes(hit.id)" class="bg-indigo-600 inset-y-0 left-0 w-0.5 absolute" />
       <input
-        v-model="selectedHits"
+        v-model="selectedRows"
         :value="hit.id"
         type="checkbox"
         class="rounded border-gray-300 h-4 -mt-2 top-1/2 left-4 text-indigo-600 w-4 absolute sm:left-6 focus:ring-indigo-500"

src/composables/table.ts

@@ -19,33 +19,23 @@ const perPage = ref(table.perPage)
 const query = ref(table.query)
 const actions = ref(table.actions)
 const actionable = ref(table.actionable)
-const selectedHits: any[''] = ref([]) // the selected/checked rows
-const checked = ref(false)
+const selectedRows = ref(table.selectedRows || [])
+const selectedAll = ref(table.selectedAll)
 
-const totalPages = computed(() => Math.ceil(table.results?.nbHits ?? 1 / table.perPage))
-const pages = computed(() => [...Array(totalPages).keys()].map(i => i + 1))
-const isFirstPage = computed(() => {
-  if (table.currentPage === 1)
-    return true
-
-  return false
-})
-
-const isLastPage = computed(() => {
-  if (table.currentPage === totalPages.value)
-    return true
-
-  return false
-})
-
-const indeterminate = computed(() => selectedHits.value.length > 0 && selectedHits.value.length < hits.value.length)
 const searchParams = computed(() => {
   return {
     offset: (table.currentPage - 1) * table.perPage,
     limit: table.perPage,
     sort: isString(table.sort) ? [table.sort] : undefined,
   }
 })
+const totalPages = computed(() => {
+  if (table.results === undefined)
+    return 0
+
+  return Math.ceil(table.results.nbHits / table.perPage)
+})
+const indeterminate = computed(() => selectedRows.value.length > 0 && selectedRows.value.length < hits.value.length)
 const lastColumn = computed(() => {
   if (table.actionable || table.actions?.length)
     return [''] // actions-columns have no table-head
@@ -280,14 +270,11 @@ export async function useTable(store?: TableStore) {
     actionable,
     actions,
     colName,
-    selectedHits,
-    checked,
     indeterminate,
     lastColumn,
     readableLastColumn,
     lastPageNumber,
-    pages,
-    isFirstPage,
-    isLastPage,
+    selectedRows,
+    selectedAll,
   }
 }

src/types.ts

@@ -4,25 +4,28 @@
 
 import type { Hits, SearchResponse } from 'meilisearch'
 
+// the TableStore interface is primarily used with regards to how to persist the data to localStorage
 export interface TableStore {
-  source?: string
-  password?: string
-  type: string
-  columns: string[]
-  searchable?: string | boolean
-  query?: string
-  sortable?: string | boolean
-  sort?: string // there can only be one active sort at a time
-  sorts?: string | string[] // this is the list of all possible sort options
-  filterable?: string | boolean
-  filters?: string | string[]
-  actionable?: string | boolean
-  actions?: string | string[]
-  perPage: number
-  currentPage: number
-  results?: SearchResponse<Record<string, any>>
-  hits?: Hits
-  checkable?: string | boolean
-  // stickyHeader?: string | boolean
-  // stickyFooter?: string | boolean
+  type: string // the Meilisearch index you would like to use for this table
+  columns: string[] // used as table heads/column titles
+  source?: string // optional: the Meilisearch host name/address (defaults: http://127.0.0.1:7700)
+  password?: string // optional: the Meilisearch password (defaults: '')
+  searchable?: string | boolean // optional: determines whether the table displays the search bar (defaults: true)
+  query?: string // optional: the "query" (= search input) used to search the table (defaults: '')
+  sortable?: string | boolean // optional: determines whether the table displays the "table head"-sorts (defaults: true)
+  sort?: string // optional: the only active sort to be applied to the table (defaults: '')
+  sorts?: string | string[] // optional: the specific type of sorts to be applied to the table (defaults: [])
+  filterable?: string | boolean // optional: determines whether the table displays the filters component (defaults: true)
+  filters?: string | string[] // optional: the specific type of filters to be displayed/utilized in the table (defaults: [])
+  actionable?: string | boolean // optional: determines whether the table displays any "action items" (defaults: true)
+  actions?: string | string[] // optional: the specific type of actions to be displayed/utilized in the table (defaults: 'Edit, Delete')
+  perPage: number // optional: the number of rows (items) to be displayed per page (defaults: 10)
+  currentPage: number // optional: the current page number (defaults: 1)
+  results?: SearchResponse<Record<string, any>> // optional: the Meilisearch search response (defaults: {})
+  hits?: Hits // optional: the Meilisearch hits (we could also name this "rows" as that would be more applicable to the "table domain" but choosing to stay in sync with Meilisearch right now until we implement for a second search engine driver)
+  selectable?: string | boolean // optional: determines whether the table displays the checkboxes (defaults: true)
+  selectedRows?: number[] | string[] // optional: holds the selected rows (defaults: [])
+  selectedAll?: boolean // optional: determines whether all the rows are selected (defaults: false)
+  // stickyHeader?: string | boolean // optional: determines whether the table displays the sticky header (defaults: false)
+  // stickyFooter?: string | boolean // optional: determines whether the table displays the sticky footer (defaults: false)
 }