tanstack-table-vue 0.0.5 → 0.0.6

package/dist/components/TSTable.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+require('lodash.capitalize');
 const vue = require('vue');
 const vueTable = require('@tanstack/vue-table');
 const shared_utils = require('../shared/utils.cjs');
@@ -7,133 +8,32 @@ const shared_utils = require('../shared/utils.cjs');
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "TSTable",
   props: {
-    data: {},
     columns: {},
-    tableComponent: { default: "table" },
-    theadComponent: { default: "thead" },
-    tbodyComponent: { default: "tbody" },
-    tfootComponent: { default: "tfoot" },
-    trComponent: { default: "tr" },
-    thComponent: { default: "th" },
-    tdComponent: { default: "td" }
+    data: {},
+    tableOptions: {}
   },
   setup(__props) {
     const props = __props;
     const slots = vue.useSlots();
     const columnHelper = vueTable.createColumnHelper();
-    const tableColumns = vue.computed(() => {
+    const processedColumns = vue.computed(() => {
+      vueTable.useVueTable({
+        columns: props.columns,
+        data: props.data,
+        getCoreRowModel: vueTable.getCoreRowModel(),
+        ...props.tableOptions
+      });
       return shared_utils.processColumns(columnHelper, props.columns, slots);
     });
-    const table = vueTable.useVueTable({
-      get data() {
-        return props.data;
-      },
-      get columns() {
-        return tableColumns.value;
-      },
-      getCoreRowModel: vueTable.getCoreRowModel()
-    });
-    const hasFooterGroupRows = (footerGroup) => {
-      return footerGroup.headers.some(
-        (h) => !h.isPlaceholder && h.column.columnDef.footer && typeof h.column.columnDef.footer === "function" && h.column.columnDef.footer(h.getContext())
-      );
+    const tableOptions = {
+      columns: processedColumns.value,
+      data: props.data,
+      getCoreRowModel: vueTable.getCoreRowModel(),
+      ...props.tableOptions
     };
-    const hasFooterRows = vue.computed(() => {
-      return table.getFooterGroups().some((footerGroup) => hasFooterGroupRows(footerGroup));
-    });
+    const table = vueTable.useVueTable(tableOptions);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.tableComponent), null, {
-        default: vue.withCtx(() => [
-          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.theadComponent), null, {
-            default: vue.withCtx(() => [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(table).getHeaderGroups(), (headerGroup) => {
-                return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.trComponent), {
-                  key: headerGroup.id
-                }, {
-                  default: vue.withCtx(() => [
-                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(headerGroup.headers, (header) => {
-                      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.thComponent), {
-                        key: header.id,
-                        colSpan: header.colSpan
-                      }, {
-                        default: vue.withCtx(() => [
-                          !header.isPlaceholder ? (vue.openBlock(), vue.createBlock(vue.unref(vueTable.FlexRender), {
-                            key: 0,
-                            render: header.column.columnDef.header,
-                            props: header.getContext()
-                          }, null, 8, ["render", "props"])) : vue.createCommentVNode("", true)
-                        ]),
-                        _: 2
-                      }, 1032, ["colSpan"]);
-                    }), 128))
-                  ]),
-                  _: 2
-                }, 1024);
-              }), 128))
-            ]),
-            _: 1
-          })),
-          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.tbodyComponent), null, {
-            default: vue.withCtx(() => [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(table).getRowModel().rows, (row) => {
-                return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.trComponent), {
-                  key: row.id
-                }, {
-                  default: vue.withCtx(() => [
-                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(row.getVisibleCells(), (cell) => {
-                      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.tdComponent), {
-                        key: cell.id
-                      }, {
-                        default: vue.withCtx(() => [
-                          vue.createVNode(vue.unref(vueTable.FlexRender), {
-                            render: cell.column.columnDef.cell,
-                            props: cell.getContext()
-                          }, null, 8, ["render", "props"])
-                        ]),
-                        _: 2
-                      }, 1024);
-                    }), 128))
-                  ]),
-                  _: 2
-                }, 1024);
-              }), 128))
-            ]),
-            _: 1
-          })),
-          hasFooterRows.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.tfootComponent), { key: 0 }, {
-            default: vue.withCtx(() => [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(table).getFooterGroups(), (footerGroup) => {
-                return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
-                  key: footerGroup.id
-                }, [
-                  hasFooterGroupRows(footerGroup) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.trComponent), { key: 0 }, {
-                    default: vue.withCtx(() => [
-                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(footerGroup.headers, (header) => {
-                        return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.thComponent), {
-                          key: header.id,
-                          colSpan: header.colSpan
-                        }, {
-                          default: vue.withCtx(() => [
-                            !header.isPlaceholder ? (vue.openBlock(), vue.createBlock(vue.unref(vueTable.FlexRender), {
-                              key: 0,
-                              render: header.column.columnDef.footer,
-                              props: header.getContext()
-                            }, null, 8, ["render", "props"])) : vue.createCommentVNode("", true)
-                          ]),
-                          _: 2
-                        }, 1032, ["colSpan"]);
-                      }), 128))
-                    ]),
-                    _: 2
-                  }, 1024)) : vue.createCommentVNode("", true)
-                ], 64);
-              }), 128))
-            ]),
-            _: 1
-          })) : vue.createCommentVNode("", true)
-        ]),
-        _: 1
-      });
+      return vue.renderSlot(_ctx.$slots, "default", { table: vue.unref(table) });
     };
   }
 });

