tanstack-table-vue 0.0.8 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,92 +1,121 @@
1
- # @tanstack-table-vue/core
1
+ # tanstack-table-vue
2
2
 
3
- Core package for TanStack Table Vue integration.
3
+ Vue 3 wrapper for TanStack Table with slot-based rendering and headless composables.
4
4
 
5
- ## Overview
5
+ ## Installation
6
6
 
7
- This package contains the core functionality for integrating TanStack Table with Vue.js. It provides:
7
+ ```bash
8
+ pnpm add tanstack-table-vue
9
+ ```
8
10
 
9
- - TSTable component for rendering tables
10
- - Column processing utilities
11
- - Type definitions and helpers
12
- - Slot management system
11
+ ## Core `TSTable` Component
13
12
 
14
- ## Components
13
+ ```vue
14
+ <script setup lang="ts">
15
+ import { TSTable } from 'tanstack-table-vue'
16
+ import type { ColumnDef } from '@tanstack/vue-table'
15
17
 
16
- ### TSTable
18
+ interface User {
19
+ name: string
20
+ age: number
21
+ }
17
22
 
18
- The main component that renders the table structure. It accepts:
23
+ const columns: ColumnDef<User, any>[] = [{ accessorKey: 'name' }, { accessorKey: 'age' }]
24
+ const data: User[] = [{ name: 'Alice', age: 30 }]
25
+ </script>
19
26
 
20
- - `columns`: Column definitions
21
- - `data`: Table data
22
- - `tableOptions`: TanStack Table options
27
+ <template>
28
+ <TSTable :columns="columns" :data="data" v-slot="{ table }">
29
+ <!-- render table using the table instance -->
30
+ </TSTable>
31
+ </template>
32
+ ```
23
33
 
24
- ```vue
25
- <TSTable :columns="columns" :data="data" :tableOptions="tableOptions">
26
- <!-- Slots for customization -->
27
- </TSTable>
34
+ ### Slots
35
+
36
+ - `#header-{columnId}` custom header: `{ column, context }`
37
+ - `#cell-{columnId}` — custom cell: `{ row, value, context }`
38
+ - `#footer-{columnId}` — custom footer: `{ column, context }`
39
+
40
+ ### Typed Column Meta
41
+
42
+ Column `meta` is typed via `TSTableColumnMeta`:
43
+
44
+ ```ts
45
+ const columns: ColumnDef<User, any>[] = [
46
+ {
47
+ accessorKey: 'name',
48
+ meta: { size: 200, enableSorting: true, headerClass: 'font-bold' },
49
+ },
50
+ ]
28
51
  ```
29
52
 
30
- ## Utilities
53
+ Available meta fields: `size`, `style`, `enableSorting`, `headerClass`, `cellClass`.
31
54
 
32
- ### Column Processing
55
+ ## Plugins — Headless Composables
33
56
 
34
- The package includes utilities for processing columns and managing slots:
57
+ Import from the `tanstack-table-vue/plugins` subpath:
35
58
 
36
- - `processColumns`: Converts column definitions to TanStack Table format
37
- - `getHeader`, `getCell`, `getFooter`: Slot management functions
59
+ ```ts
60
+ import { usePaginationState, useTableSorting, useTableSelection } from 'tanstack-table-vue/plugins'
61
+ ```
38
62
 
39
- ### Types
63
+ ### `usePaginationState(options?)`
40
64
 
41
- ```typescript
42
- interface TSTableProps<TData extends RowData & object> {
43
- columns: ColumnDef<TData>[]
44
- data: TData[]
45
- tableOptions?: Record<string, any>
46
- }
65
+ Manages 1-based page state and provides TanStack-compatible pagination options.
66
+
67
+ ```ts
68
+ const { page, pageSize, paginationState, paginationOptions, setPage, setPageSize, resetPagination } =
69
+ usePaginationState({ defaultPage: 1, defaultPageSize: 10 })
47
70
  ```
48
71
 
49
- ## Usage with Slots
72
+ Spread `paginationOptions.value` into your `tableOptions` prop.
50
73
 
51
- The package provides a flexible slot system:
74
+ ### `useTableSorting(defaultSorting?)`
52
75
 
53
- ```vue
54
- <TSTable :columns="columns" :data="data">
55
- <!-- Header slot -->
56
- <template #header-columnId="{ column }">
57
- Custom Header
58
- </template>
59
-
60
- <!-- Cell slot -->
61
- <template #cell-columnId="{ value, row }">
62
- Custom Cell
63
- </template>
64
-
65
- <!-- Footer slot -->
66
- <template #footer-columnId="{ column }">
67
- Custom Footer
68
- </template>
69
- </TSTable>
76
+ Manages sorting state with a pre-configured sorted row model.
77
+
78
+ ```ts
79
+ const { sorting, sortingOptions, clearSorting } = useTableSorting([{ id: 'name', desc: false }])
80
+ ```
81
+
82
+ ### `useTableSelection()`
83
+
84
+ Manages row selection state.
85
+
86
+ ```ts
87
+ const { rowSelection, selectionOptions, selectedCount, clearSelection } = useTableSelection()
70
88
  ```
71
89
 
72
- ## Internal Architecture
90
+ ### Combining Plugins
73
91
 
74
- The package uses a slot-based system instead of render functions, making it more Vue-idiomatic. Key features:
92
+ ```ts
93
+ const { paginationOptions } = usePaginationState()
94
+ const { sortingOptions } = useTableSorting()
95
+ const { selectionOptions } = useTableSelection()
75
96
 
76
- - Automatic header generation from accessorKey
77
- - Flexible slot naming based on column IDs
78
- - Support for nested column groups
79
- - Integration with TanStack Table's sorting, filtering, and other features
97
+ const tableOptions = computed(() => ({
98
+ ...paginationOptions.value,
99
+ ...sortingOptions.value,
100
+ ...selectionOptions.value,
101
+ }))
102
+ ```
80
103
 
81
- ## Contributing
104
+ ```vue
105
+ <TSTable :columns="columns" :data="data" :tableOptions="tableOptions" v-slot="{ table }">
106
+ <!-- render -->
107
+ </TSTable>
108
+ ```
82
109
 
