tanstack-table-vue 0.0.6 → 0.0.7

package/README.md

@@ -0,0 +1,92 @@
+# @tanstack-table-vue/core
+
+Core package for TanStack Table Vue integration.
+
+## Overview
+
+This package contains the core functionality for integrating TanStack Table with Vue.js. It provides:
+
+- TSTable component for rendering tables
+- Column processing utilities
+- Type definitions and helpers
+- Slot management system
+
+## Components
+
+### TSTable
+
+The main component that renders the table structure. It accepts:
+
+- `columns`: Column definitions
+- `data`: Table data
+- `tableOptions`: TanStack Table options
+
+```vue
+<TSTable :columns="columns" :data="data" :tableOptions="tableOptions">
+  <!-- Slots for customization -->
+</TSTable>
+```
+
+## Utilities
+
+### Column Processing
+
+The package includes utilities for processing columns and managing slots:
+
+- `processColumns`: Converts column definitions to TanStack Table format
+- `getHeader`, `getCell`, `getFooter`: Slot management functions
+
+### Types
+
+```typescript
+interface TSTableProps<TData extends RowData & object> {
+  columns: ColumnDef<TData>[]
+  data: TData[]
+  tableOptions?: Record<string, any>
+}
+```
+
+## Usage with Slots
+
+The package provides a flexible slot system:
+
+```vue
+<TSTable :columns="columns" :data="data">
+  <!-- Header slot -->
+  <template #header-columnId="{ column }">
+    Custom Header
+  </template>
+
+  <!-- Cell slot -->
+  <template #cell-columnId="{ value, row }">
+    Custom Cell
+  </template>
+
+  <!-- Footer slot -->
+  <template #footer-columnId="{ column }">
+    Custom Footer
+  </template>
+</TSTable>
+```
+
+## Internal Architecture
+
+The package uses a slot-based system instead of render functions, making it more Vue-idiomatic. Key features:
+
+- Automatic header generation from accessorKey
+- Flexible slot naming based on column IDs
+- Support for nested column groups
+- Integration with TanStack Table's sorting, filtering, and other features
+
+## Contributing
+
+When contributing to this package, please:
+
+1. Maintain type safety
+2. Follow Vue.js best practices
+3. Update tests for any new functionality
+4. Document any public APIs
+
+## License
+
+MIT

package/dist/components/TSTable.cjs.map

@@ -1 +1 @@
-{"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;;;;;;;;;"}
+{"version":3,"file":"TSTable.cjs","sources":["../../src/components/TSTable.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ColumnDef, RowData, Table } from '@tanstack/vue-table'\nimport type { CellSlotProps, FooterSlotProps, HeaderSlotProps } from '../shared/types'\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: HeaderSlotProps<TData>) => any;\n  [key: `cell-${string}`]: (props: CellSlotProps<TData>) => any;\n  [key: `footer-${string}`]: (props: FooterSlotProps<TData>) => any;\n}>()\n</script>\n\n<template>\n  <slot :table=\"table\" />\n</template>"],"names":["useSlots","createColumnHelper","computed","useVueTable","getCoreRowModel","processColumns"],"mappings":";;;;;;;;;;;;;;;AAgBA,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.map

@@ -1 +1 @@
-{"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;;;;;;;;;"}
+{"version":3,"file":"TSTable.js","sources":["../../src/components/TSTable.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ColumnDef, RowData, Table } from '@tanstack/vue-table'\nimport type { CellSlotProps, FooterSlotProps, HeaderSlotProps } from '../shared/types'\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: HeaderSlotProps<TData>) => any;\n  [key: `cell-${string}`]: (props: CellSlotProps<TData>) => any;\n  [key: `footer-${string}`]: (props: FooterSlotProps<TData>) => any;\n}>()\n</script>\n\n<template>\n  <slot :table=\"table\" />\n</template>"],"names":[],"mappings":";;;;;;;;;;;;;AAgBA,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.d.ts

@@ -1,8 +1,12 @@
 import { AllowedComponentProps } from 'vue';
+import { CellContext } from '@tanstack/vue-table';
+import { Column } 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';
@@ -14,6 +18,22 @@ declare type __VLS_PrettifyLocal<T> = {
     [K in keyof T]: T[K];
 } & {};
 
+export declare interface CellSlotProps<TData extends RowData> {
+    row: Row<TData>;
+    context: CellContext<TData, unknown>;
+    value: any;
+}
+
+export declare interface FooterSlotProps<TData extends RowData> {
+    column: Column<TData>;
+    context: HeaderContext<TData, unknown>;
+}
+
+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>, table: Table<TData>) => ColumnDef<TData>[];
 
 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<{
@@ -21,16 +41,16 @@ export declare const TSTable: <TData extends RowData & object>(__VLS_props: NonN
     expose(exposed: ShallowUnwrapRef<    {}>): void;
     attrs: any;
     slots: Readonly<{
-        [key: `header-${string}`]: (props: any) => any;
-        [key: `cell-${string}`]: (props: any) => any;
-        [key: `footer-${string}`]: (props: any) => any;
+        [key: `header-${string}`]: (props: HeaderSlotProps<TData>) => any;
+        [key: `cell-${string}`]: (props: CellSlotProps<TData>) => any;
+        [key: `footer-${string}`]: (props: FooterSlotProps<TData>) => any;
         default: (props: {
             table: Table<TData>;
         }) => any;
     }> & {
-        [key: `header-${string}`]: (props: any) => any;
-        [key: `cell-${string}`]: (props: any) => any;
-        [key: `footer-${string}`]: (props: any) => any;
+        [key: `header-${string}`]: (props: HeaderSlotProps<TData>) => any;
+        [key: `cell-${string}`]: (props: CellSlotProps<TData>) => any;
+        [key: `footer-${string}`]: (props: FooterSlotProps<TData>) => any;
         default: (props: {
             table: Table<TData>;
         }) => any;

package/package.json

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