package/dist/components/TSTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TSTable.cjs","sources":["../../src/components/TSTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TSTableProps<TData extends object> {\n  data: TData[]\n  columns: ColumnDef<TData>[]\n\n  /**\n   * Custom components for the table\n   */\n  tableComponent?: string | object\n  theadComponent?: string | object\n  tbodyComponent?: string | object\n  tfootComponent?: string | object\n  trComponent?: string | object\n  thComponent?: string | object\n  tdComponent?: string | object\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"TData extends object\">\nimport type { ColumnDef, HeaderSlotProps, CellSlotProps, FooterSlotProps } from '../shared/types'\nimport { computed, useSlots } from 'vue'\nimport { FlexRender, type HeaderGroup } from '@tanstack/vue-table'\nimport {\n  createColumnHelper,\n  useVueTable,\n  getCoreRowModel,\n} from '@tanstack/vue-table'\nimport { processColumns } from '../shared/utils';\n\nconst props = withDefaults(defineProps<TSTableProps<TData>>(), {\n  tableComponent: 'table',\n  theadComponent: 'thead',\n  tbodyComponent: 'tbody',\n  tfootComponent: 'tfoot',\n  trComponent: 'tr',\n  thComponent: 'th',\n  tdComponent: 'td'\n})\n\ndefineSlots<{\n  [key: `cell-${string}`]: (props: CellSlotProps<TData>) => any;\n  [key: `header-${string}`]: (props: HeaderSlotProps<TData>) => any;\n  [key: `footer-${string}`]: (props: FooterSlotProps<TData>) => any;\n}>()\n\nconst slots = useSlots()\n\nconst columnHelper = createColumnHelper<TData>()\n\nconst tableColumns = computed(() => {\n  return processColumns(columnHelper, props.columns, slots)\n})\n\nconst table = useVueTable<TData>({\n  get data() {\n    return props.data\n  },\n  get columns() {\n    return tableColumns.value\n  },\n  getCoreRowModel: getCoreRowModel()\n})\n\nconst hasFooterGroupRows = (footerGroup: HeaderGroup<TData>) => {\n  return footerGroup.headers.some((h) =>\n    !h.isPlaceholder &&\n    h.column.columnDef.footer &&\n    typeof h.column.columnDef.footer === 'function' &&\n    h.column.columnDef.footer(h.getContext())\n  )\n}\n\nconst hasFooterRows = computed(() => {\n  return table.getFooterGroups().some(footerGroup => hasFooterGroupRows(footerGroup))\n})\n</script>\n\n<template>\n  <component :is=\"props.tableComponent\">\n    <component :is=\"props.theadComponent\">\n      <component :is=\"props.trComponent\" v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n        <component :is=\"props.thComponent\" v-for=\"header in headerGroup.headers\" :key=\"header.id\"\n          :colSpan=\"header.colSpan\">\n          <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\"\n            :props=\"header.getContext()\" />\n        </component>\n      </component>\n    </component>\n    <component :is=\"props.tbodyComponent\">\n      <component :is=\"props.trComponent\" v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n        <component :is=\"props.tdComponent\" v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n          <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n        </component>\n      </component>\n    </component>\n    <component :is=\"props.tfootComponent\" v-if=\"hasFooterRows\">\n      <template v-for=\"footerGroup in table.getFooterGroups()\" :key=\"footerGroup.id\">\n        <component :is=\"props.trComponent\" v-if=\"hasFooterGroupRows(footerGroup)\">\n          <component :is=\"props.thComponent\" v-for=\"header in footerGroup.headers\" :key=\"header.id\"\n            :colSpan=\"header.colSpan\">\n            <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.footer\"\n              :props=\"header.getContext()\" />\n          </component>\n        </component>\n      </template>\n    </component>\n  </component>\n</template>"],"names":["useSlots","createColumnHelper","computed","processColumns","useVueTable","getCoreRowModel"],"mappings":";;;;;;;;;;;;;;;;;;;;AA6BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAgBd,IAAA,MAAM,QAAQA,YAAS,EAAA;AAEvB,IAAA,MAAM,eAAeC,2BAA0B,EAAA;AAE/C,IAAM,MAAA,YAAA,GAAeC,aAAS,MAAM;AAClC,MAAA,OAAOC,2BAAe,CAAA,YAAA,EAAc,KAAM,CAAA,OAAA,EAAS,KAAK,CAAA;AAAA,KACzD,CAAA;AAED,IAAA,MAAM,QAAQC,oBAAmB,CAAA;AAAA,MAC/B,IAAI,IAAO,GAAA;AACT,QAAA,OAAO,KAAM,CAAA,IAAA;AAAA,OACf;AAAA,MACA,IAAI,OAAU,GAAA;AACZ,QAAA,OAAO,YAAa,CAAA,KAAA;AAAA,OACtB;AAAA,MACA,iBAAiBC,wBAAgB;AAAA,KAClC,CAAA;AAED,IAAM,MAAA,kBAAA,GAAqB,CAAC,WAAoC,KAAA;AAC9D,MAAA,OAAO,YAAY,OAAQ,CAAA,IAAA;AAAA,QAAK,CAAC,MAC/B,CAAC,CAAA,CAAE,iBACH,CAAE,CAAA,MAAA,CAAO,UAAU,MACnB,IAAA,OAAO,EAAE,MAAO,CAAA,SAAA,CAAU,WAAW,UACrC,IAAA,CAAA,CAAE,OAAO,SAAU,CAAA,MAAA,CAAO,CAAE,CAAA,UAAA,EAAY;AAAA,OAC1C;AAAA,KACF;AAEA,IAAM,MAAA,aAAA,GAAgBH,aAAS,MAAM;AACnC,MAAA,OAAO,MAAM,eAAgB,EAAA,CAAE,KAAK,CAAe,WAAA,KAAA,kBAAA,CAAmB,WAAW,CAAC,CAAA;AAAA,KACnF,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TSTable.cjs","sources":["../../src/components/TSTable.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ColumnDef, RowData, Table } from '@tanstack/vue-table'\n\nexport interface TSTableProps<TData extends RowData & object> {\n  columns: ColumnDef<TData>[]\n  data: TData[]\n  tableOptions?: Record<string, any>\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"TData extends RowData & object\">\nimport { computed, useSlots } from 'vue'\nimport { useVueTable, createColumnHelper, type ColumnDef as TStackColumnDef, getCoreRowModel } from '@tanstack/vue-table'\nimport { processColumns } from '../shared'\n\nconst props = defineProps<TSTableProps<TData>>()\n\nconst slots = useSlots()\nconst columnHelper = createColumnHelper<TData>()\n\nconst processedColumns = computed(() => {\n  const initialTable = useVueTable<TData>({\n    columns: props.columns as unknown as TStackColumnDef<TData>[],\n    data: props.data,\n    getCoreRowModel: getCoreRowModel(),\n    ...props.tableOptions\n  })\n  return processColumns(columnHelper, props.columns, slots, initialTable)\n})\n\nconst tableOptions = {\n  columns: processedColumns.value,\n  data: props.data,\n  getCoreRowModel: getCoreRowModel(),\n  ...props.tableOptions\n}\n\nconst table = useVueTable<TData>(tableOptions)\n\ndefineSlots<{\n  default: (props: {\n    table: Table<TData>;\n  }) => any;\n\n  [key: `header-${string}`]: (props: any) => any;\n  [key: `cell-${string}`]: (props: any) => any;\n  [key: `footer-${string}`]: (props: any) => any;\n}>()\n</script>\n\n<template>\n  <slot :table=\"table\" />\n</template>"],"names":["useSlots","createColumnHelper","computed","useVueTable","getCoreRowModel","processColumns"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,QAAQA,YAAS,EAAA;AACvB,IAAA,MAAM,eAAeC,2BAA0B,EAAA;AAE/C,IAAM,MAAA,gBAAA,GAAmBC,aAAS,MAAM;AACtC,MAAqBC,oBAAmB,CAAA;AAAA,QACtC,SAAS,KAAM,CAAA,OAAA;AAAA,QACf,MAAM,KAAM,CAAA,IAAA;AAAA,QACZ,iBAAiBC,wBAAgB,EAAA;AAAA,QACjC,GAAG,KAAM,CAAA;AAAA,OACV;AACD,MAAA,OAAOC,2BAAe,CAAA,YAAA,EAAc,KAAM,CAAA,OAAA,EAAS,KAAmB,CAAA;AAAA,KACvE,CAAA;AAED,IAAA,MAAM,YAAe,GAAA;AAAA,MACnB,SAAS,gBAAiB,CAAA,KAAA;AAAA,MAC1B,MAAM,KAAM,CAAA,IAAA;AAAA,MACZ,iBAAiBD,wBAAgB,EAAA;AAAA,MACjC,GAAG,KAAM,CAAA;AAAA,KACX;AAEA,IAAM,MAAA,KAAA,GAAQD,qBAAmB,YAAY,CAAA;;;;;;;;;"}

package/dist/components/TSTable.js

@@ -1,137 +1,37 @@
-import { defineComponent, useSlots, computed, createBlock, openBlock, resolveDynamicComponent, withCtx, createCommentVNode, createElementBlock, Fragment, renderList, unref, createVNode } from 'vue';
-import { createColumnHelper, useVueTable, getCoreRowModel, FlexRender } from '@tanstack/vue-table';
+import 'lodash.capitalize';
+import { defineComponent, useSlots, computed, renderSlot, unref } from 'vue';
+import { createColumnHelper, useVueTable, getCoreRowModel } from '@tanstack/vue-table';
 import { p as processColumns } from '../shared/utils.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "TSTable",
   props: {
-    data: {},
     columns: {},
-    tableComponent: { default: "table" },
-    theadComponent: { default: "thead" },
-    tbodyComponent: { default: "tbody" },
-    tfootComponent: { default: "tfoot" },
-    trComponent: { default: "tr" },
-    thComponent: { default: "th" },
-    tdComponent: { default: "td" }
+    data: {},
+    tableOptions: {}
   },
   setup(__props) {
     const props = __props;
     const slots = useSlots();
     const columnHelper = createColumnHelper();
-    const tableColumns = computed(() => {
+    const processedColumns = computed(() => {
+      useVueTable({
+        columns: props.columns,
+        data: props.data,
+        getCoreRowModel: getCoreRowModel(),
+        ...props.tableOptions
+      });
       return processColumns(columnHelper, props.columns, slots);
     });
-    const table = useVueTable({
-      get data() {
-        return props.data;
-      },
-      get columns() {
-        return tableColumns.value;
-      },
-      getCoreRowModel: getCoreRowModel()
-    });
-    const hasFooterGroupRows = (footerGroup) => {
-      return footerGroup.headers.some(
-        (h) => !h.isPlaceholder && h.column.columnDef.footer && typeof h.column.columnDef.footer === "function" && h.column.columnDef.footer(h.getContext())
-      );
+    const tableOptions = {
+      columns: processedColumns.value,
+      data: props.data,
+      getCoreRowModel: getCoreRowModel(),
+      ...props.tableOptions
     };
-    const hasFooterRows = computed(() => {
-      return table.getFooterGroups().some((footerGroup) => hasFooterGroupRows(footerGroup));
-    });
+    const table = useVueTable(tableOptions);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(props.tableComponent), null, {
-        default: withCtx(() => [
-          (openBlock(), createBlock(resolveDynamicComponent(props.theadComponent), null, {
-            default: withCtx(() => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(table).getHeaderGroups(), (headerGroup) => {
-                return openBlock(), createBlock(resolveDynamicComponent(props.trComponent), {
-                  key: headerGroup.id
-                }, {
-                  default: withCtx(() => [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(headerGroup.headers, (header) => {
-                      return openBlock(), createBlock(resolveDynamicComponent(props.thComponent), {
-                        key: header.id,
-                        colSpan: header.colSpan
-                      }, {
-                        default: withCtx(() => [
-                          !header.isPlaceholder ? (openBlock(), createBlock(unref(FlexRender), {
-                            key: 0,
-                            render: header.column.columnDef.header,
-                            props: header.getContext()
-                          }, null, 8, ["render", "props"])) : createCommentVNode("", true)
-                        ]),
-                        _: 2
-                      }, 1032, ["colSpan"]);
-                    }), 128))
-                  ]),
-                  _: 2
-                }, 1024);
-              }), 128))
-            ]),
-            _: 1
-          })),
-          (openBlock(), createBlock(resolveDynamicComponent(props.tbodyComponent), null, {
-            default: withCtx(() => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(table).getRowModel().rows, (row) => {
-                return openBlock(), createBlock(resolveDynamicComponent(props.trComponent), {
-                  key: row.id
-                }, {
-                  default: withCtx(() => [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(row.getVisibleCells(), (cell) => {
-                      return openBlock(), createBlock(resolveDynamicComponent(props.tdComponent), {
-                        key: cell.id
-                      }, {
-                        default: withCtx(() => [
-                          createVNode(unref(FlexRender), {
-                            render: cell.column.columnDef.cell,
-                            props: cell.getContext()
-                          }, null, 8, ["render", "props"])
-                        ]),
-                        _: 2
-                      }, 1024);
-                    }), 128))
-                  ]),
-                  _: 2
-                }, 1024);
-              }), 128))
-            ]),
-            _: 1
-          })),
-          hasFooterRows.value ? (openBlock(), createBlock(resolveDynamicComponent(props.tfootComponent), { key: 0 }, {
-            default: withCtx(() => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(table).getFooterGroups(), (footerGroup) => {
-                return openBlock(), createElementBlock(Fragment, {
-                  key: footerGroup.id
-                }, [
-                  hasFooterGroupRows(footerGroup) ? (openBlock(), createBlock(resolveDynamicComponent(props.trComponent), { key: 0 }, {
-                    default: withCtx(() => [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(footerGroup.headers, (header) => {
-                        return openBlock(), createBlock(resolveDynamicComponent(props.thComponent), {
-                          key: header.id,
-                          colSpan: header.colSpan
-                        }, {
-                          default: withCtx(() => [
-                            !header.isPlaceholder ? (openBlock(), createBlock(unref(FlexRender), {
-                              key: 0,
-                              render: header.column.columnDef.footer,
-                              props: header.getContext()
-                            }, null, 8, ["render", "props"])) : createCommentVNode("", true)
-                          ]),
-                          _: 2
-                        }, 1032, ["colSpan"]);
-                      }), 128))
-                    ]),
-                    _: 2
-                  }, 1024)) : createCommentVNode("", true)
-                ], 64);
-              }), 128))
-            ]),
-            _: 1
-          })) : createCommentVNode("", true)
-        ]),
-        _: 1
-      });
+      return renderSlot(_ctx.$slots, "default", { table: unref(table) });
     };
   }
 });