83
- When contributing to this package, please:
110
+ ## Utilities
111
+
112
+ ```ts
113
+ import { valueUpdater, processColumns } from 'tanstack-table-vue'
114
+ ```
84
115
 
85
- 1. Maintain type safety
86
- 2. Follow Vue.js best practices
87
- 3. Update tests for any new functionality
88
- 4. Document any public APIs
116
+ - `valueUpdater(updaterOrValue, ref)` — apply TanStack updater functions to Vue refs
117
+ - `processColumns(columnHelper, columns, slots)` — process column definitions with slot integration
89
118
 
90
119
  ## License
91
120
 
92
- MIT
121
+ MIT
@@ -0,0 +1,60 @@
1
+ import * as vue8 from "vue";
2
+ import { Ref, Slots } from "vue";
3
+ import { CellContext, Column, ColumnDef, ColumnHelper, HeaderContext, Row, RowData, Table, TableOptionsWithReactiveData, Updater } from "@tanstack/vue-table";
4
+
5
+ //#region src/shared/types.d.ts
6
+ interface HeaderSlotProps<TData extends RowData> {
7
+ column: Column<TData, any>;
8
+ context: HeaderContext<TData, any>;
9
+ }
10
+ interface CellSlotProps<TData extends RowData> {
11
+ row: Row<TData>;
12
+ context: CellContext<TData, any>;
13
+ value: any;
14
+ }
15
+ interface FooterSlotProps<TData extends RowData> {
16
+ column: Column<TData, any>;
17
+ context: HeaderContext<TData, any>;
18
+ }
19
+ interface TSTableColumnMeta {
20
+ size?: number;
21
+ style?: Record<string, string>;
22
+ enableSorting?: boolean;
23
+ headerClass?: string;
24
+ cellClass?: string;
25
+ }
26
+ declare module '@tanstack/vue-table' {
27
+ interface ColumnMeta<TData extends RowData, TValue> extends TSTableColumnMeta {}
28
+ }
29
+ //#endregion
30
+ //#region src/components/TSTable.vue.d.ts
31
+ type TableOptions = Omit<TableOptionsWithReactiveData<any>, 'columns' | 'data' | 'getCoreRowModel'>;
32
+ interface TSTableProps<TData extends RowData & object> {
33
+ columns: ColumnDef<TData, any>[];
34
+ data: TData[];
35
+ tableOptions?: TableOptions;
36
+ }
37
+ declare const _default: <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<{
38
+ props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & vue8.VNodeProps & vue8.AllowedComponentProps & vue8.ComponentCustomProps, never>, never> & TSTableProps<TData> & Partial<{}>> & vue8.PublicProps;
39
+ expose(exposed: vue8.ShallowUnwrapRef<{}>): void;
40
+ attrs: any;
41
+ slots: {
42
+ [key: `header-${string}`]: (props: HeaderSlotProps<TData>) => any;
43
+ [key: `cell-${string}`]: (props: CellSlotProps<TData>) => any;
44
+ [key: `footer-${string}`]: (props: FooterSlotProps<TData>) => any;
45
+ default: (props: {
46
+ table: Table<TData>;
47
+ }) => any;
48
+ };
49
+ emit: {};
50
+ }>) => vue8.VNode & {
51
+ __ctx?: Awaited<typeof __VLS_setup>;
52
+ };
53
+ type __VLS_PrettifyLocal<T> = { [K in keyof T]: T[K] } & {};
54
+ //#endregion
55
+ //#region src/shared/utils.d.ts
56
+ /** Helper to apply TanStack Table updater functions to Vue refs */
57
+ declare function valueUpdater<T>(updaterOrValue: Updater<T>, ref: Ref<T>): void;
58
+ declare const processColumns: <TData extends RowData & object>(columnHelper: ColumnHelper<TData>, columns: ColumnDef<TData, any>[], slots: Readonly<Slots>) => ColumnDef<TData, any>[];
59
+ //#endregion
60
+ export { type CellSlotProps, type FooterSlotProps, type HeaderSlotProps, _default as TSTable, type TSTableColumnMeta, type TSTableProps, type TableOptions, processColumns, valueUpdater };
package/dist/index.mjs ADDED
@@ -0,0 +1,46 @@
1
+ import { n as valueUpdater, t as processColumns } from "./utils-BGsLZVAI.mjs";
2
+ import { computed, defineComponent, renderSlot, unref, useSlots, watch } from "vue";
3
+ import { createColumnHelper, getCoreRowModel, useVueTable } from "@tanstack/vue-table";
4
+
5
+ //#region src/components/TSTable.vue
6
+ const _sfc_main = /* @__PURE__ */ defineComponent({
7
+ __name: "TSTable",
8
+ props: {
9
+ columns: {},
10
+ data: {},
11
+ tableOptions: {}
12
+ },
13
+ setup(__props) {
14
+ const props = __props;
15
+ const slots = useSlots();
16
+ const columnHelper = createColumnHelper();
17
+ const processedColumns = computed(() => {
18
+ return processColumns(columnHelper, props.columns, slots);
19
+ });
20
+ const table = useVueTable({
21
+ columns: processedColumns.value,
22
+ data: props.data,
23
+ getCoreRowModel: getCoreRowModel(),
24
+ ...props.tableOptions
25
+ });
26
+ watch(() => props.data, (newData) => {
27
+ table.setOptions((old) => ({
28
+ ...old,
29
+ data: newData
30
+ }));
31
+ }, { flush: "sync" });
32
+ watch(processedColumns, (newColumns) => {
33
+ table.setOptions((old) => ({
34
+ ...old,
35
+ columns: newColumns
36
+ }));
37
+ }, { flush: "sync" });
38
+ return (_ctx, _cache) => {
39
+ return renderSlot(_ctx.$slots, "default", { table: unref(table) });
40
+ };
41
+ }
42
+ });
43
+ var TSTable_default = _sfc_main;
44
+
45
+ //#endregion
46
+ export { TSTable_default as TSTable, processColumns, valueUpdater };
@@ -0,0 +1,61 @@
1
+ import * as vue4 from "vue";
2
+ import * as _tanstack_vue_table1 from "@tanstack/vue-table";
3
+ import { PaginationState, RowSelectionState, SortingState } from "@tanstack/vue-table";
4
+
5
+ //#region src/plugins/use-pagination-state.d.ts
6
+ declare function usePaginationState(options?: {
7
+ defaultPage?: number;
8
+ defaultPageSize?: number;
9
+ }): {
10
+ page: vue4.Ref<number, number>;
11
+ pageSize: vue4.Ref<number, number>;
12
+ paginationState: vue4.ComputedRef<PaginationState>;
13
+ paginationOptions: vue4.ComputedRef<{
14
+ getPaginationRowModel: (table: _tanstack_vue_table1.Table<unknown>) => () => _tanstack_vue_table1.RowModel<unknown>;
15
+ onPaginationChange: (updater: any) => void;
16
+ state: {
17
+ readonly pagination: PaginationState;
18
+ };
19
+ }>;
20
+ setPage: (p: number) => void;
21
+ setPageSize: (s: number) => void;
22
+ resetPagination: () => void;
23
+ };
24
+ //#endregion
25
+ //#region src/plugins/use-table-sorting.d.ts
26
+ declare function useTableSorting(defaultSorting?: SortingState): {
27
+ sorting: vue4.Ref<{
28
+ desc: boolean;
29
+ id: string;
30
+ }[], SortingState | {
31
+ desc: boolean;
32
+ id: string;
33
+ }[]>;
34
+ sortingOptions: vue4.ComputedRef<{
35
+ getSortedRowModel: (table: _tanstack_vue_table1.Table<unknown>) => () => _tanstack_vue_table1.RowModel<unknown>;
36
+ onSortingChange: (updater: any) => void;
37
+ state: {
38
+ readonly sorting: {
39
+ desc: boolean;
40
+ id: string;
41
+ }[];
42
+ };
43
+ }>;
44
+ clearSorting: () => void;
45
+ };
46
+ //#endregion
47
+ //#region src/plugins/use-table-selection.d.ts
48
+ declare function useTableSelection(): {
49
+ rowSelection: vue4.Ref<RowSelectionState, RowSelectionState>;
50
+ selectionOptions: vue4.ComputedRef<{
51
+ enableRowSelection: boolean;
52
+ onRowSelectionChange: (updater: any) => void;
53
+ state: {
54
+ readonly rowSelection: RowSelectionState;
55
+ };
56
+ }>;
57
+ selectedCount: vue4.ComputedRef<number>;
58
+ clearSelection: () => void;
59
+ };
60
+ //#endregion
61
+ export { usePaginationState, useTableSelection, useTableSorting };
@@ -0,0 +1,91 @@
1
+ import { n as valueUpdater } from "../utils-BGsLZVAI.mjs";
2
+ import { computed, ref } from "vue";
3
+ import { getPaginationRowModel, getSortedRowModel } from "@tanstack/vue-table";
4
+
5
+ //#region src/plugins/use-pagination-state.ts
6
+ function usePaginationState(options) {
7
+ const page = ref(options?.defaultPage ?? 1);
8
+ const pageSize = ref(options?.defaultPageSize ?? 10);
9
+ const paginationState = computed(() => ({
10
+ pageIndex: page.value - 1,
11
+ pageSize: pageSize.value
12
+ }));
13
+ const paginationOptions = computed(() => ({
14
+ getPaginationRowModel: getPaginationRowModel(),
15
+ onPaginationChange: (updater) => {
16
+ const newState = typeof updater === "function" ? updater(paginationState.value) : updater;
17
+ page.value = newState.pageIndex + 1;
18
+ pageSize.value = newState.pageSize;
19
+ },
20
+ state: { get pagination() {
21
+ return paginationState.value;
22
+ } }
23
+ }));
24
+ const setPage = (p) => {
25
+ page.value = p;
26
+ };
27
+ const setPageSize = (s) => {
28
+ pageSize.value = s;
29
+ page.value = 1;
30
+ };
31
+ const resetPagination = () => {
32
+ page.value = options?.defaultPage ?? 1;
33
+ pageSize.value = options?.defaultPageSize ?? 10;
34
+ };
35
+ return {
36
+ page,
37
+ pageSize,
38
+ paginationState,
39
+ paginationOptions,
40
+ setPage,
41
+ setPageSize,
42
+ resetPagination
43
+ };
44
+ }
45
+
46
+ //#endregion
47
+ //#region src/plugins/use-table-sorting.ts
48
+ function useTableSorting(defaultSorting) {
49
+ const sorting = ref(defaultSorting ?? []);
50
+ const sortingOptions = computed(() => ({
51
+ getSortedRowModel: getSortedRowModel(),
52
+ onSortingChange: (updater) => valueUpdater(updater, sorting),
53
+ state: { get sorting() {
54
+ return sorting.value;
55
+ } }
56
+ }));
57
+ const clearSorting = () => {
58
+ sorting.value = [];
59
+ };
60
+ return {
61
+ sorting,
62
+ sortingOptions,
63
+ clearSorting
64
+ };
65
+ }
66
+
67
+ //#endregion
68
+ //#region src/plugins/use-table-selection.ts
69
+ function useTableSelection() {
70
+ const rowSelection = ref({});
71
+ const selectionOptions = computed(() => ({
72
+ enableRowSelection: true,
73
+ onRowSelectionChange: (updater) => valueUpdater(updater, rowSelection),
74
+ state: { get rowSelection() {
75
+ return rowSelection.value;
76
+ } }
77
+ }));
78
+ const selectedCount = computed(() => Object.values(rowSelection.value).filter(Boolean).length);
79
+ const clearSelection = () => {
80
+ rowSelection.value = {};
81
+ };
82
+ return {
83
+ rowSelection,
84
+ selectionOptions,
85
+ selectedCount,
86
+ clearSelection
87
+ };
88
+ }
89
+
90
+ //#endregion
91
+ export { usePaginationState, useTableSelection, useTableSorting };
@@ -0,0 +1,72 @@
1
+ import capitalize from "lodash.capitalize";
2
+
3
+ //#region src/shared/utils.ts
4
+ /** Helper to apply TanStack Table updater functions to Vue refs */
5
+ function valueUpdater(updaterOrValue, ref) {
6
+ ref.value = typeof updaterOrValue === "function" ? updaterOrValue(ref.value) : updaterOrValue;
7
+ }
8
+ const getHeader = (col, slots, context) => {
9
+ const columnId = col.accessorKey || col.id || "";
10
+ const slotName = `header-${columnId}`;
11
+ if (slots[slotName]) return slots[slotName]({
12
+ column: context.column,
13
+ context
14
+ });
15
+ if (col.header) return col.header;
16
+ return capitalize(columnId.split("-").join(" "));
17
+ };
18
+ const getFooter = (col, slots, context) => {
19
+ const slotName = `footer-${col.accessorKey || col.id || ""}`;
20
+ if (slots[slotName]) return slots[slotName]({
21
+ column: context.column,
22
+ context
23
+ });
24
+ if (col.footer) return col.footer;
25
+ };
26
+ const getCell = (col, slots, context) => {
27
+ const slotName = `cell-${col.accessorKey || col.id || ""}`;
28
+ if (slots[slotName]) return slots[slotName]({
29
+ cell: context.cell,
30
+ row: context.row,
31
+ value: context.getValue()
32
+ });
33
+ const value = context.getValue();
34
+ if (col.cell) return typeof col.cell === "function" ? col.cell(context) : col.cell;
35
+ return value !== void 0 && value !== null ? value : "-";
36
+ };
37
+ const processColumns = (columnHelper, columns, slots) => {
38
+ return columns.map((col) => {
39
+ if ("columns" in col && Array.isArray(col.columns)) return columnHelper.group({
40
+ id: col.id || String(Math.random()),
41
+ header: (context) => getHeader(col, slots, context),
42
+ footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
43
+ columns: processColumns(columnHelper, col.columns, slots),
44
+ meta: col.meta
45
+ });
46
+ const accessorCol = col;
47
+ if (accessorCol.accessorKey) return columnHelper.accessor(accessorCol.accessorKey, {
48
+ id: accessorCol.id || accessorCol.accessorKey,
49
+ header: (context) => getHeader(col, slots, context),
50
+ footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
51
+ cell: (context) => getCell(col, slots, context),
52
+ meta: col.meta
53
+ });
54
+ if (accessorCol.accessorFn) return columnHelper.accessor(accessorCol.accessorFn, {
55
+ id: accessorCol.id || String(Math.random()),
56
+ header: (context) => getHeader(col, slots, context),
57
+ footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
58
+ cell: (context) => getCell(col, slots, context),
59
+ meta: col.meta
60
+ });
61
+ return columnHelper.display({
62
+ id: col.id || String(Math.random()),
63
+ header: (context) => getHeader(col, slots, context),
64
+ footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
65
+ cell: (context) => getCell(col, slots, context),
66
+ meta: col.meta
67
+ });
68
+ });
69
+ };
70
+
71
+ //#endregion
72
+ export { valueUpdater as n, processColumns as t };
package/package.json CHANGED
@@ -1,32 +1,33 @@
1
1
  {
2
2
  "name": "tanstack-table-vue",
3
- "version": "0.0.8",
4
- "type": "module",
3
+ "version": "0.1.0",
5
4
  "homepage": "https://github.com/dacsang97/tanstack-table-vue",
6
- "repository": {
7
- "type": "git",
8
- "url": "https://github.com/dacsang97/tanstack-table-vue.git"
9
- },
10
5
  "bugs": {
11
6
  "url": "https://github.com/dacsang97/tanstack-table-vue/issues"
12
7
  },
13
8
  "license": "MIT",
14
- "exports": {
15
- ".": {
16
- "types": "./dist/index.d.ts",
17
- "import": "./dist/index.js",
18
- "require": "./dist/index.cjs"
19
- }
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "https://github.com/dacsang97/tanstack-table-vue.git"
20
12
  },
21
13
  "files": [
22
14
  "./dist"
23
15
  ],
24
- "main": "./dist/index.cjs",
25
- "module": "./dist/index.js",
26
- "types": "./dist/index.d.ts",
27
- "typings": "./dist/index.d.ts",
16
+ "type": "module",
17
+ "main": "./dist/index.mjs",
18
+ "types": "./dist/index.d.mts",
19
+ "exports": {
20
+ ".": {
21
+ "types": "./dist/index.d.mts",
22
+ "import": "./dist/index.mjs"
23
+ },
24
+ "./plugins": {
25
+ "types": "./dist/plugins/index.d.mts",
26
+ "import": "./dist/plugins/index.mjs"
27
+ }
28
+ },
28
29
  "dependencies": {
29
- "@tanstack/vue-table": "^8.21.2",
30
+ "@tanstack/vue-table": "^8.21.3",
30
31
  "lodash.capitalize": "^4.2.1",
31
32
  "vue": "^3.5.13"
32
33
  },
@@ -34,18 +35,21 @@
34
35
  "@types/lodash.capitalize": "^4.2.9",
35
36
  "@types/node": "^22.14.0",
36
37
  "@vitejs/plugin-vue": "^5.2.1",
37
- "@vue/tsconfig": "^0.7.0",
38
- "typescript": "~5.7.2",
39
- "vite": "^6.2.0",
40
- "vite-plugin-dts": "^4.5.3",
38
+ "@vue/test-utils": "latest",
39
+ "@vue/tsconfig": "^0.8.1",
40
+ "happy-dom": "latest",
41
+ "tsdown": "^0.20.0-beta.3",
42
+ "typescript": "~5.8.0",
43
+ "unplugin-vue": "latest",
44
+ "vitest": "latest",
41
45
  "vue-tsc": "^2.2.4"
42
46
  },
