feat(table): add summaryCell option

To control how summary row cells are displayed.
globalbrain · Mar 28, 2023 · c9e1327 · c9e1327
1 parent 3c93927
commit c9e1327
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 23 deletions.
diff --git a/lib/components/STable.vue b/lib/components/STable.vue
@@ -114,6 +114,16 @@ function lockBody(value: boolean) {
 function updateColWidth(key: string, value: string) {
   colWidths[key] = value
 }
+
+function isSummary(index: number) {
+  return index === records?.value?.length
+}
+
+function getCell(key: string, index: number) {
+  return (isSummary(index) && columns.value[key]?.summaryCell)
+    ? columns.value[key]?.summaryCell
+    : columns.value[key]?.cell
+}
 </script>
 
 <template>
@@ -171,7 +181,7 @@ function updateColWidth(key: string, value: string) {
               v-for="(record, rIndex) in recordsWithSummary"
               :key="rIndex"
               class="row"
-              :class="rIndex === records?.length && 'summary'"
+              :class="isSummary(rIndex) && 'summary'"
             >
               <STableItem
                 v-for="key in orders"
@@ -182,9 +192,9 @@ function updateColWidth(key: string, value: string) {
               >
                 <STableCell
                   :name="key"
-                  :class="rIndex === records?.length && 'summary'"
+                  :class="isSummary(rIndex) && 'summary'"
                   :class-name="columns[key].className"
-                  :cell="columns[key].cell"
+                  :cell="getCell(key, rIndex)"
                   :value="record[key]"
                   :record="record"
                   :records="records"

diff --git a/lib/composables/Table.ts b/lib/composables/Table.ts
@@ -6,14 +6,15 @@ import type { DropdownSection } from './Dropdown'
 
 export interface Table<
   O extends string = any,
-  R extends Record<string, any> = any
+  R extends Record<string, any> = any,
+  SR extends Record<string, any> = any
 > {
   orders: O[]
-  columns: TableColumns<O, R>
+  columns: TableColumns<O, R, SR>
   records?: R[] | null
   header?: boolean
   footer?: boolean
-  summary?: TableSummary<R> | null
+  summary?: SR | null
   total?: number | null
   page?: number | null
   perPage?: number | null
@@ -27,21 +28,23 @@ export interface Table<
 
 export type TableColumns<
   O extends string,
-  R extends Record<string, any>
+  R extends Record<string, any>,
+  SR extends Record<string, any>
 > = {
-  [K in O]: K extends keyof R
-    ? TableColumn<R[K], R>
-    : TableColumn<undefined, R>
+  [K in O]: TableColumn<R[K], R, SR[K], SR>
 }
 
-export interface TableColumn<V, R> {
+export interface TableColumn<V, R, SV, SR> {
   label?: string
   className?: string
   dropdown?: DropdownSection[]
   resizable?: boolean
-  cell?: TableCell | ((value: V, record: R) => TableCell)
+  cell?: TableCell | TableColumnCellFn<V, R>
+  summaryCell?: TableCell | TableColumnCellFn<SV, SR>
 }
 
+export type TableColumnCellFn<V, R> = (value: V, record: R) => TableCell
+
 export type TableCell =
   | TableCellText
   | TableCellDay
@@ -139,17 +142,17 @@ export interface TableCellComponent extends TableCellBase {
   props?: Record<string, any>
 }
 
-export type TableSummary<T> = {
-  [P in keyof T]?: T[P] | null | undefined
-}
-
-export interface UseTableOptions<O extends string, R extends Record<string, any>> {
+export interface UseTableOptions<
+  O extends string,
+  R extends Record<string, any>,
+  SR extends Record<string, any>
+> {
   orders: MaybeRef<O[]>
-  columns: MaybeRef<TableColumns<O, R>>
+  columns: MaybeRef<TableColumns<O, R, SR>>
   records?: MaybeRef<R[] | null | undefined>
   header?: MaybeRef<boolean | undefined>
   footer?: MaybeRef<boolean | undefined>
-  summary?: MaybeRef<TableSummary<R> | null | undefined>
+  summary?: MaybeRef<SR | null | undefined>
   total?: MaybeRef<number | null | undefined>
   page?: MaybeRef<number | null | undefined>
   perPage?: MaybeRef<number | null | undefined>
@@ -161,8 +164,12 @@ export interface UseTableOptions<O extends string, R extends Record<string, any>
   onReset?(): void
 }
 
-export function useTable<O extends string, R extends Record<string, any>>(
-  options: UseTableOptions<O, R>
-): Table<O, R> {
-  return reactive(options) as Table<O, R>
+export function useTable<
+  O extends string,
+  R extends Record<string, any>,
+  SR extends Record<string, any>
+>(
+  options: UseTableOptions<O, R, SR>
+): Table<O, R, SR> {
+  return reactive(options) as Table<O, R, SR>
 }