package/dist/components/TSTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"TSTable.js","sources":["../../src/components/TSTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TSTableProps<TData extends object> {\n  data: TData[]\n  columns: ColumnDef<TData>[]\n\n  /**\n   * Custom components for the table\n   */\n  tableComponent?: string | object\n  theadComponent?: string | object\n  tbodyComponent?: string | object\n  tfootComponent?: string | object\n  trComponent?: string | object\n  thComponent?: string | object\n  tdComponent?: string | object\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"TData extends object\">\nimport type { ColumnDef, HeaderSlotProps, CellSlotProps, FooterSlotProps } from '../shared/types'\nimport { computed, useSlots } from 'vue'\nimport { FlexRender, type HeaderGroup } from '@tanstack/vue-table'\nimport {\n  createColumnHelper,\n  useVueTable,\n  getCoreRowModel,\n} from '@tanstack/vue-table'\nimport { processColumns } from '../shared/utils';\n\nconst props = withDefaults(defineProps<TSTableProps<TData>>(), {\n  tableComponent: 'table',\n  theadComponent: 'thead',\n  tbodyComponent: 'tbody',\n  tfootComponent: 'tfoot',\n  trComponent: 'tr',\n  thComponent: 'th',\n  tdComponent: 'td'\n})\n\ndefineSlots<{\n  [key: `cell-${string}`]: (props: CellSlotProps<TData>) => any;\n  [key: `header-${string}`]: (props: HeaderSlotProps<TData>) => any;\n  [key: `footer-${string}`]: (props: FooterSlotProps<TData>) => any;\n}>()\n\nconst slots = useSlots()\n\nconst columnHelper = createColumnHelper<TData>()\n\nconst tableColumns = computed(() => {\n  return processColumns(columnHelper, props.columns, slots)\n})\n\nconst table = useVueTable<TData>({\n  get data() {\n    return props.data\n  },\n  get columns() {\n    return tableColumns.value\n  },\n  getCoreRowModel: getCoreRowModel()\n})\n\nconst hasFooterGroupRows = (footerGroup: HeaderGroup<TData>) => {\n  return footerGroup.headers.some((h) =>\n    !h.isPlaceholder &&\n    h.column.columnDef.footer &&\n    typeof h.column.columnDef.footer === 'function' &&\n    h.column.columnDef.footer(h.getContext())\n  )\n}\n\nconst hasFooterRows = computed(() => {\n  return table.getFooterGroups().some(footerGroup => hasFooterGroupRows(footerGroup))\n})\n</script>\n\n<template>\n  <component :is=\"props.tableComponent\">\n    <component :is=\"props.theadComponent\">\n      <component :is=\"props.trComponent\" v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n        <component :is=\"props.thComponent\" v-for=\"header in headerGroup.headers\" :key=\"header.id\"\n          :colSpan=\"header.colSpan\">\n          <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\"\n            :props=\"header.getContext()\" />\n        </component>\n      </component>\n    </component>\n    <component :is=\"props.tbodyComponent\">\n      <component :is=\"props.trComponent\" v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n        <component :is=\"props.tdComponent\" v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n          <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n        </component>\n      </component>\n    </component>\n    <component :is=\"props.tfootComponent\" v-if=\"hasFooterRows\">\n      <template v-for=\"footerGroup in table.getFooterGroups()\" :key=\"footerGroup.id\">\n        <component :is=\"props.trComponent\" v-if=\"hasFooterGroupRows(footerGroup)\">\n          <component :is=\"props.thComponent\" v-for=\"header in footerGroup.headers\" :key=\"header.id\"\n            :colSpan=\"header.colSpan\">\n            <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.footer\"\n              :props=\"header.getContext()\" />\n          </component>\n        </component>\n      </template>\n    </component>\n  </component>\n</template>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA6BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAgBd,IAAA,MAAM,QAAQ,QAAS,EAAA;AAEvB,IAAA,MAAM,eAAe,kBAA0B,EAAA;AAE/C,IAAM,MAAA,YAAA,GAAe,SAAS,MAAM;AAClC,MAAA,OAAO,cAAe,CAAA,YAAA,EAAc,KAAM,CAAA,OAAA,EAAS,KAAK,CAAA;AAAA,KACzD,CAAA;AAED,IAAA,MAAM,QAAQ,WAAmB,CAAA;AAAA,MAC/B,IAAI,IAAO,GAAA;AACT,QAAA,OAAO,KAAM,CAAA,IAAA;AAAA,OACf;AAAA,MACA,IAAI,OAAU,GAAA;AACZ,QAAA,OAAO,YAAa,CAAA,KAAA;AAAA,OACtB;AAAA,MACA,iBAAiB,eAAgB;AAAA,KAClC,CAAA;AAED,IAAM,MAAA,kBAAA,GAAqB,CAAC,WAAoC,KAAA;AAC9D,MAAA,OAAO,YAAY,OAAQ,CAAA,IAAA;AAAA,QAAK,CAAC,MAC/B,CAAC,CAAA,CAAE,iBACH,CAAE,CAAA,MAAA,CAAO,UAAU,MACnB,IAAA,OAAO,EAAE,MAAO,CAAA,SAAA,CAAU,WAAW,UACrC,IAAA,CAAA,CAAE,OAAO,SAAU,CAAA,MAAA,CAAO,CAAE,CAAA,UAAA,EAAY;AAAA,OAC1C;AAAA,KACF;AAEA,IAAM,MAAA,aAAA,GAAgB,SAAS,MAAM;AACnC,MAAA,OAAO,MAAM,eAAgB,EAAA,CAAE,KAAK,CAAe,WAAA,KAAA,kBAAA,CAAmB,WAAW,CAAC,CAAA;AAAA,KACnF,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TSTable.js","sources":["../../src/components/TSTable.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ColumnDef, RowData, Table } from '@tanstack/vue-table'\n\nexport interface TSTableProps<TData extends RowData & object> {\n  columns: ColumnDef<TData>[]\n  data: TData[]\n  tableOptions?: Record<string, any>\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"TData extends RowData & object\">\nimport { computed, useSlots } from 'vue'\nimport { useVueTable, createColumnHelper, type ColumnDef as TStackColumnDef, getCoreRowModel } from '@tanstack/vue-table'\nimport { processColumns } from '../shared'\n\nconst props = defineProps<TSTableProps<TData>>()\n\nconst slots = useSlots()\nconst columnHelper = createColumnHelper<TData>()\n\nconst processedColumns = computed(() => {\n  const initialTable = useVueTable<TData>({\n    columns: props.columns as unknown as TStackColumnDef<TData>[],\n    data: props.data,\n    getCoreRowModel: getCoreRowModel(),\n    ...props.tableOptions\n  })\n  return processColumns(columnHelper, props.columns, slots, initialTable)\n})\n\nconst tableOptions = {\n  columns: processedColumns.value,\n  data: props.data,\n  getCoreRowModel: getCoreRowModel(),\n  ...props.tableOptions\n}\n\nconst table = useVueTable<TData>(tableOptions)\n\ndefineSlots<{\n  default: (props: {\n    table: Table<TData>;\n  }) => any;\n\n  [key: `header-${string}`]: (props: any) => any;\n  [key: `cell-${string}`]: (props: any) => any;\n  [key: `footer-${string}`]: (props: any) => any;\n}>()\n</script>\n\n<template>\n  <slot :table=\"table\" />\n</template>"],"names":[],"mappings":";;;;;;;;;;;;;AAeA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,IAAA,MAAM,eAAe,kBAA0B,EAAA;AAE/C,IAAM,MAAA,gBAAA,GAAmB,SAAS,MAAM;AACtC,MAAqB,WAAmB,CAAA;AAAA,QACtC,SAAS,KAAM,CAAA,OAAA;AAAA,QACf,MAAM,KAAM,CAAA,IAAA;AAAA,QACZ,iBAAiB,eAAgB,EAAA;AAAA,QACjC,GAAG,KAAM,CAAA;AAAA,OACV;AACD,MAAA,OAAO,cAAe,CAAA,YAAA,EAAc,KAAM,CAAA,OAAA,EAAS,KAAmB,CAAA;AAAA,KACvE,CAAA;AAED,IAAA,MAAM,YAAe,GAAA;AAAA,MACnB,SAAS,gBAAiB,CAAA,KAAA;AAAA,MAC1B,MAAM,KAAM,CAAA,IAAA;AAAA,MACZ,iBAAiB,eAAgB,EAAA;AAAA,MACjC,GAAG,KAAM,CAAA;AAAA,KACX;AAEA,IAAM,MAAA,KAAA,GAAQ,YAAmB,YAAY,CAAA;;;;;;;;;"}

