diff --git a/packages/docs/components/Table.md b/packages/docs/components/Table.md
index 821578080..755384906 100644
--- a/packages/docs/components/Table.md
+++ b/packages/docs/components/Table.md
@@ -177,8 +177,8 @@ title: Table
| sortable | Enable column sortability | boolean | - | false
|
| sticky | Whether the column is sticky or not | boolean | - | false
|
| subheading | Define a column sub heading | string | - | |
-| tdAttrs | Adds native attributes to td | (row: unknown, column: Column) => object | - | Default function (see source code) |
-| thAttrs | Adds native attributes to th | (column: Column) => object | - | Default function (see source code) |
+| tdAttrs | Adds native attributes to td | (row: unknown, column: typeof props) => object | - | Default function (see source code) |
+| thAttrs | Adds native attributes to th | (column: typeof props) => object | - | Default function (see source code) |
| visible | Define whether the column is visible or not | boolean | - | true
|
| width | Column fixed width | number\|string | - | |
diff --git a/packages/oruga/src/components/table/Table.vue b/packages/oruga/src/components/table/Table.vue
index a18da7ed1..6944319e1 100644
--- a/packages/oruga/src/components/table/Table.vue
+++ b/packages/oruga/src/components/table/Table.vue
@@ -716,6 +716,8 @@ const tableColumns = computed(() =>
index: column.index,
identifier: column.identifier,
...toValue(column.data),
+ thAttrsData: {},
+ tdAttrsData: [],
})),
);
@@ -793,17 +795,19 @@ const visibleRows = computed(() => {
});
const visibleColumns = computed(() => {
- if (!tableColumns.value) return tableColumns.value;
- return tableColumns.value.filter((column) => {
- return column.visible || column.visible === undefined;
- });
+ if (!tableColumns.value) return [];
+ return tableColumns.value.filter(
+ (column) => column.visible || column.visible === undefined,
+ );
});
-watch([() => visibleRows.value, () => visibleColumns.value], () => {
- // process tdAttrs when row or columns got changed
+/** process thAttrs & tdAttrs when row or columns got changed */
+watch([visibleRows, visibleColumns], () => {
if (visibleColumns.value.length && visibleRows.value.length) {
for (let i = 0; i < visibleColumns.value.length; i++) {
const col = visibleColumns.value[i];
+ col.thAttrsData =
+ typeof col.thAttrs === "function" ? col.thAttrs(col) : {};
col.tdAttrsData = visibleRows.value.map((data) =>
typeof col.tdAttrs === "function" ? col.tdAttrs(data, col) : {},
);
@@ -1808,7 +1812,9 @@ function tdClasses(row: unknown, column: TableColumnComponent): ClassBind[] {
tag="span"
:props="{ column, index }" />
- {{ column.subheading }}
+
+ {{ column.subheading }}
+
|
diff --git a/packages/oruga/src/components/table/TableColumn.vue b/packages/oruga/src/components/table/TableColumn.vue
index b8cc9f45a..b835a847b 100644
--- a/packages/oruga/src/components/table/TableColumn.vue
+++ b/packages/oruga/src/components/table/TableColumn.vue
@@ -1,17 +1,10 @@
diff --git a/packages/oruga/src/components/table/types.ts b/packages/oruga/src/components/table/types.ts
index d8657398b..40081f35c 100644
--- a/packages/oruga/src/components/table/types.ts
+++ b/packages/oruga/src/components/table/types.ts
@@ -1,45 +1,12 @@
+import type {
+ ComponentProps,
+ ComponentSlots,
+} from "vue-component-type-helpers";
import type { ComponentPublicInstance, StyleValue } from "vue";
import TableColumn from "./TableColumn.vue";
import type { ProviderItem } from "@/composables";
-import type { ComponentSlots } from "vue-component-type-helpers";
-export type Column = Partial<{
- /** Define the column label */
- label: string;
- /** Define the object property key */
- field: string;
- /** Define a column sub label */
- subheading: string;
- /** Enable column sortability */
- sortable: boolean;
- /** Enable an additional searchbar below the column header */
- searchable: boolean;
- /** Add addtional meta information for the column */
- meta: unknown;
- /** Column fixed width */
- width: number | string;
- /** Define column value as number */
- numeric: boolean;
- /**
- * Position of the column content
- * @values left, centered, right
- */
- position: string;
- /** Define whether the column is visible or not - default true */
- visible: boolean;
- /** Define a custom sort function */
- customSort: (a: Column, b: Column, isAsc: boolean) => number;
- /** Define a custom funtion for the filter search */
- customSearch: (row: unknown, filter: string) => boolean;
- /** Whether the column is sticky or not */
- sticky: boolean;
- /** Make header selectable */
- headerSelectable;
- /** Adds native attributes to th :th-attrs="(column)" => ({})" */
- thAttrs: (column: Column) => object;
- /** Adds native attributes to td :td-attrs="(row, column)" => ({})" */
- tdAttrs: (row: unknown, column: Column) => object;
-}>;
+export type Column = ComponentProps;
export type TableColumnSlots = ComponentSlots;
@@ -47,9 +14,11 @@ export type TableColumnComponent = Column & {
$el: ComponentPublicInstance;
$slots: TableColumnSlots;
style: StyleValue;
- thAttrsData: object;
- tdAttrsData: Array