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 }" /> - + 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 @@