package/dist/index.cjs

@@ -3,12 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const components_TSTable = require('./components/TSTable.cjs');
-const shared_defineColumns = require('./shared/defineColumns.cjs');
 const shared_utils = require('./shared/utils.cjs');
 
 
 
 exports.TSTable = components_TSTable._sfc_main;
-exports.defineColumns = shared_defineColumns.defineColumns;
 exports.processColumns = shared_utils.processColumns;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/index.d.ts

@@ -1,12 +1,8 @@
 import { AllowedComponentProps } from 'vue';
-import { CellContext } from '@tanstack/vue-table';
-import { Column } from '@tanstack/vue-table';
-import { ColumnDef as ColumnDef_2 } from '@tanstack/vue-table';
+import { ColumnDef } from '@tanstack/vue-table';
 import { ColumnHelper } from '@tanstack/vue-table';
 import { ComponentCustomProps } from 'vue';
-import { HeaderContext } from '@tanstack/vue-table';
 import { PublicProps } from 'vue';
-import { Row } from '@tanstack/vue-table';
 import { RowData } from '@tanstack/vue-table';
 import { ShallowUnwrapRef } from 'vue';
 import { Slots } from 'vue';
@@ -18,104 +14,36 @@ declare type __VLS_PrettifyLocal<T> = {
     [K in keyof T]: T[K];
 } & {};
 
-export declare interface AccessorColumnDef {
-    id: string;
-    type?: "accessor";
-    header?: string;
-    footer?: string | ((props: any) => any);
-    cell?: (info: any) => any;
-    meta?: Record<string, any>;
-}
-
-export declare interface CellSlotProps<TData extends RowData> {
-    row: Row<TData>;
-    context: CellContext<TData, unknown>;
-    value: any;
-}
-
-declare type ColumnConfig<TData extends object> = {
-    id: keyof TData & string;
-    header?: string;
-    footer?: string;
-};
-
-export declare type ColumnDef<TData extends object> = DisplayColumnDef | AccessorColumnDef | GroupColumnDef<TData>;
-
-export declare function defineColumns<TData extends object>(columns: (ColumnConfig<TData> | GroupConfig<TData>)[]): ColumnDef<TData>[];
-
-export declare interface DisplayColumnDef {
-    id: string;
-    type: "display";
-    header?: string;
-    footer?: string | ((props: any) => any);
-}
-
-export declare interface FooterSlotProps<TData extends RowData> {
-    column: Column<TData>;
-    context: HeaderContext<TData, unknown>;
-}
+export declare const processColumns: <TData extends RowData & object>(columnHelper: ColumnHelper<TData>, columns: ColumnDef<TData>[], slots: Readonly<Slots>, table: Table<TData>) => ColumnDef<TData>[];
 