43
47
  "scripts": {
44
- "build": "pnpm type-check && pnpm build-only",
45
- "build-only": "vite build",
46
- "watch": "vite build --watch",
47
- "type-check": "vue-tsc -p tsconfig.check.json --noEmit",
48
- "type-gen": "vue-tsc --declaration --emitDeclarationOnly",
48
+ "build": "tsdown",
49
+ "dev": "tsdown --watch",
50
+ "test": "vitest run",
51
+ "test:watch": "vitest",
52
+ "type-check": "vue-tsc --noEmit",
49
53
  "pub:release": "pnpm publish --no-git-checks --access public"
50
54
  }
51
55
  }
@@ -1,42 +0,0 @@
1
- 'use strict';
2
-
3
- require('lodash.capitalize');
4
- const vue = require('vue');
5
- const vueTable = require('@tanstack/vue-table');
6
- const shared_utils = require('../shared/utils.cjs');
7
-
8
- const _sfc_main = /* @__PURE__ */ vue.defineComponent({
9
- __name: "TSTable",
10
- props: {
11
- columns: {},
12
- data: {},
13
- tableOptions: {}
14
- },
15
- setup(__props) {
16
- const props = __props;
17
- const slots = vue.useSlots();
18
- const columnHelper = vueTable.createColumnHelper();
19
- const processedColumns = vue.computed(() => {
20
- vueTable.useVueTable({
21
- columns: props.columns,
22
- data: props.data,
23
- getCoreRowModel: vueTable.getCoreRowModel(),
24
- ...props.tableOptions
25
- });
26
- return shared_utils.processColumns(columnHelper, props.columns, slots);
27
- });
28
- const tableOptions = {
29
- columns: processedColumns.value,
30
- data: props.data,
31
- getCoreRowModel: vueTable.getCoreRowModel(),
32
- ...props.tableOptions
33
- };
34
- const table = vueTable.useVueTable(tableOptions);
35
- return (_ctx, _cache) => {
36
- return vue.renderSlot(_ctx.$slots, "default", { table: vue.unref(table) });
37
- };
38
- }
39
- });
40
-
41
- exports._sfc_main = _sfc_main;
42
- //# sourceMappingURL=TSTable.cjs.map
@@ -1 +0,0 @@
1
- {"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, any>[]\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 TStackColumnDef<TData, any>[],\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;;;;;;;;;"}
@@ -1,40 +0,0 @@
1
- import 'lodash.capitalize';
2
- import { defineComponent, useSlots, computed, renderSlot, unref } from 'vue';
3
- import { createColumnHelper, useVueTable, getCoreRowModel } from '@tanstack/vue-table';
4
- import { p as processColumns } from '../shared/utils.js';
5
-
6
- const _sfc_main = /* @__PURE__ */ defineComponent({
7
- __name: "TSTable",
8
- props: {
9
- columns: {},
10
- data: {},
11
- tableOptions: {}
12
- },
13
- setup(__props) {
14
- const props = __props;
15
- const slots = useSlots();
16
- const columnHelper = createColumnHelper();
17
- const processedColumns = computed(() => {
18
- useVueTable({
19
- columns: props.columns,
20
- data: props.data,
21
- getCoreRowModel: getCoreRowModel(),
22
- ...props.tableOptions
23
- });
24
- return processColumns(columnHelper, props.columns, slots);
25
- });
26
- const tableOptions = {
27
- columns: processedColumns.value,
28
- data: props.data,
29
- getCoreRowModel: getCoreRowModel(),
30
- ...props.tableOptions
31
- };
32
- const table = useVueTable(tableOptions);
33
- return (_ctx, _cache) => {
34
- return renderSlot(_ctx.$slots, "default", { table: unref(table) });
35
- };
36
- }
37
- });
38
-
39
- export { _sfc_main as _ };
40
- //# sourceMappingURL=TSTable.js.map
@@ -1 +0,0 @@
1
- {"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, any>[]\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 TStackColumnDef<TData, any>[],\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.cjs DELETED
@@ -1,12 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
-
5
- const components_TSTable = require('./components/TSTable.cjs');
6
- const shared_utils = require('./shared/utils.cjs');
7
-
8
-
9
-
10
- exports.TSTable = components_TSTable._sfc_main;
11
- exports.processColumns = shared_utils.processColumns;
12
- //# sourceMappingURL=index.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
package/dist/index.d.ts DELETED
@@ -1,69 +0,0 @@
1
- import { AllowedComponentProps } from 'vue';
2
- import { CellContext } from '@tanstack/vue-table';
3
- import { Column } from '@tanstack/vue-table';
4
- import { ColumnDef } from '@tanstack/vue-table';
5
- import { ColumnHelper } from '@tanstack/vue-table';
6
- import { ComponentCustomProps } from 'vue';
7
- import { HeaderContext } from '@tanstack/vue-table';
8
- import { PublicProps } from 'vue';
9
- import { Row } from '@tanstack/vue-table';
10
- import { RowData } from '@tanstack/vue-table';
11
- import { ShallowUnwrapRef } from 'vue';
12
- import { Slots } from 'vue';
13
- import { Table } from '@tanstack/vue-table';
14
- import { VNode } from 'vue';
15
- import { VNodeProps } from 'vue';
16
-
17
- declare type __VLS_PrettifyLocal<T> = {
18
- [K in keyof T]: T[K];
19
- } & {};
20
-
21
- export declare interface CellSlotProps<TData extends RowData> {
22
- row: Row<TData>;
23
- context: CellContext<TData, any>;
24
- value: any;
25
- }
26
-
27
- export declare interface FooterSlotProps<TData extends RowData> {
28
- column: Column<TData, any>;
29
- context: HeaderContext<TData, any>;
30
- }
31
-
32
- export declare interface HeaderSlotProps<TData extends RowData> {
33
- column: Column<TData, any>;
34
- context: HeaderContext<TData, any>;
35
- }
36
-
37
- export declare const processColumns: <TData extends RowData & object>(columnHelper: ColumnHelper<TData>, columns: ColumnDef<TData, any>[], slots: Readonly<Slots>, table: Table<TData>) => ColumnDef<TData, any>[];
38
-
39
- 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<{
40
- props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, never> & TSTableProps<TData> & Partial<{}>> & PublicProps;
41
- expose(exposed: ShallowUnwrapRef< {}>): void;
42
- attrs: any;
43
- slots: Readonly<{
44
- [key: `header-${string}`]: (props: HeaderSlotProps<TData>) => any;
45
- [key: `cell-${string}`]: (props: CellSlotProps<TData>) => any;
46
- [key: `footer-${string}`]: (props: FooterSlotProps<TData>) => any;
47
- default: (props: {
48
- table: Table<TData>;
49
- }) => any;
50
- }> & {
51
- [key: `header-${string}`]: (props: HeaderSlotProps<TData>) => any;
52
- [key: `cell-${string}`]: (props: CellSlotProps<TData>) => any;
53
- [key: `footer-${string}`]: (props: FooterSlotProps<TData>) => any;
54
- default: (props: {
55
- table: Table<TData>;
56
- }) => any;
57
- };
58
- emit: {};
59
- }>) => VNode & {
60
- __ctx?: Awaited<typeof __VLS_setup>;
61
- };
62
-
63
- export declare interface TSTableProps<TData extends RowData & object> {
64
- columns: ColumnDef<TData, any>[];
65
- data: TData[];
66
- tableOptions?: Record<string, any>;
67
- }
68
-
69
- export { }
package/dist/index.js DELETED
@@ -1,3 +0,0 @@
1
- export { _ as TSTable } from './components/TSTable.js';
2
- export { p as processColumns } from './shared/utils.js';
3
- //# sourceMappingURL=index.js.map
package/dist/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -1,90 +0,0 @@
1
- 'use strict';
2
-
3
- const capitalize = require('lodash.capitalize');
4
-
5
- const getHeader = (col, slots, context) => {
6
- const columnId = col.accessorKey || col.id || "";
7
- const slotName = `header-${columnId}`;
8
- if (slots[slotName]) {
9
- return slots[slotName]({
10
- column: context.column,
11
- context
12
- });
13
- }
14
- if (col.header) {
15
- return col.header;
16
- }
17
- return capitalize(columnId.split("-").join(" "));
18
- };
19
- const getFooter = (col, slots, context) => {
20
- const columnId = col.accessorKey || col.id || "";
21
- const slotName = `footer-${columnId}`;
22
- if (slots[slotName]) {
23
- return slots[slotName]({
24
- column: context.column,
25
- context
26
- });
27
- }
28
- if (col.footer) {
29
- return col.footer;
30
- }
31
- return void 0;
32
- };
33
- const getCell = (col, slots, context) => {
34
- const columnId = col.accessorKey || col.id || "";
35
- const slotName = `cell-${columnId}`;
36
- if (slots[slotName]) {
37
- return slots[slotName]({
38
- cell: context.cell,
39
- row: context.row,
40
- value: context.getValue()
41
- });
42
- }
43
- const value = context.getValue();
44
- if (col.cell) {
45
- return typeof col.cell === "function" ? col.cell(context) : col.cell;
46
- }
47
- return value !== void 0 && value !== null ? value : "-";
48
- };
49
- const processColumns = (columnHelper, columns, slots, table) => {
50
- return columns.map((col) => {
51
- if ("columns" in col && Array.isArray(col.columns)) {
52
- return columnHelper.group({
53
- id: col.id || String(Math.random()),
54
- header: (context) => getHeader(col, slots, context),
55
- footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
56
- columns: processColumns(columnHelper, col.columns, slots),
57
- meta: col.meta
58
- });
59
- }
60
- const accessorCol = col;
61
- if (accessorCol.accessorKey) {
62
- return columnHelper.accessor(accessorCol.accessorKey, {
63
- id: accessorCol.id || accessorCol.accessorKey,
64
- header: (context) => getHeader(col, slots, context),
65
- footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
66
- cell: (context) => getCell(col, slots, context),
67
- meta: col.meta
68
- });
69
- }
70
- if (accessorCol.accessorFn) {
71
- return columnHelper.accessor(accessorCol.accessorFn, {
72
- id: accessorCol.id || String(Math.random()),
73
- header: (context) => getHeader(col, slots, context),
74
- footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
75
- cell: (context) => getCell(col, slots, context),
76
- meta: col.meta
77
- });
78
- }
79
- return columnHelper.display({
80
- id: col.id || String(Math.random()),
81
- header: (context) => getHeader(col, slots, context),
82
- footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
83
- cell: (context) => getCell(col, slots, context),
84
- meta: col.meta
85
- });
86
- });
87
- };
88
-
89
- exports.processColumns = processColumns;
90
- //# sourceMappingURL=utils.cjs.map
@@ -1 +0,0 @@
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 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, any>,\n slots: Readonly<Slots>,\n context: HeaderContext<TData, any>,\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, any>,\n slots: Readonly<Slots>,\n context: HeaderContext<TData, any>,\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, any>,\n slots: Readonly<Slots>,\n context: CellContext<TData, any>,\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, any>[],\n slots: Readonly<Slots>,\n table: Table<TData>,\n): TStackColumnDef<TData, any>[] => {\n return columns.map((col): TStackColumnDef<TData, any> => {\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, any>) => getHeader(col, slots, context),\n footer: col.footer ? (context: HeaderContext<TData, any>) => getFooter(col, slots, context) : undefined,\n columns: processColumns(columnHelper, col.columns as ColumnDef<TData, any>[], 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, any>) => getHeader(col, slots, context),\n footer: col.footer ? (context: HeaderContext<TData, any>) => getFooter(col, slots, context) : undefined,\n cell: (context: CellContext<TData, any>) => 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, any>) => getHeader(col, slots, context),\n footer: col.footer ? (context: HeaderContext<TData, any>) => getFooter(col, slots, context) : undefined,\n cell: (context: CellContext<TData, any>) => 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, any>) => getHeader(col, slots, context),\n footer: col.footer ? (context: HeaderContext<TData, any>) => getFooter(col, slots, context) : undefined,\n cell: (context: CellContext<TData, any>) => getCell(col, slots, context),\n meta: col.meta,\n })\n })\n}\n"],"names":[],"mappings":";;;;AAYA,MAAM,SAAY,GAAA,CAChB,GACA,EAAA,KAAA,EACA,OACG,KAAA;AACH,EAAA,MAAM,QAAY,GAAA,GAAA,CAAY,WAAe,IAAA,GAAA,CAAI,EAAM,IAAA,EAAA;AACvD,EAAM,MAAA,QAAA,GAAW,UAAU,QAAQ,CAAA,CAAA;AAGnC,EAAI,IAAA,KAAA,CAAM,QAAQ,CAAG,EAAA;AACnB,IAAO,OAAA,KAAA,CAAM,QAAQ,CAAE,CAAA;AAAA,MACrB,QAAQ,OAAQ,CAAA,MAAA;AAAA,MAChB;AAAA,KACD,CAAA;AAAA;AAIH,EAAA,IAAI,IAAI,MAAQ,EAAA;AACd,IAAA,OAAO,GAAI,CAAA,MAAA;AAAA;AAIb,EAAA,OAAO,WAAW,QAAS,CAAA,KAAA,CAAM,GAAG,CAAE,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA;AACjD,CAAA;AAEA,MAAM,SAAY,GAAA,CAChB,GACA,EAAA,KAAA,EACA,OACG,KAAA;AACH,EAAA,MAAM,QAAY,GAAA,GAAA,CAAY,WAAe,IAAA,GAAA,CAAI,EAAM,IAAA,EAAA;AACvD,EAAM,MAAA,QAAA,GAAW,UAAU,QAAQ,CAAA,CAAA;AAGnC,EAAI,IAAA,KAAA,CAAM,QAAQ,CAAG,EAAA;AACnB,IAAO,OAAA,KAAA,CAAM,QAAQ,CAAE,CAAA;AAAA,MACrB,QAAQ,OAAQ,CAAA,MAAA;AAAA,MAChB;AAAA,KACD,CAAA;AAAA;AAIH,EAAA,IAAI,IAAI,MAAQ,EAAA;AACd,IAAA,OAAO,GAAI,CAAA,MAAA;AAAA;AAGb,EAAO,OAAA,MAAA;AACT,CAAA;AAEA,MAAM,OAAU,GAAA,CACd,GACA,EAAA,KAAA,EACA,OACG,KAAA;AACH,EAAA,MAAM,QAAY,GAAA,GAAA,CAAY,WAAe,IAAA,GAAA,CAAI,EAAM,IAAA,EAAA;AACvD,EAAM,MAAA,QAAA,GAAW,QAAQ,QAAQ,CAAA,CAAA;AAGjC,EAAI,IAAA,KAAA,CAAM,QAAQ,CAAG,EAAA;AACnB,IAAO,OAAA,KAAA,CAAM,QAAQ,CAAE,CAAA;AAAA,MACrB,MAAM,OAAQ,CAAA,IAAA;AAAA,MACd,KAAK,OAAQ,CAAA,GAAA;AAAA,MACb,KAAA,EAAO,QAAQ,QAAS;AAAA,KACzB,CAAA;AAAA;AAIH,EAAM,MAAA,KAAA,GAAQ,QAAQ,QAAS,EAAA;AAC/B,EAAA,IAAI,IAAI,IAAM,EAAA;AACZ,IAAO,OAAA,OAAO,IAAI,IAAS,KAAA,UAAA,GAAa,IAAI,IAAK,CAAA,OAAO,IAAI,GAAI,CAAA,IAAA;AAAA;AAElE,EAAA,OAAO,KAAU,KAAA,MAAA,IAAa,KAAU,KAAA,IAAA,GAAO,KAAQ,GAAA,GAAA;AACzD,CAAA;AAEO,MAAM,cAAiB,GAAA,CAC5B,YACA,EAAA,OAAA,EACA,OACA,KACkC,KAAA;AAClC,EAAO,OAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,GAAqC,KAAA;AAEvD,IAAA,IAAI,aAAa,GAAO,IAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,CAAI,OAAO,CAAG,EAAA;AAClD,MAAA,OAAO,aAAa,KAAM,CAAA;AAAA,QACxB,IAAI,GAAI,CAAA,EAAA,IAAM,MAAO,CAAA,IAAA,CAAK,QAAQ,CAAA;AAAA,QAClC,QAAQ,CAAC,OAAA,KAAuC,SAAU,CAAA,GAAA,EAAK,OAAO,OAAO,CAAA;AAAA,QAC7E,MAAA,EAAQ,IAAI,MAAS,GAAA,CAAC,YAAuC,SAAU,CAAA,GAAA,EAAK,KAAO,EAAA,OAAO,CAAI,GAAA,MAAA;AAAA,QAC9F,SAAS,cAAe,CAAA,YAAA,EAAc,GAAI,CAAA,OAAA,EAAoC,KAAY,CAAA;AAAA,QAC1F,MAAM,GAAI,CAAA;AAAA,OACX,CAAA;AAAA;AAIH,IAAA,MAAM,WAAc,GAAA,GAAA;AACpB,IAAA,IAAI,YAAY,WAAa,EAAA;AAC3B,MAAO,OAAA,YAAA,CAAa,QAAS,CAAA,WAAA,CAAY,WAAa,EAAA;AAAA,QACpD,EAAA,EAAI,WAAY,CAAA,EAAA,IAAM,WAAY,CAAA,WAAA;AAAA,QAClC,QAAQ,CAAC,OAAA,KAAuC,SAAU,CAAA,GAAA,EAAK,OAAO,OAAO,CAAA;AAAA,QAC7E,MAAA,EAAQ,IAAI,MAAS,GAAA,CAAC,YAAuC,SAAU,CAAA,GAAA,EAAK,KAAO,EAAA,OAAO,CAAI,GAAA,MAAA;AAAA,QAC9F,MAAM,CAAC,OAAA,KAAqC,OAAQ,CAAA,GAAA,EAAK,OAAO,OAAO,CAAA;AAAA,QACvE,MAAM,GAAI,CAAA;AAAA,OACX,CAAA;AAAA;AAGH,IAAA,IAAI,YAAY,UAAY,EAAA;AAC1B,MAAO,OAAA,YAAA,CAAa,QAAS,CAAA,WAAA,CAAY,UAAY,EAAA;AAAA,QACnD,IAAI,WAAY,CAAA,EAAA,IAAM,MAAO,CAAA,IAAA,CAAK,QAAQ,CAAA;AAAA,QAC1C,QAAQ,CAAC,OAAA,KAAuC,SAAU,CAAA,GAAA,EAAK,OAAO,OAAO,CAAA;AAAA,QAC7E,MAAA,EAAQ,IAAI,MAAS,GAAA,CAAC,YAAuC,SAAU,CAAA,GAAA,EAAK,KAAO,EAAA,OAAO,CAAI,GAAA,MAAA;AAAA,QAC9F,MAAM,CAAC,OAAA,KAAqC,OAAQ,CAAA,GAAA,EAAK,OAAO,OAAO,CAAA;AAAA,QACvE,MAAM,GAAI,CAAA;AAAA,OACX,CAAA;AAAA;AAIH,IAAA,OAAO,aAAa,OAAQ,CAAA;AAAA,MAC1B,IAAI,GAAI,CAAA,EAAA,IAAM,MAAO,CAAA,IAAA,CAAK,QAAQ,CAAA;AAAA,MAClC,QAAQ,CAAC,OAAA,KAAuC,SAAU,CAAA,GAAA,EAAK,OAAO,OAAO,CAAA;AAAA,MAC7E,MAAA,EAAQ,IAAI,MAAS,GAAA,CAAC,YAAuC,SAAU,CAAA,GAAA,EAAK,KAAO,EAAA,OAAO,CAAI,GAAA,MAAA;AAAA,MAC9F,MAAM,CAAC,OAAA,KAAqC,OAAQ,CAAA,GAAA,EAAK,OAAO,OAAO,CAAA;AAAA,MACvE,MAAM,GAAI,CAAA;AAAA,KACX,CAAA;AAAA,GACF,CAAA;AACH;;;;"}
@@ -1,88 +0,0 @@
1
- import capitalize from 'lodash.capitalize';
2
-
3
- const getHeader = (col, slots, context) => {
4
- const columnId = col.accessorKey || col.id || "";
5
- const slotName = `header-${columnId}`;
6
- if (slots[slotName]) {
7
- return slots[slotName]({
8
- column: context.column,
9
- context
10
- });
11
- }
12
- if (col.header) {
13
- return col.header;
14
- }
15
- return capitalize(columnId.split("-").join(" "));
16
- };
17
- const getFooter = (col, slots, context) => {
18
- const columnId = col.accessorKey || col.id || "";
19
- const slotName = `footer-${columnId}`;
20
- if (slots[slotName]) {
21
- return slots[slotName]({
22
- column: context.column,
23
- context
24
- });
25
- }
26
- if (col.footer) {
27
- return col.footer;
28
- }
29
- return void 0;
30
- };
31
- const getCell = (col, slots, context) => {
32
- const columnId = col.accessorKey || col.id || "";
33
- const slotName = `cell-${columnId}`;
34
- if (slots[slotName]) {
35
- return slots[slotName]({
36
- cell: context.cell,
37
- row: context.row,
38
- value: context.getValue()
39
- });
40
- }
41
- const value = context.getValue();
42
- if (col.cell) {
43
- return typeof col.cell === "function" ? col.cell(context) : col.cell;
44
- }
45
- return value !== void 0 && value !== null ? value : "-";
46
- };
47
- const processColumns = (columnHelper, columns, slots, table) => {
48
- return columns.map((col) => {
49
- if ("columns" in col && Array.isArray(col.columns)) {
50
- return columnHelper.group({
51
- id: col.id || String(Math.random()),
52
- header: (context) => getHeader(col, slots, context),
53
- footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
54
- columns: processColumns(columnHelper, col.columns, slots),
55
- meta: col.meta
56
- });
57
- }
58
- const accessorCol = col;
59
- if (accessorCol.accessorKey) {
60
- return columnHelper.accessor(accessorCol.accessorKey, {
61
- id: accessorCol.id || accessorCol.accessorKey,
62
- header: (context) => getHeader(col, slots, context),
63
- footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
64
- cell: (context) => getCell(col, slots, context),
65
- meta: col.meta
66
- });
67
- }
68
- if (accessorCol.accessorFn) {
69
- return columnHelper.accessor(accessorCol.accessorFn, {
70
- id: accessorCol.id || String(Math.random()),
71
- header: (context) => getHeader(col, slots, context),
72
- footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
73
- cell: (context) => getCell(col, slots, context),
74
- meta: col.meta
75
- });
76
- }
77
- return columnHelper.display({
78
- id: col.id || String(Math.random()),
79
- header: (context) => getHeader(col, slots, context),
80
- footer: col.footer ? (context) => getFooter(col, slots, context) : void 0,
81
- cell: (context) => getCell(col, slots, context),
82
- meta: col.meta
83
- });
84
- });
85
- };
86
-
87
- export { processColumns as p };
88
- //# sourceMappingURL=utils.js.map
@@ -1 +0,0 @@
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 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, any>,\n slots: Readonly<Slots>,\n context: HeaderContext<TData, any>,\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, any>,\n slots: Readonly<Slots>,\n context: HeaderContext<TData, any>,\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, any>,\n slots: Readonly<Slots>,\n context: CellContext<TData, any>,\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, any>[],\n slots: Readonly<Slots>,\n table: Table<TData>,\n): TStackColumnDef<TData, any>[] => {\n return columns.map((col): TStackColumnDef<TData, any> => {\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, any>) => getHeader(col, slots, context),\n footer: col.footer ? (context: HeaderContext<TData, any>) => getFooter(col, slots, context) : undefined,\n columns: processColumns(columnHelper, col.columns as ColumnDef<TData, any>[], 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, any>) => getHeader(col, slots, context),\n footer: col.footer ? (context: HeaderContext<TData, any>) => getFooter(col, slots, context) : undefined,\n cell: (context: CellContext<TData, any>) => 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, any>) => getHeader(col, slots, context),\n footer: col.footer ? (context: HeaderContext<TData, any>) => getFooter(col, slots, context) : undefined,\n cell: (context: CellContext<TData, any>) => 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, any>) => getHeader(col, slots, context),\n footer: col.footer ? (context: HeaderContext<TData, any>) => getFooter(col, slots, context) : undefined,\n cell: (context: CellContext<TData, any>) => getCell(col, slots, context),\n meta: col.meta,\n })\n })\n}\n"],"names":[],"mappings":"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"}