tanstack-table-vue 0.0.5 → 0.0.7
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 +92 -0
- package/dist/components/TSTable.cjs +17 -117
- package/dist/components/TSTable.cjs.map +1 -1
- package/dist/components/TSTable.js +19 -119
- package/dist/components/TSTable.js.map +1 -1
- package/dist/index.cjs +0 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +14 -66
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/dist/shared/utils.cjs +47 -30
- package/dist/shared/utils.cjs.map +1 -1
- package/dist/shared/utils.js +47 -30
- package/dist/shared/utils.js.map +1 -1
- package/package.json +1 -1
- package/dist/shared/defineColumns.cjs +0 -24
- package/dist/shared/defineColumns.cjs.map +0 -1
- package/dist/shared/defineColumns.js +0 -22
- package/dist/shared/defineColumns.js.map +0 -1
package/README.md
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# @tanstack-table-vue/core
|
|
2
|
+
|
|
3
|
+
Core package for TanStack Table Vue integration.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
This package contains the core functionality for integrating TanStack Table with Vue.js. It provides:
|
|
8
|
+
|
|
9
|
+
- TSTable component for rendering tables
|
|
10
|
+
- Column processing utilities
|
|
11
|
+
- Type definitions and helpers
|
|
12
|
+
- Slot management system
|
|
13
|
+
|
|
14
|
+
## Components
|
|
15
|
+
|
|
16
|
+
### TSTable
|
|
17
|
+
|
|
18
|
+
The main component that renders the table structure. It accepts:
|
|
19
|
+
|
|
20
|
+
- `columns`: Column definitions
|
|
21
|
+
- `data`: Table data
|
|
22
|
+
- `tableOptions`: TanStack Table options
|
|
23
|
+
|
|
24
|
+
```vue
|
|
25
|
+
<TSTable :columns="columns" :data="data" :tableOptions="tableOptions">
|
|
26
|
+
<!-- Slots for customization -->
|
|
27
|
+
</TSTable>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Utilities
|
|
31
|
+
|
|
32
|
+
### Column Processing
|
|
33
|
+
|
|
34
|
+
The package includes utilities for processing columns and managing slots:
|
|
35
|
+
|
|
36
|
+
- `processColumns`: Converts column definitions to TanStack Table format
|
|
37
|
+
- `getHeader`, `getCell`, `getFooter`: Slot management functions
|
|
38
|
+
|
|
39
|
+
### Types
|
|
40
|
+
|
|
41
|
+
```typescript
|
|
42
|
+
interface TSTableProps<TData extends RowData & object> {
|
|
43
|
+
columns: ColumnDef<TData>[]
|
|
44
|
+
data: TData[]
|
|
45
|
+
tableOptions?: Record<string, any>
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Usage with Slots
|
|
50
|
+
|
|
51
|
+
The package provides a flexible slot system:
|
|
52
|
+
|
|
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>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Internal Architecture
|
|
73
|
+
|
|
74
|
+
The package uses a slot-based system instead of render functions, making it more Vue-idiomatic. Key features:
|
|
75
|
+
|
|
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
|
|
80
|
+
|
|
81
|
+
## Contributing
|
|
82
|
+
|
|
83
|
+
When contributing to this package, please:
|
|
84
|
+
|
|
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
|
|
89
|
+
|
|
90
|
+
## License
|
|
91
|
+
|
|
92
|
+
MIT
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
require('lodash.capitalize');
|
|
3
4
|
const vue = require('vue');
|
|
4
5
|
const vueTable = require('@tanstack/vue-table');
|
|
5
6
|
const shared_utils = require('../shared/utils.cjs');
|
|
@@ -7,133 +8,32 @@ const shared_utils = require('../shared/utils.cjs');
|
|
|
7
8
|
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
8
9
|
__name: "TSTable",
|
|
9
10
|
props: {
|
|
10
|
-
data: {},
|
|
11
11
|
columns: {},
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
tbodyComponent: { default: "tbody" },
|
|
15
|
-
tfootComponent: { default: "tfoot" },
|
|
16
|
-
trComponent: { default: "tr" },
|
|
17
|
-
thComponent: { default: "th" },
|
|
18
|
-
tdComponent: { default: "td" }
|
|
12
|
+
data: {},
|
|
13
|
+
tableOptions: {}
|
|
19
14
|
},
|
|
20
15
|
setup(__props) {
|
|
21
16
|
const props = __props;
|
|
22
17
|
const slots = vue.useSlots();
|
|
23
18
|
const columnHelper = vueTable.createColumnHelper();
|
|
24
|
-
const
|
|
19
|
+
const processedColumns = vue.computed(() => {
|
|
20
|
+
vueTable.useVueTable({
|
|
21
|
+
columns: props.columns,
|
|
22
|
+
data: props.data,
|
|
23
|
+
getCoreRowModel: vueTable.getCoreRowModel(),
|
|
24
|
+
...props.tableOptions
|
|
25
|
+
});
|
|
25
26
|
return shared_utils.processColumns(columnHelper, props.columns, slots);
|
|
26
27
|
});
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
return tableColumns.value;
|
|
33
|
-
},
|
|
34
|
-
getCoreRowModel: vueTable.getCoreRowModel()
|
|
35
|
-
});
|
|
36
|
-
const hasFooterGroupRows = (footerGroup) => {
|
|
37
|
-
return footerGroup.headers.some(
|
|
38
|
-
(h) => !h.isPlaceholder && h.column.columnDef.footer && typeof h.column.columnDef.footer === "function" && h.column.columnDef.footer(h.getContext())
|
|
39
|
-
);
|
|
28
|
+
const tableOptions = {
|
|
29
|
+
columns: processedColumns.value,
|
|
30
|
+
data: props.data,
|
|
31
|
+
getCoreRowModel: vueTable.getCoreRowModel(),
|
|
32
|
+
...props.tableOptions
|
|
40
33
|
};
|
|
41
|
-
const
|
|
42
|
-
return table.getFooterGroups().some((footerGroup) => hasFooterGroupRows(footerGroup));
|
|
43
|
-
});
|
|
34
|
+
const table = vueTable.useVueTable(tableOptions);
|
|
44
35
|
return (_ctx, _cache) => {
|
|
45
|
-
return vue.
|
|
46
|
-
default: vue.withCtx(() => [
|
|
47
|
-
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.theadComponent), null, {
|
|
48
|
-
default: vue.withCtx(() => [
|
|
49
|
-
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(table).getHeaderGroups(), (headerGroup) => {
|
|
50
|
-
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.trComponent), {
|
|
51
|
-
key: headerGroup.id
|
|
52
|
-
}, {
|
|
53
|
-
default: vue.withCtx(() => [
|
|
54
|
-
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(headerGroup.headers, (header) => {
|
|
55
|
-
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.thComponent), {
|
|
56
|
-
key: header.id,
|
|
57
|
-
colSpan: header.colSpan
|
|
58
|
-
}, {
|
|
59
|
-
default: vue.withCtx(() => [
|
|
60
|
-
!header.isPlaceholder ? (vue.openBlock(), vue.createBlock(vue.unref(vueTable.FlexRender), {
|
|
61
|
-
key: 0,
|
|
62
|
-
render: header.column.columnDef.header,
|
|
63
|
-
props: header.getContext()
|
|
64
|
-
}, null, 8, ["render", "props"])) : vue.createCommentVNode("", true)
|
|
65
|
-
]),
|
|
66
|
-
_: 2
|
|
67
|
-
}, 1032, ["colSpan"]);
|
|
68
|
-
}), 128))
|
|
69
|
-
]),
|
|
70
|
-
_: 2
|
|
71
|
-
}, 1024);
|
|
72
|
-
}), 128))
|
|
73
|
-
]),
|
|
74
|
-
_: 1
|
|
75
|
-
})),
|
|
76
|
-
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.tbodyComponent), null, {
|
|
77
|
-
default: vue.withCtx(() => [
|
|
78
|
-
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(table).getRowModel().rows, (row) => {
|
|
79
|
-
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.trComponent), {
|
|
80
|
-
key: row.id
|
|
81
|
-
}, {
|
|
82
|
-
default: vue.withCtx(() => [
|
|
83
|
-
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(row.getVisibleCells(), (cell) => {
|
|
84
|
-
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.tdComponent), {
|
|
85
|
-
key: cell.id
|
|
86
|
-
}, {
|
|
87
|
-
default: vue.withCtx(() => [
|
|
88
|
-
vue.createVNode(vue.unref(vueTable.FlexRender), {
|
|
89
|
-
render: cell.column.columnDef.cell,
|
|
90
|
-
props: cell.getContext()
|
|
91
|
-
}, null, 8, ["render", "props"])
|
|
92
|
-
]),
|
|
93
|
-
_: 2
|
|
94
|
-
}, 1024);
|
|
95
|
-
}), 128))
|
|
96
|
-
]),
|
|
97
|
-
_: 2
|
|
98
|
-
}, 1024);
|
|
99
|
-
}), 128))
|
|
100
|
-
]),
|
|
101
|
-
_: 1
|
|
102
|
-
})),
|
|
103
|
-
hasFooterRows.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.tfootComponent), { key: 0 }, {
|
|
104
|
-
default: vue.withCtx(() => [
|
|
105
|
-
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(table).getFooterGroups(), (footerGroup) => {
|
|
106
|
-
return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
|
|
107
|
-
key: footerGroup.id
|
|
108
|
-
}, [
|
|
109
|
-
hasFooterGroupRows(footerGroup) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.trComponent), { key: 0 }, {
|
|
110
|
-
default: vue.withCtx(() => [
|
|
111
|
-
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(footerGroup.headers, (header) => {
|
|
112
|
-
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.thComponent), {
|
|
113
|
-
key: header.id,
|
|
114
|
-
colSpan: header.colSpan
|
|
115
|
-
}, {
|
|
116
|
-
default: vue.withCtx(() => [
|
|
117
|
-
!header.isPlaceholder ? (vue.openBlock(), vue.createBlock(vue.unref(vueTable.FlexRender), {
|
|
118
|
-
key: 0,
|
|
119
|
-
render: header.column.columnDef.footer,
|
|
120
|
-
props: header.getContext()
|
|
121
|
-
}, null, 8, ["render", "props"])) : vue.createCommentVNode("", true)
|
|
122
|
-
]),
|
|
123
|
-
_: 2
|
|
124
|
-
}, 1032, ["colSpan"]);
|
|
125
|
-
}), 128))
|
|
126
|
-
]),
|
|
127
|
-
_: 2
|
|
128
|
-
}, 1024)) : vue.createCommentVNode("", true)
|
|
129
|
-
], 64);
|
|
130
|
-
}), 128))
|
|
131
|
-
]),
|
|
132
|
-
_: 1
|
|
133
|
-
})) : vue.createCommentVNode("", true)
|
|
134
|
-
]),
|
|
135
|
-
_: 1
|
|
136
|
-
});
|
|
36
|
+
return vue.renderSlot(_ctx.$slots, "default", { table: vue.unref(table) });
|
|
137
37
|
};
|
|
138
38
|
}
|
|
139
39
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TSTable.cjs","sources":["../../src/components/TSTable.vue"],"sourcesContent":["<script lang=\"ts\">\
|
|
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>[]\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;;;;;;;;;"}
|
|
@@ -1,137 +1,37 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
import 'lodash.capitalize';
|
|
2
|
+
import { defineComponent, useSlots, computed, renderSlot, unref } from 'vue';
|
|
3
|
+
import { createColumnHelper, useVueTable, getCoreRowModel } from '@tanstack/vue-table';
|
|
3
4
|
import { p as processColumns } from '../shared/utils.js';
|
|
4
5
|
|
|
5
6
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
6
7
|
__name: "TSTable",
|
|
7
8
|
props: {
|
|
8
|
-
data: {},
|
|
9
9
|
columns: {},
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
tbodyComponent: { default: "tbody" },
|
|
13
|
-
tfootComponent: { default: "tfoot" },
|
|
14
|
-
trComponent: { default: "tr" },
|
|
15
|
-
thComponent: { default: "th" },
|
|
16
|
-
tdComponent: { default: "td" }
|
|
10
|
+
data: {},
|
|
11
|
+
tableOptions: {}
|
|
17
12
|
},
|
|
18
13
|
setup(__props) {
|
|
19
14
|
const props = __props;
|
|
20
15
|
const slots = useSlots();
|
|
21
16
|
const columnHelper = createColumnHelper();
|
|
22
|
-
const
|
|
17
|
+
const processedColumns = computed(() => {
|
|
18
|
+
useVueTable({
|
|
19
|
+
columns: props.columns,
|
|
20
|
+
data: props.data,
|
|
21
|
+
getCoreRowModel: getCoreRowModel(),
|
|
22
|
+
...props.tableOptions
|
|
23
|
+
});
|
|
23
24
|
return processColumns(columnHelper, props.columns, slots);
|
|
24
25
|
});
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
return tableColumns.value;
|
|
31
|
-
},
|
|
32
|
-
getCoreRowModel: getCoreRowModel()
|
|
33
|
-
});
|
|
34
|
-
const hasFooterGroupRows = (footerGroup) => {
|
|
35
|
-
return footerGroup.headers.some(
|
|
36
|
-
(h) => !h.isPlaceholder && h.column.columnDef.footer && typeof h.column.columnDef.footer === "function" && h.column.columnDef.footer(h.getContext())
|
|
37
|
-
);
|
|
26
|
+
const tableOptions = {
|
|
27
|
+
columns: processedColumns.value,
|
|
28
|
+
data: props.data,
|
|
29
|
+
getCoreRowModel: getCoreRowModel(),
|
|
30
|
+
...props.tableOptions
|
|
38
31
|
};
|
|
39
|
-
const
|
|
40
|
-
return table.getFooterGroups().some((footerGroup) => hasFooterGroupRows(footerGroup));
|
|
41
|
-
});
|
|
32
|
+
const table = useVueTable(tableOptions);
|
|
42
33
|
return (_ctx, _cache) => {
|
|
43
|
-
return
|
|
44
|
-
default: withCtx(() => [
|
|
45
|
-
(openBlock(), createBlock(resolveDynamicComponent(props.theadComponent), null, {
|
|
46
|
-
default: withCtx(() => [
|
|
47
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(table).getHeaderGroups(), (headerGroup) => {
|
|
48
|
-
return openBlock(), createBlock(resolveDynamicComponent(props.trComponent), {
|
|
49
|
-
key: headerGroup.id
|
|
50
|
-
}, {
|
|
51
|
-
default: withCtx(() => [
|
|
52
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(headerGroup.headers, (header) => {
|
|
53
|
-
return openBlock(), createBlock(resolveDynamicComponent(props.thComponent), {
|
|
54
|
-
key: header.id,
|
|
55
|
-
colSpan: header.colSpan
|
|
56
|
-
}, {
|
|
57
|
-
default: withCtx(() => [
|
|
58
|
-
!header.isPlaceholder ? (openBlock(), createBlock(unref(FlexRender), {
|
|
59
|
-
key: 0,
|
|
60
|
-
render: header.column.columnDef.header,
|
|
61
|
-
props: header.getContext()
|
|
62
|
-
}, null, 8, ["render", "props"])) : createCommentVNode("", true)
|
|
63
|
-
]),
|
|
64
|
-
_: 2
|
|
65
|
-
}, 1032, ["colSpan"]);
|
|
66
|
-
}), 128))
|
|
67
|
-
]),
|
|
68
|
-
_: 2
|
|
69
|
-
}, 1024);
|
|
70
|
-
}), 128))
|
|
71
|
-
]),
|
|
72
|
-
_: 1
|
|
73
|
-
})),
|
|
74
|
-
(openBlock(), createBlock(resolveDynamicComponent(props.tbodyComponent), null, {
|
|
75
|
-
default: withCtx(() => [
|
|
76
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(table).getRowModel().rows, (row) => {
|
|
77
|
-
return openBlock(), createBlock(resolveDynamicComponent(props.trComponent), {
|
|
78
|
-
key: row.id
|
|
79
|
-
}, {
|
|
80
|
-
default: withCtx(() => [
|
|
81
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(row.getVisibleCells(), (cell) => {
|
|
82
|
-
return openBlock(), createBlock(resolveDynamicComponent(props.tdComponent), {
|
|
83
|
-
key: cell.id
|
|
84
|
-
}, {
|
|
85
|
-
default: withCtx(() => [
|
|
86
|
-
createVNode(unref(FlexRender), {
|
|
87
|
-
render: cell.column.columnDef.cell,
|
|
88
|
-
props: cell.getContext()
|
|
89
|
-
}, null, 8, ["render", "props"])
|
|
90
|
-
]),
|
|
91
|
-
_: 2
|
|
92
|
-
}, 1024);
|
|
93
|
-
}), 128))
|
|
94
|
-
]),
|
|
95
|
-
_: 2
|
|
96
|
-
}, 1024);
|
|
97
|
-
}), 128))
|
|
98
|
-
]),
|
|
99
|
-
_: 1
|
|
100
|
-
})),
|
|
101
|
-
hasFooterRows.value ? (openBlock(), createBlock(resolveDynamicComponent(props.tfootComponent), { key: 0 }, {
|
|
102
|
-
default: withCtx(() => [
|
|
103
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(table).getFooterGroups(), (footerGroup) => {
|
|
104
|
-
return openBlock(), createElementBlock(Fragment, {
|
|
105
|
-
key: footerGroup.id
|
|
106
|
-
}, [
|
|
107
|
-
hasFooterGroupRows(footerGroup) ? (openBlock(), createBlock(resolveDynamicComponent(props.trComponent), { key: 0 }, {
|
|
108
|
-
default: withCtx(() => [
|
|
109
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(footerGroup.headers, (header) => {
|
|
110
|
-
return openBlock(), createBlock(resolveDynamicComponent(props.thComponent), {
|
|
111
|
-
key: header.id,
|
|
112
|
-
colSpan: header.colSpan
|
|
113
|
-
}, {
|
|
114
|
-
default: withCtx(() => [
|
|
115
|
-
!header.isPlaceholder ? (openBlock(), createBlock(unref(FlexRender), {
|
|
116
|
-
key: 0,
|
|
117
|
-
render: header.column.columnDef.footer,
|
|
118
|
-
props: header.getContext()
|
|
119
|
-
}, null, 8, ["render", "props"])) : createCommentVNode("", true)
|
|
120
|
-
]),
|
|
121
|
-
_: 2
|
|
122
|
-
}, 1032, ["colSpan"]);
|
|
123
|
-
}), 128))
|
|
124
|
-
]),
|
|
125
|
-
_: 2
|
|
126
|
-
}, 1024)) : createCommentVNode("", true)
|
|
127
|
-
], 64);
|
|
128
|
-
}), 128))
|
|
129
|
-
]),
|
|
130
|
-
_: 1
|
|
131
|
-
})) : createCommentVNode("", true)
|
|
132
|
-
]),
|
|
133
|
-
_: 1
|
|
134
|
-
});
|
|
34
|
+
return renderSlot(_ctx.$slots, "default", { table: unref(table) });
|
|
135
35
|
};
|
|
136
36
|
}
|
|
137
37
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TSTable.js","sources":["../../src/components/TSTable.vue"],"sourcesContent":["<script lang=\"ts\">\
|
|
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>[]\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.cjs
CHANGED
|
@@ -3,12 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
5
|
const components_TSTable = require('./components/TSTable.cjs');
|
|
6
|
-
const shared_defineColumns = require('./shared/defineColumns.cjs');
|
|
7
6
|
const shared_utils = require('./shared/utils.cjs');
|
|
8
7
|
|
|
9
8
|
|
|
10
9
|
|
|
11
10
|
exports.TSTable = components_TSTable._sfc_main;
|
|
12
|
-
exports.defineColumns = shared_defineColumns.defineColumns;
|
|
13
11
|
exports.processColumns = shared_utils.processColumns;
|
|
14
12
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { AllowedComponentProps } from 'vue';
|
|
2
2
|
import { CellContext } from '@tanstack/vue-table';
|
|
3
3
|
import { Column } from '@tanstack/vue-table';
|
|
4
|
-
import { ColumnDef
|
|
4
|
+
import { ColumnDef } from '@tanstack/vue-table';
|
|
5
5
|
import { ColumnHelper } from '@tanstack/vue-table';
|
|
6
6
|
import { ComponentCustomProps } from 'vue';
|
|
7
7
|
import { HeaderContext } from '@tanstack/vue-table';
|
|
@@ -18,104 +18,52 @@ declare type __VLS_PrettifyLocal<T> = {
|
|
|
18
18
|
[K in keyof T]: T[K];
|
|
19
19
|
} & {};
|
|
20
20
|
|
|
21
|
-
export declare interface AccessorColumnDef {
|
|
22
|
-
id: string;
|
|
23
|
-
type?: "accessor";
|
|
24
|
-
header?: string;
|
|
25
|
-
footer?: string | ((props: any) => any);
|
|
26
|
-
cell?: (info: any) => any;
|
|
27
|
-
meta?: Record<string, any>;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
21
|
export declare interface CellSlotProps<TData extends RowData> {
|
|
31
22
|
row: Row<TData>;
|
|
32
23
|
context: CellContext<TData, unknown>;
|
|
33
24
|
value: any;
|
|
34
25
|
}
|
|
35
26
|
|
|
36
|
-
declare type ColumnConfig<TData extends object> = {
|
|
37
|
-
id: keyof TData & string;
|
|
38
|
-
header?: string;
|
|
39
|
-
footer?: string;
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
export declare type ColumnDef<TData extends object> = DisplayColumnDef | AccessorColumnDef | GroupColumnDef<TData>;
|
|
43
|
-
|
|
44
|
-
export declare function defineColumns<TData extends object>(columns: (ColumnConfig<TData> | GroupConfig<TData>)[]): ColumnDef<TData>[];
|
|
45
|
-
|
|
46
|
-
export declare interface DisplayColumnDef {
|
|
47
|
-
id: string;
|
|
48
|
-
type: "display";
|
|
49
|
-
header?: string;
|
|
50
|
-
footer?: string | ((props: any) => any);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
27
|
export declare interface FooterSlotProps<TData extends RowData> {
|
|
54
28
|
column: Column<TData>;
|
|
55
29
|
context: HeaderContext<TData, unknown>;
|
|
56
30
|
}
|
|
57
31
|
|
|
58
|
-
export declare interface GroupColumnDef<TData extends object> {
|
|
59
|
-
id: string;
|
|
60
|
-
type: "group";
|
|
61
|
-
header?: string;
|
|
62
|
-
footer?: string | ((props: any) => any);
|
|
63
|
-
columns: Array<ColumnDef_2<TData>>;
|
|
64
|
-
meta?: Record<string, any>;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
declare type GroupConfig<TData extends object> = {
|
|
68
|
-
id: string;
|
|
69
|
-
header?: string;
|
|
70
|
-
footer?: string;
|
|
71
|
-
columns: (ColumnConfig<TData> | GroupConfig<TData>)[];
|
|
72
|
-
};
|
|
73
|
-
|
|
74
32
|
export declare interface HeaderSlotProps<TData extends RowData> {
|
|
75
33
|
column: Column<TData>;
|
|
76
34
|
context: HeaderContext<TData, unknown>;
|
|
77
35
|
}
|
|
78
36
|
|
|
79
|
-
export declare const processColumns: <TData extends RowData & object>(columnHelper: ColumnHelper<TData>, columns: ColumnDef<TData>[], slots: Readonly<Slots>) =>
|
|
37
|
+
export declare const processColumns: <TData extends RowData & object>(columnHelper: ColumnHelper<TData>, columns: ColumnDef<TData>[], slots: Readonly<Slots>, table: Table<TData>) => ColumnDef<TData>[];
|
|
80
38
|
|
|
81
|
-
export declare
|
|
82
|
-
table: Table<TData>;
|
|
83
|
-
column: Column<TData>;
|
|
84
|
-
row?: Row<TData>;
|
|
85
|
-
getValue: () => any;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
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<{
|
|
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<{
|
|
89
40
|
props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, never> & TSTableProps<TData> & Partial<{}>> & PublicProps;
|
|
90
41
|
expose(exposed: ShallowUnwrapRef< {}>): void;
|
|
91
42
|
attrs: any;
|
|
92
43
|
slots: Readonly<{
|
|
93
|
-
[key: `cell-${string}`]: (props: CellSlotProps<TData>) => any;
|
|
94
44
|
[key: `header-${string}`]: (props: HeaderSlotProps<TData>) => any;
|
|
45
|
+
[key: `cell-${string}`]: (props: CellSlotProps<TData>) => any;
|
|
95
46
|
[key: `footer-${string}`]: (props: FooterSlotProps<TData>) => any;
|
|
47
|
+
default: (props: {
|
|
48
|
+
table: Table<TData>;
|
|
49
|
+
}) => any;
|
|
96
50
|
}> & {
|
|
97
|
-
[key: `cell-${string}`]: (props: CellSlotProps<TData>) => any;
|
|
98
51
|
[key: `header-${string}`]: (props: HeaderSlotProps<TData>) => any;
|
|
52
|
+
[key: `cell-${string}`]: (props: CellSlotProps<TData>) => any;
|
|
99
53
|
[key: `footer-${string}`]: (props: FooterSlotProps<TData>) => any;
|
|
54
|
+
default: (props: {
|
|
55
|
+
table: Table<TData>;
|
|
56
|
+
}) => any;
|
|
100
57
|
};
|
|
101
58
|
emit: {};
|
|
102
59
|
}>) => VNode & {
|
|
103
60
|
__ctx?: Awaited<typeof __VLS_setup>;
|
|
104
61
|
};
|
|
105
62
|
|
|
106
|
-
export declare interface TSTableProps<TData extends object> {
|
|
107
|
-
data: TData[];
|
|
63
|
+
export declare interface TSTableProps<TData extends RowData & object> {
|
|
108
64
|
columns: ColumnDef<TData>[];
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
*/
|
|
112
|
-
tableComponent?: string | object;
|
|
113
|
-
theadComponent?: string | object;
|
|
114
|
-
tbodyComponent?: string | object;
|
|
115
|
-
tfootComponent?: string | object;
|
|
116
|
-
trComponent?: string | object;
|
|
117
|
-
thComponent?: string | object;
|
|
118
|
-
tdComponent?: string | object;
|
|
65
|
+
data: TData[];
|
|
66
|
+
tableOptions?: Record<string, any>;
|
|
119
67
|
}
|
|
120
68
|
|
|
121
69
|
export { }
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
package/dist/shared/utils.cjs
CHANGED
|
@@ -3,68 +3,85 @@
|
|
|
3
3
|
const capitalize = require('lodash.capitalize');
|
|
4
4
|
|
|
5
5
|
const getHeader = (col, slots, context) => {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
const slotName = `header-${col.id}`;
|
|
6
|
+
const columnId = col.accessorKey || col.id || "";
|
|
7
|
+
const slotName = `header-${columnId}`;
|
|
10
8
|
if (slots[slotName]) {
|
|
11
9
|
return slots[slotName]({
|
|
12
10
|
column: context.column,
|
|
13
11
|
context
|
|
14
12
|
});
|
|
15
13
|
}
|
|
16
|
-
|
|
14
|
+
if (col.header) {
|
|
15
|
+
return col.header;
|
|
16
|
+
}
|
|
17
|
+
return capitalize(columnId.split("-").join(" "));
|
|
17
18
|
};
|
|
18
19
|
const getFooter = (col, slots, context) => {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
const slotName = `footer-${col.id}`;
|
|
20
|
+
const columnId = col.accessorKey || col.id || "";
|
|
21
|
+
const slotName = `footer-${columnId}`;
|
|
23
22
|
if (slots[slotName]) {
|
|
24
23
|
return slots[slotName]({
|
|
25
24
|
column: context.column,
|
|
26
25
|
context
|
|
27
26
|
});
|
|
28
27
|
}
|
|
29
|
-
|
|
28
|
+
if (col.footer) {
|
|
29
|
+
return col.footer;
|
|
30
|
+
}
|
|
30
31
|
return void 0;
|
|
31
32
|
};
|
|
32
33
|
const getCell = (col, slots, context) => {
|
|
33
|
-
const
|
|
34
|
+
const columnId = col.accessorKey || col.id || "";
|
|
35
|
+
const slotName = `cell-${columnId}`;
|
|
34
36
|
if (slots[slotName]) {
|
|
35
37
|
return slots[slotName]({
|
|
38
|
+
cell: context.cell,
|
|
36
39
|
row: context.row,
|
|
37
|
-
context,
|
|
38
40
|
value: context.getValue()
|
|
39
41
|
});
|
|
40
42
|
}
|
|
41
|
-
|
|
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 : "-";
|
|
42
48
|
};
|
|
43
|
-
const processColumns = (columnHelper, columns, slots) => {
|
|
49
|
+
const processColumns = (columnHelper, columns, slots, table) => {
|
|
44
50
|
return columns.map((col) => {
|
|
45
|
-
if (col
|
|
46
|
-
const groupCol = col;
|
|
51
|
+
if ("columns" in col && Array.isArray(col.columns)) {
|
|
47
52
|
return columnHelper.group({
|
|
48
|
-
id:
|
|
49
|
-
header: (context) => getHeader(
|
|
50
|
-
footer: (context) => getFooter(
|
|
51
|
-
columns: processColumns(columnHelper,
|
|
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
|
|
52
58
|
});
|
|
53
59
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
60
|
+
const accessorCol = col;
|
|
61
|
+
if (accessorCol.accessorKey) {
|
|
62
|
+
return columnHelper.accessor(accessorCol.accessorKey, {
|
|
63
|
+
id: accessorCol.id || accessorCol.accessorKey,
|
|
57
64
|
header: (context) => getHeader(col, slots, context),
|
|
58
|
-
footer: (context) => getFooter(col, slots, context),
|
|
59
|
-
cell: (context) => getCell(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
|
|
60
68
|
});
|
|
61
69
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
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()),
|
|
65
81
|
header: (context) => getHeader(col, slots, context),
|
|
66
|
-
footer: (context) => getFooter(col, slots, context),
|
|
67
|
-
cell: (context) => getCell(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
|
|
68
85
|
});
|
|
69
86
|
});
|
|
70
87
|
};
|
|
@@ -1 +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'\
|
|
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>,\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
CHANGED
|
@@ -1,68 +1,85 @@
|
|
|
1
1
|
import capitalize from 'lodash.capitalize';
|
|
2
2
|
|
|
3
3
|
const getHeader = (col, slots, context) => {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
const slotName = `header-${col.id}`;
|
|
4
|
+
const columnId = col.accessorKey || col.id || "";
|
|
5
|
+
const slotName = `header-${columnId}`;
|
|
8
6
|
if (slots[slotName]) {
|
|
9
7
|
return slots[slotName]({
|
|
10
8
|
column: context.column,
|
|
11
9
|
context
|
|
12
10
|
});
|
|
13
11
|
}
|
|
14
|
-
|
|
12
|
+
if (col.header) {
|
|
13
|
+
return col.header;
|
|
14
|
+
}
|
|
15
|
+
return capitalize(columnId.split("-").join(" "));
|
|
15
16
|
};
|
|
16
17
|
const getFooter = (col, slots, context) => {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
const slotName = `footer-${col.id}`;
|
|
18
|
+
const columnId = col.accessorKey || col.id || "";
|
|
19
|
+
const slotName = `footer-${columnId}`;
|
|
21
20
|
if (slots[slotName]) {
|
|
22
21
|
return slots[slotName]({
|
|
23
22
|
column: context.column,
|
|
24
23
|
context
|
|
25
24
|
});
|
|
26
25
|
}
|
|
27
|
-
|
|
26
|
+
if (col.footer) {
|
|
27
|
+
return col.footer;
|
|
28
|
+
}
|
|
28
29
|
return void 0;
|
|
29
30
|
};
|
|
30
31
|
const getCell = (col, slots, context) => {
|
|
31
|
-
const
|
|
32
|
+
const columnId = col.accessorKey || col.id || "";
|
|
33
|
+
const slotName = `cell-${columnId}`;
|
|
32
34
|
if (slots[slotName]) {
|
|
33
35
|
return slots[slotName]({
|
|
36
|
+
cell: context.cell,
|
|
34
37
|
row: context.row,
|
|
35
|
-
context,
|
|
36
38
|
value: context.getValue()
|
|
37
39
|
});
|
|
38
40
|
}
|
|
39
|
-
|
|
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 : "-";
|
|
40
46
|
};
|
|
41
|
-
const processColumns = (columnHelper, columns, slots) => {
|
|
47
|
+
const processColumns = (columnHelper, columns, slots, table) => {
|
|
42
48
|
return columns.map((col) => {
|
|
43
|
-
if (col
|
|
44
|
-
const groupCol = col;
|
|
49
|
+
if ("columns" in col && Array.isArray(col.columns)) {
|
|
45
50
|
return columnHelper.group({
|
|
46
|
-
id:
|
|
47
|
-
header: (context) => getHeader(
|
|
48
|
-
footer: (context) => getFooter(
|
|
49
|
-
columns: processColumns(columnHelper,
|
|
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
|
|
50
56
|
});
|
|
51
57
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
58
|
+
const accessorCol = col;
|
|
59
|
+
if (accessorCol.accessorKey) {
|
|
60
|
+
return columnHelper.accessor(accessorCol.accessorKey, {
|
|
61
|
+
id: accessorCol.id || accessorCol.accessorKey,
|
|
55
62
|
header: (context) => getHeader(col, slots, context),
|
|
56
|
-
footer: (context) => getFooter(col, slots, context),
|
|
57
|
-
cell: (context) => getCell(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
|
|
58
66
|
});
|
|
59
67
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
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()),
|
|
63
79
|
header: (context) => getHeader(col, slots, context),
|
|
64
|
-
footer: (context) => getFooter(col, slots, context),
|
|
65
|
-
cell: (context) => getCell(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
|
|
66
83
|
});
|
|
67
84
|
});
|
|
68
85
|
};
|
package/dist/shared/utils.js.map
CHANGED
|
@@ -1 +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'\
|
|
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>,\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
CHANGED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
function defineColumns(columns) {
|
|
4
|
-
return columns.map((col) => {
|
|
5
|
-
if ("columns" in col) {
|
|
6
|
-
return {
|
|
7
|
-
id: col.id,
|
|
8
|
-
type: "group",
|
|
9
|
-
header: col.header,
|
|
10
|
-
footer: col.footer,
|
|
11
|
-
columns: defineColumns(col.columns)
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
return {
|
|
15
|
-
id: col.id,
|
|
16
|
-
type: "accessor",
|
|
17
|
-
header: col.header,
|
|
18
|
-
footer: col.footer
|
|
19
|
-
};
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
exports.defineColumns = defineColumns;
|
|
24
|
-
//# sourceMappingURL=defineColumns.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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;;;;"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
function defineColumns(columns) {
|
|
2
|
-
return columns.map((col) => {
|
|
3
|
-
if ("columns" in col) {
|
|
4
|
-
return {
|
|
5
|
-
id: col.id,
|
|
6
|
-
type: "group",
|
|
7
|
-
header: col.header,
|
|
8
|
-
footer: col.footer,
|
|
9
|
-
columns: defineColumns(col.columns)
|
|
10
|
-
};
|
|
11
|
-
}
|
|
12
|
-
return {
|
|
13
|
-
id: col.id,
|
|
14
|
-
type: "accessor",
|
|
15
|
-
header: col.header,
|
|
16
|
-
footer: col.footer
|
|
17
|
-
};
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export { defineColumns as d };
|
|
22
|
-
//# sourceMappingURL=defineColumns.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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;;;;"}
|