-export declare interface GroupColumnDef<TData extends object> {
-    id: string;
-    type: "group";
-    header?: string;
-    footer?: string | ((props: any) => any);
-    columns: Array<ColumnDef_2<TData>>;
-    meta?: Record<string, any>;
-}
-
-declare type GroupConfig<TData extends object> = {
-    id: string;
-    header?: string;
-    footer?: string;
-    columns: (ColumnConfig<TData> | GroupConfig<TData>)[];
-};
-
-export declare interface HeaderSlotProps<TData extends RowData> {
-    column: Column<TData>;
-    context: HeaderContext<TData, unknown>;
-}
-
-export declare const processColumns: <TData extends RowData & object>(columnHelper: ColumnHelper<TData>, columns: ColumnDef<TData>[], slots: Readonly<Slots>) => ColumnDef_2<TData>[];
-
-export declare interface TableContext<TData extends RowData> {
-    table: Table<TData>;
-    column: Column<TData>;
-    row?: Row<TData>;
-    getValue: () => any;
-}
-
-export declare const TSTable: <TData extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+export declare const TSTable: <TData extends RowData & object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, never> & TSTableProps<TData> & Partial<{}>> & PublicProps;
     expose(exposed: ShallowUnwrapRef<    {}>): void;
     attrs: any;
     slots: Readonly<{
-        [key: `cell-${string}`]: (props: CellSlotProps<TData>) => any;
-        [key: `header-${string}`]: (props: HeaderSlotProps<TData>) => any;
-        [key: `footer-${string}`]: (props: FooterSlotProps<TData>) => any;
+        [key: `header-${string}`]: (props: any) => any;
+        [key: `cell-${string}`]: (props: any) => any;
+        [key: `footer-${string}`]: (props: any) => any;
+        default: (props: {
+            table: Table<TData>;
+        }) => any;
     }> & {
-        [key: `cell-${string}`]: (props: CellSlotProps<TData>) => any;
-        [key: `header-${string}`]: (props: HeaderSlotProps<TData>) => any;
-        [key: `footer-${string}`]: (props: FooterSlotProps<TData>) => any;
+        [key: `header-${string}`]: (props: any) => any;
+        [key: `cell-${string}`]: (props: any) => any;
+        [key: `footer-${string}`]: (props: any) => any;
+        default: (props: {
+            table: Table<TData>;
+        }) => any;
     };
     emit: {};
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 
-export declare interface TSTableProps<TData extends object> {
-    data: TData[];
+export declare interface TSTableProps<TData extends RowData & object> {
     columns: ColumnDef<TData>[];
-    /**
-     * Custom components for the table
-     */
-    tableComponent?: string | object;
-    theadComponent?: string | object;
-    tbodyComponent?: string | object;
-    tfootComponent?: string | object;
-    trComponent?: string | object;
-    thComponent?: string | object;
-    tdComponent?: string | object;
+    data: TData[];
+    tableOptions?: Record<string, any>;
 }
 
 export { }

package/dist/index.js

@@ -1,4 +1,3 @@
 export { _ as TSTable } from './components/TSTable.js';
-export { d as defineColumns } from './shared/defineColumns.js';
 export { p as processColumns } from './shared/utils.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/shared/utils.cjs

@@ -3,68 +3,85 @@
 const capitalize = require('lodash.capitalize');
 
 const getHeader = (col, slots, context) => {
-  if (col.header) {
-    return col.header;
-  }
-  const slotName = `header-${col.id}`;
+  const columnId = col.accessorKey || col.id || "";
+  const slotName = `header-${columnId}`;
   if (slots[slotName]) {
     return slots[slotName]({
       column: context.column,
       context
     });
   }
-  return capitalize(col.id.split("-").join(" "));
+  if (col.header) {
+    return col.header;
+  }
+  return capitalize(columnId.split("-").join(" "));
 };
 const getFooter = (col, slots, context) => {
-  if (col.footer) {
-    return col.footer;
-  }
-  const slotName = `footer-${col.id}`;
+  const columnId = col.accessorKey || col.id || "";
+  const slotName = `footer-${columnId}`;
   if (slots[slotName]) {
     return slots[slotName]({
       column: context.column,
       context
     });
   }
-  console.log(`footer for ${col.id} is undefined`);
+  if (col.footer) {
+    return col.footer;
+  }
   return void 0;
 };
 const getCell = (col, slots, context) => {
-  const slotName = `cell-${col.id}`;
+  const columnId = col.accessorKey || col.id || "";
+  const slotName = `cell-${columnId}`;
   if (slots[slotName]) {
     return slots[slotName]({
+      cell: context.cell,
       row: context.row,
-      context,
       value: context.getValue()
     });
   }
-  return context.getValue();
+  const value = context.getValue();
+  if (col.cell) {
+    return typeof col.cell === "function" ? col.cell(context) : col.cell;
+  }
+  return value !== void 0 && value !== null ? value : "-";
 };
-const processColumns = (columnHelper, columns, slots) => {
+const processColumns = (columnHelper, columns, slots, table) => {
   return columns.map((col) => {
-    if (col.type === "group") {
-      const groupCol = col;
+    if ("columns" in col && Array.isArray(col.columns)) {
       return columnHelper.group({
-        id: groupCol.id,
-        header: (context) => getHeader(groupCol, slots, context),
-        footer: (context) => getFooter(groupCol, slots, context),
-        columns: processColumns(columnHelper, groupCol.columns, slots)
+        id: col.id || String(Math.random()),
+        header: (context) => getHeader(col, slots, context),
+        footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
+        columns: processColumns(columnHelper, col.columns, slots),
+        meta: col.meta
       });
     }
-    if (col.type === "display") {
-      return columnHelper.display({
-        id: col.id,
+    const accessorCol = col;
+    if (accessorCol.accessorKey) {
+      return columnHelper.accessor(accessorCol.accessorKey, {
+        id: accessorCol.id || accessorCol.accessorKey,
         header: (context) => getHeader(col, slots, context),
-        footer: (context) => getFooter(col, slots, context),
-        cell: (context) => getCell(col, slots, context)
+        footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
+        cell: (context) => getCell(col, slots, context),
+        meta: col.meta
       });
     }
-    const accessorCol = col;
-    return columnHelper.accessor((row) => row[accessorCol.id], {
-      id: accessorCol.id,
+    if (accessorCol.accessorFn) {
+      return columnHelper.accessor(accessorCol.accessorFn, {
+        id: accessorCol.id || String(Math.random()),
+        header: (context) => getHeader(col, slots, context),
+        footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
+        cell: (context) => getCell(col, slots, context),
+        meta: col.meta
+      });
+    }
+    return columnHelper.display({
+      id: col.id || String(Math.random()),
       header: (context) => getHeader(col, slots, context),
-      footer: (context) => getFooter(col, slots, context),
-      cell: (context) => getCell(col, slots, context)
+      footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
+      cell: (context) => getCell(col, slots, context),
+      meta: col.meta
     });
   });
 };

package/dist/shared/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../src/shared/utils.ts"],"sourcesContent":["import type {\n  ColumnHelper,\n  HeaderContext,\n  CellContext,\n  RowData,\n  ColumnDef as TStackColumnDef,\n} from '@tanstack/vue-table'\nimport type { Slots } from 'vue'\nimport capitalize from 'lodash.capitalize'\nimport type {\n  ColumnDef,\n  AccessorColumnDef,\n  GroupColumnDef,\n  HeaderSlotProps,\n  CellSlotProps,\n  FooterSlotProps,\n} from './types'\n\nconst getHeader = <TData extends RowData & object>(\n  col: ColumnDef<TData>,\n  slots: Readonly<Slots>,\n  context: HeaderContext<TData, unknown>,\n) => {\n  if (col.header) {\n    return col.header\n  }\n\n  const slotName = `header-${col.id}`\n\n  if (slots[slotName]) {\n    return slots[slotName]({\n      column: context.column,\n      context,\n    } as HeaderSlotProps<TData>)\n  }\n\n  return capitalize(col.id.split('-').join(' '))\n}\n\nconst getFooter = <TData extends RowData & object>(\n  col: ColumnDef<TData>,\n  slots: Readonly<Slots>,\n  context: HeaderContext<TData, unknown>,\n) => {\n  if (col.footer) {\n    return col.footer\n  }\n\n  const slotName = `footer-${col.id}`\n\n  if (slots[slotName]) {\n    return slots[slotName]({\n      column: context.column,\n      context,\n    } as FooterSlotProps<TData>)\n  }\n\n  console.log(`footer for ${col.id} is undefined`)\n\n  return undefined\n}\n\nconst getCell = <TData extends RowData & object>(\n  col: ColumnDef<TData>,\n  slots: Readonly<Slots>,\n  context: CellContext<TData, unknown>,\n) => {\n  const slotName = `cell-${col.id}`\n\n  if (slots[slotName]) {\n    return slots[slotName]({\n      row: context.row,\n      context,\n      value: context.getValue(),\n    } as CellSlotProps<TData>)\n  }\n\n  return context.getValue()\n}\n\nexport const processColumns = <TData extends RowData & object>(\n  columnHelper: ColumnHelper<TData>,\n  columns: ColumnDef<TData>[],\n  slots: Readonly<Slots>,\n): TStackColumnDef<TData>[] => {\n  return columns.map((col) => {\n    if (col.type === 'group') {\n      const groupCol = col as GroupColumnDef<TData>\n      return columnHelper.group({\n        id: groupCol.id,\n        header: (context: HeaderContext<TData, unknown>) => getHeader(groupCol, slots, context),\n        footer: (context: HeaderContext<TData, unknown>) => getFooter(groupCol, slots, context),\n        columns: processColumns(columnHelper, groupCol.columns as ColumnDef<TData>[], slots),\n      }) as TStackColumnDef<TData>\n    }\n\n    if (col.type === 'display') {\n      return columnHelper.display({\n        id: col.id,\n        header: (context: HeaderContext<TData, unknown>) => getHeader(col, slots, context),\n        footer: (context: HeaderContext<TData, unknown>) => getFooter(col, slots, context),\n        cell: (context: CellContext<TData, unknown>) => getCell(col, slots, context),\n      }) as TStackColumnDef<TData>\n    }\n\n    // For accessor columns\n    const accessorCol = col as AccessorColumnDef\n    return columnHelper.accessor((row) => row[accessorCol.id as keyof TData], {\n      id: accessorCol.id,\n      header: (context: HeaderContext<TData, unknown>) => getHeader(col, slots, context),\n      footer: (context: HeaderContext<TData, unknown>) => getFooter(col, slots, context),\n      cell: (context: CellContext<TData, unknown>) => getCell(col, slots, context),\n    }) as TStackColumnDef<TData>\n  })\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.cjs","sources":["../../src/shared/utils.ts"],"sourcesContent":["import type {\n  ColumnHelper,\n  HeaderContext,\n  CellContext,\n  RowData,\n  ColumnDef as TStackColumnDef,\n  Table,\n  ColumnDef,\n} from '@tanstack/vue-table'\nimport type { Slots } from 'vue'\nimport capitalize from 'lodash.capitalize'\n\nconst getHeader = <TData extends RowData & object>(\n  col: ColumnDef<TData>,\n  slots: Readonly<Slots>,\n  context: HeaderContext<TData, unknown>,\n) => {\n  const columnId = (col as any).accessorKey || col.id || ''\n  const slotName = `header-${columnId}`\n\n  // Check slot first\n  if (slots[slotName]) {\n    return slots[slotName]({\n      column: context.column,\n      context,\n    })\n  }\n\n  // Then use header prop if provided\n  if (col.header) {\n    return col.header\n  }\n\n  // Finally fallback to capitalized id\n  return capitalize(columnId.split('-').join(' '))\n}\n\nconst getFooter = <TData extends RowData & object>(\n  col: ColumnDef<TData>,\n  slots: Readonly<Slots>,\n  context: HeaderContext<TData, unknown>,\n) => {\n  const columnId = (col as any).accessorKey || col.id || ''\n  const slotName = `footer-${columnId}`\n\n  // Check slot first\n  if (slots[slotName]) {\n    return slots[slotName]({\n      column: context.column,\n      context,\n    })\n  }\n\n  // Then use footer prop if provided\n  if (col.footer) {\n    return col.footer\n  }\n\n  return undefined\n}\n\nconst getCell = <TData extends RowData & object>(\n  col: ColumnDef<TData>,\n  slots: Readonly<Slots>,\n  context: CellContext<TData, unknown>,\n) => {\n  const columnId = (col as any).accessorKey || col.id || ''\n  const slotName = `cell-${columnId}`\n\n  // Check slot first\n  if (slots[slotName]) {\n    return slots[slotName]({\n      cell: context.cell,\n      row: context.row,\n      value: context.getValue(),\n    })\n  }\n\n  // Then handle cell value\n  const value = context.getValue()\n  if (col.cell) {\n    return typeof col.cell === 'function' ? col.cell(context) : col.cell\n  }\n  return value !== undefined && value !== null ? value : '-'\n}\n\nexport const processColumns = <TData extends RowData & object>(\n  columnHelper: ColumnHelper<TData>,\n  columns: ColumnDef<TData>[],\n  slots: Readonly<Slots>,\n  table: Table<TData>,\n): TStackColumnDef<TData>[] => {\n  return columns.map((col): TStackColumnDef<TData> => {\n    // Handle group columns by checking if columns property exists\n    if ('columns' in col && Array.isArray(col.columns)) {\n      return columnHelper.group({\n        id: col.id || String(Math.random()),\n        header: (context: HeaderContext<TData, unknown>) => getHeader(col, slots, context),\n        footer: col.footer ? (context: HeaderContext<TData, unknown>) => getFooter(col, slots, context) : undefined,\n        columns: processColumns(columnHelper, col.columns, slots, table),\n        meta: col.meta,\n      })\n    }\n\n    // Handle accessor columns\n    const accessorCol = col as any\n    if (accessorCol.accessorKey) {\n      return columnHelper.accessor(accessorCol.accessorKey, {\n        id: accessorCol.id || accessorCol.accessorKey,\n        header: (context: HeaderContext<TData, unknown>) => getHeader(col, slots, context),\n        footer: col.footer ? (context: HeaderContext<TData, unknown>) => getFooter(col, slots, context) : undefined,\n        cell: (context: CellContext<TData, unknown>) => getCell(col, slots, context),\n        meta: col.meta,\n      })\n    }\n\n    if (accessorCol.accessorFn) {\n      return columnHelper.accessor(accessorCol.accessorFn, {\n        id: accessorCol.id || String(Math.random()),\n        header: (context: HeaderContext<TData, unknown>) => getHeader(col, slots, context),\n        footer: col.footer ? (context: HeaderContext<TData, unknown>) => getFooter(col, slots, context) : undefined,\n        cell: (context: CellContext<TData, unknown>) => getCell(col, slots, context),\n        meta: col.meta,\n      })\n    }\n\n    // Default case - treat as display column\n    return columnHelper.display({\n      id: col.id || String(Math.random()),\n      header: (context: HeaderContext<TData, unknown>) => getHeader(col, slots, context),\n      footer: col.footer ? (context: HeaderContext<TData, unknown>) => getFooter(col, slots, context) : undefined,\n      cell: (context: CellContext<TData, unknown>) => getCell(col, slots, context),\n      meta: col.meta,\n    })\n  })\n}\n"],"names":[],"mappings":"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"}

package/dist/shared/utils.js

@@ -1,68 +1,85 @@
 import capitalize from 'lodash.capitalize';
 
 const getHeader = (col, slots, context) => {
-  if (col.header) {
-    return col.header;
-  }
-  const slotName = `header-${col.id}`;
+  const columnId = col.accessorKey || col.id || "";
+  const slotName = `header-${columnId}`;
   if (slots[slotName]) {
     return slots[slotName]({
       column: context.column,
       context
     });
   }
-  return capitalize(col.id.split("-").join(" "));
+  if (col.header) {
+    return col.header;
+  }
+  return capitalize(columnId.split("-").join(" "));
 };
 const getFooter = (col, slots, context) => {
-  if (col.footer) {
-    return col.footer;
-  }
-  const slotName = `footer-${col.id}`;
+  const columnId = col.accessorKey || col.id || "";
+  const slotName = `footer-${columnId}`;
   if (slots[slotName]) {
     return slots[slotName]({
       column: context.column,
       context
     });
   }
-  console.log(`footer for ${col.id} is undefined`);
+  if (col.footer) {
+    return col.footer;
+  }
   return void 0;
 };
 const getCell = (col, slots, context) => {
-  const slotName = `cell-${col.id}`;
+  const columnId = col.accessorKey || col.id || "";
+  const slotName = `cell-${columnId}`;
   if (slots[slotName]) {
     return slots[slotName]({
+      cell: context.cell,
       row: context.row,
-      context,
       value: context.getValue()
     });
   }
-  return context.getValue();
+  const value = context.getValue();
+  if (col.cell) {
+    return typeof col.cell === "function" ? col.cell(context) : col.cell;
+  }
+  return value !== void 0 && value !== null ? value : "-";
 };
-const processColumns = (columnHelper, columns, slots) => {
+const processColumns = (columnHelper, columns, slots, table) => {
   return columns.map((col) => {
-    if (col.type === "group") {
-      const groupCol = col;
+    if ("columns" in col && Array.isArray(col.columns)) {
       return columnHelper.group({
-        id: groupCol.id,
-        header: (context) => getHeader(groupCol, slots, context),
-        footer: (context) => getFooter(groupCol, slots, context),
-        columns: processColumns(columnHelper, groupCol.columns, slots)
+        id: col.id || String(Math.random()),
+        header: (context) => getHeader(col, slots, context),
+        footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
+        columns: processColumns(columnHelper, col.columns, slots),
+        meta: col.meta
       });
     }
-    if (col.type === "display") {
-      return columnHelper.display({
-        id: col.id,
+    const accessorCol = col;
+    if (accessorCol.accessorKey) {
+      return columnHelper.accessor(accessorCol.accessorKey, {
+        id: accessorCol.id || accessorCol.accessorKey,
         header: (context) => getHeader(col, slots, context),
-        footer: (context) => getFooter(col, slots, context),
-        cell: (context) => getCell(col, slots, context)
+        footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
+        cell: (context) => getCell(col, slots, context),
+        meta: col.meta
       });
     }
-    const accessorCol = col;
-    return columnHelper.accessor((row) => row[accessorCol.id], {
-      id: accessorCol.id,
+    if (accessorCol.accessorFn) {
+      return columnHelper.accessor(accessorCol.accessorFn, {
+        id: accessorCol.id || String(Math.random()),
+        header: (context) => getHeader(col, slots, context),
+        footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
+        cell: (context) => getCell(col, slots, context),
+        meta: col.meta
+      });
+    }
+    return columnHelper.display({
+      id: col.id || String(Math.random()),
       header: (context) => getHeader(col, slots, context),
-      footer: (context) => getFooter(col, slots, context),
-      cell: (context) => getCell(col, slots, context)
+      footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
+      cell: (context) => getCell(col, slots, context),
+      meta: col.meta
     });
   });
 };

package/dist/shared/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/shared/utils.ts"],"sourcesContent":["import type {\n  ColumnHelper,\n  HeaderContext,\n  CellContext,\n  RowData,\n  ColumnDef as TStackColumnDef,\n} from '@tanstack/vue-table'\nimport type { Slots } from 'vue'\nimport capitalize from 'lodash.capitalize'\nimport type {\n  ColumnDef,\n  AccessorColumnDef,\n  GroupColumnDef,\n  HeaderSlotProps,\n  CellSlotProps,\n  FooterSlotProps,\n} from './types'\n\nconst getHeader = <TData extends RowData & object>(\n  col: ColumnDef<TData>,\n  slots: Readonly<Slots>,\n  context: HeaderContext<TData, unknown>,\n) => {\n  if (col.header) {\n    return col.header\n  }\n\n  const slotName = `header-${col.id}`\n\n  if (slots[slotName]) {\n    return slots[slotName]({\n      column: context.column,\n      context,\n    } as HeaderSlotProps<TData>)\n  }\n\n  return capitalize(col.id.split('-').join(' '))\n}\n\nconst getFooter = <TData extends RowData & object>(\n  col: ColumnDef<TData>,\n  slots: Readonly<Slots>,\n  context: HeaderContext<TData, unknown>,\n) => {\n  if (col.footer) {\n    return col.footer\n  }\n\n  const slotName = `footer-${col.id}`\n\n  if (slots[slotName]) {\n    return slots[slotName]({\n      column: context.column,\n      context,\n    } as FooterSlotProps<TData>)\n  }\n\n  console.log(`footer for ${col.id} is undefined`)\n\n  return undefined\n}\n\nconst getCell = <TData extends RowData & object>(\n  col: ColumnDef<TData>,\n  slots: Readonly<Slots>,\n  context: CellContext<TData, unknown>,\n) => {\n  const slotName = `cell-${col.id}`\n\n  if (slots[slotName]) {\n    return slots[slotName]({\n      row: context.row,\n      context,\n      value: context.getValue(),\n    } as CellSlotProps<TData>)\n  }\n\n  return context.getValue()\n}\n\nexport const processColumns = <TData extends RowData & object>(\n  columnHelper: ColumnHelper<TData>,\n  columns: ColumnDef<TData>[],\n  slots: Readonly<Slots>,\n): TStackColumnDef<TData>[] => {\n  return columns.map((col) => {\n    if (col.type === 'group') {\n      const groupCol = col as GroupColumnDef<TData>\n      return columnHelper.group({\n        id: groupCol.id,\n        header: (context: HeaderContext<TData, unknown>) => getHeader(groupCol, slots, context),\n        footer: (context: HeaderContext<TData, unknown>) => getFooter(groupCol, slots, context),\n        columns: processColumns(columnHelper, groupCol.columns as ColumnDef<TData>[], slots),\n      }) as TStackColumnDef<TData>\n    }\n\n    if (col.type === 'display') {\n      return columnHelper.display({\n        id: col.id,\n        header: (context: HeaderContext<TData, unknown>) => getHeader(col, slots, context),\n        footer: (context: HeaderContext<TData, unknown>) => getFooter(col, slots, context),\n        cell: (context: CellContext<TData, unknown>) => getCell(col, slots, context),\n      }) as TStackColumnDef<TData>\n    }\n\n    // For accessor columns\n    const accessorCol = col as AccessorColumnDef\n    return columnHelper.accessor((row) => row[accessorCol.id as keyof TData], {\n      id: accessorCol.id,\n      header: (context: HeaderContext<TData, unknown>) => getHeader(col, slots, context),\n      footer: (context: HeaderContext<TData, unknown>) => getFooter(col, slots, context),\n      cell: (context: CellContext<TData, unknown>) => getCell(col, slots, context),\n    }) as TStackColumnDef<TData>\n  })\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../src/shared/utils.ts"],"sourcesContent":["import type {\n  ColumnHelper,\n  HeaderContext,\n  CellContext,\n  RowData,\n  ColumnDef as TStackColumnDef,\n  Table,\n  ColumnDef,\n} from '@tanstack/vue-table'\nimport type { Slots } from 'vue'\nimport capitalize from 'lodash.capitalize'\n\nconst getHeader = <TData extends RowData & object>(\n  col: ColumnDef<TData>,\n  slots: Readonly<Slots>,\n  context: HeaderContext<TData, unknown>,\n) => {\n  const columnId = (col as any).accessorKey || col.id || ''\n  const slotName = `header-${columnId}`\n\n  // Check slot first\n  if (slots[slotName]) {\n    return slots[slotName]({\n      column: context.column,\n      context,\n    })\n  }\n\n  // Then use header prop if provided\n  if (col.header) {\n    return col.header\n  }\n\n  // Finally fallback to capitalized id\n  return capitalize(columnId.split('-').join(' '))\n}\n\nconst getFooter = <TData extends RowData & object>(\n  col: ColumnDef<TData>,\n  slots: Readonly<Slots>,\n  context: HeaderContext<TData, unknown>,\n) => {\n  const columnId = (col as any).accessorKey || col.id || ''\n  const slotName = `footer-${columnId}`\n\n  // Check slot first\n  if (slots[slotName]) {\n    return slots[slotName]({\n      column: context.column,\n      context,\n    })\n  }\n\n  // Then use footer prop if provided\n  if (col.footer) {\n    return col.footer\n  }\n\n  return undefined\n}\n\nconst getCell = <TData extends RowData & object>(\n  col: ColumnDef<TData>,\n  slots: Readonly<Slots>,\n  context: CellContext<TData, unknown>,\n) => {\n  const columnId = (col as any).accessorKey || col.id || ''\n  const slotName = `cell-${columnId}`\n\n  // Check slot first\n  if (slots[slotName]) {\n    return slots[slotName]({\n      cell: context.cell,\n      row: context.row,\n      value: context.getValue(),\n    })\n  }\n\n  // Then handle cell value\n  const value = context.getValue()\n  if (col.cell) {\n    return typeof col.cell === 'function' ? col.cell(context) : col.cell\n  }\n  return value !== undefined && value !== null ? value : '-'\n}\n\nexport const processColumns = <TData extends RowData & object>(\n  columnHelper: ColumnHelper<TData>,\n  columns: ColumnDef<TData>[],\n  slots: Readonly<Slots>,\n  table: Table<TData>,\n): TStackColumnDef<TData>[] => {\n  return columns.map((col): TStackColumnDef<TData> => {\n    // Handle group columns by checking if columns property exists\n    if ('columns' in col && Array.isArray(col.columns)) {\n      return columnHelper.group({\n        id: col.id || String(Math.random()),\n        header: (context: HeaderContext<TData, unknown>) => getHeader(col, slots, context),\n        footer: col.footer ? (context: HeaderContext<TData, unknown>) => getFooter(col, slots, context) : undefined,\n        columns: processColumns(columnHelper, col.columns, slots, table),\n        meta: col.meta,\n      })\n    }\n\n    // Handle accessor columns\n    const accessorCol = col as any\n    if (accessorCol.accessorKey) {\n      return columnHelper.accessor(accessorCol.accessorKey, {\n        id: accessorCol.id || accessorCol.accessorKey,\n        header: (context: HeaderContext<TData, unknown>) => getHeader(col, slots, context),\n        footer: col.footer ? (context: HeaderContext<TData, unknown>) => getFooter(col, slots, context) : undefined,\n        cell: (context: CellContext<TData, unknown>) => getCell(col, slots, context),\n        meta: col.meta,\n      })\n    }\n\n    if (accessorCol.accessorFn) {\n      return columnHelper.accessor(accessorCol.accessorFn, {\n        id: accessorCol.id || String(Math.random()),\n        header: (context: HeaderContext<TData, unknown>) => getHeader(col, slots, context),\n        footer: col.footer ? (context: HeaderContext<TData, unknown>) => getFooter(col, slots, context) : undefined,\n        cell: (context: CellContext<TData, unknown>) => getCell(col, slots, context),\n        meta: col.meta,\n      })\n    }\n\n    // Default case - treat as display column\n    return columnHelper.display({\n      id: col.id || String(Math.random()),\n      header: (context: HeaderContext<TData, unknown>) => getHeader(col, slots, context),\n      footer: col.footer ? (context: HeaderContext<TData, unknown>) => getFooter(col, slots, context) : undefined,\n      cell: (context: CellContext<TData, unknown>) => getCell(col, slots, context),\n      meta: col.meta,\n    })\n  })\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tanstack-table-vue",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "homepage": "https://github.com/dacsang97/tanstack-table-vue",
   "repository": {

package/dist/shared/defineColumns.cjs

@@ -1,24 +0,0 @@
-'use strict';
-
-function defineColumns(columns) {
-  return columns.map((col) => {
-    if ("columns" in col) {
-      return {
-        id: col.id,
-        type: "group",
-        header: col.header,
-        footer: col.footer,
-        columns: defineColumns(col.columns)
-      };
-    }
-    return {
-      id: col.id,
-      type: "accessor",
-      header: col.header,
-      footer: col.footer
-    };
-  });
-}
-
-exports.defineColumns = defineColumns;
-//# sourceMappingURL=defineColumns.cjs.map

package/dist/shared/defineColumns.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"defineColumns.cjs","sources":["../../src/shared/defineColumns.ts"],"sourcesContent":["import type { ColumnDef } from './types'\n\ntype ColumnConfig<TData extends object> = {\n  id: keyof TData & string\n  header?: string\n  footer?: string\n}\n\ntype GroupConfig<TData extends object> = {\n  id: string\n  header?: string\n  footer?: string\n  columns: (ColumnConfig<TData> | GroupConfig<TData>)[]\n}\n\nexport function defineColumns<TData extends object>(\n  columns: (ColumnConfig<TData> | GroupConfig<TData>)[],\n): ColumnDef<TData>[] {\n  return columns.map((col): ColumnDef<TData> => {\n    if ('columns' in col) {\n      return {\n        id: col.id,\n        type: 'group',\n        header: col.header,\n        footer: col.footer,\n        columns: defineColumns(col.columns),\n      }\n    }\n\n    return {\n      id: col.id,\n      type: 'accessor',\n      header: col.header,\n      footer: col.footer,\n    }\n  })\n}\n"],"names":[],"mappings":";;AAeO,SAAS,cACd,OACoB,EAAA;AACpB,EAAO,OAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,GAA0B,KAAA;AAC5C,IAAA,IAAI,aAAa,GAAK,EAAA;AACpB,MAAO,OAAA;AAAA,QACL,IAAI,GAAI,CAAA,EAAA;AAAA,QACR,IAAM,EAAA,OAAA;AAAA,QACN,QAAQ,GAAI,CAAA,MAAA;AAAA,QACZ,QAAQ,GAAI,CAAA,MAAA;AAAA,QACZ,OAAA,EAAS,aAAc,CAAA,GAAA,CAAI,OAAO;AAAA,OACpC;AAAA;AAGF,IAAO,OAAA;AAAA,MACL,IAAI,GAAI,CAAA,EAAA;AAAA,MACR,IAAM,EAAA,UAAA;AAAA,MACN,QAAQ,GAAI,CAAA,MAAA;AAAA,MACZ,QAAQ,GAAI,CAAA;AAAA,KACd;AAAA,GACD,CAAA;AACH;;;;"}

package/dist/shared/defineColumns.js

@@ -1,22 +0,0 @@
-function defineColumns(columns) {
-  return columns.map((col) => {
-    if ("columns" in col) {
-      return {
-        id: col.id,
-        type: "group",
-        header: col.header,
-        footer: col.footer,
-        columns: defineColumns(col.columns)
-      };
-    }
-    return {
-      id: col.id,
-      type: "accessor",
-      header: col.header,
-      footer: col.footer
-    };
-  });
-}
-
-export { defineColumns as d };
-//# sourceMappingURL=defineColumns.js.map

package/dist/shared/defineColumns.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"defineColumns.js","sources":["../../src/shared/defineColumns.ts"],"sourcesContent":["import type { ColumnDef } from './types'\n\ntype ColumnConfig<TData extends object> = {\n  id: keyof TData & string\n  header?: string\n  footer?: string\n}\n\ntype GroupConfig<TData extends object> = {\n  id: string\n  header?: string\n  footer?: string\n  columns: (ColumnConfig<TData> | GroupConfig<TData>)[]\n}\n\nexport function defineColumns<TData extends object>(\n  columns: (ColumnConfig<TData> | GroupConfig<TData>)[],\n): ColumnDef<TData>[] {\n  return columns.map((col): ColumnDef<TData> => {\n    if ('columns' in col) {\n      return {\n        id: col.id,\n        type: 'group',\n        header: col.header,\n        footer: col.footer,\n        columns: defineColumns(col.columns),\n      }\n    }\n\n    return {\n      id: col.id,\n      type: 'accessor',\n      header: col.header,\n      footer: col.footer,\n    }\n  })\n}\n"],"names":[],"mappings":"AAeO,SAAS,cACd,OACoB,EAAA;AACpB,EAAO,OAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,GAA0B,KAAA;AAC5C,IAAA,IAAI,aAAa,GAAK,EAAA;AACpB,MAAO,OAAA;AAAA,QACL,IAAI,GAAI,CAAA,EAAA;AAAA,QACR,IAAM,EAAA,OAAA;AAAA,QACN,QAAQ,GAAI,CAAA,MAAA;AAAA,QACZ,QAAQ,GAAI,CAAA,MAAA;AAAA,QACZ,OAAA,EAAS,aAAc,CAAA,GAAA,CAAI,OAAO;AAAA,OACpC;AAAA;AAGF,IAAO,OAAA;AAAA,MACL,IAAI,GAAI,CAAA,EAAA;AAAA,MACR,IAAM,EAAA,UAAA;AAAA,MACN,QAAQ,GAAI,CAAA,MAAA;AAAA,MACZ,QAAQ,GAAI,CAAA;AAAA,KACd;AAAA,GACD,CAAA;AACH;;;;"}