From 8f64934ae0fc61fc437c3568d276fcf52b290662 Mon Sep 17 00:00:00 2001
From: mm <25961416+mlmoravek@users.noreply.github.com>
Date: Fri, 7 Jun 2024 14:06:14 +0200
Subject: [PATCH] feat(table): add `before` and `after` slot | add column
`display` prop (#947)
* feat(table): add `before` and `after` slot
* feat(table): add column `display` prop
---
packages/docs/components/Table.md | 29 ++++++++++---------
packages/oruga/src/components/table/Table.vue | 20 +++++++++++--
.../src/components/table/TableColumn.vue | 5 ++++
3 files changed, 39 insertions(+), 15 deletions(-)
diff --git a/packages/docs/components/Table.md b/packages/docs/components/Table.md
index c9ed26dfc..7be4f4efc 100644
--- a/packages/docs/components/Table.md
+++ b/packages/docs/components/Table.md
@@ -139,19 +139,21 @@ title: Table
### Slots
-| Name | Description | Bindings |
-| ----------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| default | Place o-table-column here | |
-| pagination | Override pagination label | **current** `number` - current page
**per-page** `number` - rows per page
**total** `number` - total rows count
**change** `(page: number): void ` - on page change event |
-| top-left | Additional slot if table is paginated | |
-| caption | Define a table caption here | |
-| preheader | Define preheader content here | |
-| check-all | Override check all checkbox | **is-all-checked** `boolean` - if all rows are checked
**is-all-uncheckable** `boolean` - if check all is uncheckable
**check-all** `(): void` - check all function |
-| detail | Place row detail content here | **row** `unknown` - row content
**index** `number` - row index |
-| empty | Define content if table is empty | |
-| footer | Define a custom footer | **column-count** `number` - counts of visible columns
**row-count** `number` - counts of visible rows |
-| loading | Override loading component | **loading** `boolean` - is loading state enabled |
-| bottom-left | Additional slot if table is paginated | |
+| Name | Description | Bindings |
+| ----------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| default | Place o-table-column here | |
+| before | Place extra `o-table-column` components here, even if you have some columns defined by prop | |
+| after | Place extra `o-table-column` components here, even if you have some columns defined by prop | |
+| pagination | Override pagination label | **current** `number` - current page
**per-page** `number` - rows per page
**total** `number` - total rows count
**change** `(page: number): void ` - on page change event |
+| top-left | Additional slot if table is paginated | |
+| caption | Define a table caption here | |
+| preheader | Define preheader content here | |
+| check-all | Override check all checkbox | **is-all-checked** `boolean` - if all rows are checked
**is-all-uncheckable** `boolean` - if check all is uncheckable
**check-all** `(): void` - check all function |
+| detail | Place row detail content here | **row** `unknown` - row content
**index** `number` - row index |
+| empty | Define content if table is empty | |
+| footer | Define a custom footer | **column-count** `number` - counts of visible columns
**row-count** `number` - counts of visible rows |
+| loading | Override loading component | **loading** `boolean` - is loading state enabled |
+| bottom-left | Additional slot if table is paginated | |
@@ -169,6 +171,7 @@ title: Table
| ---------------- | ---------------------------------------------------------------- | ----------------------------------------------------- | --------------------------- | ----------------------------------------------------------- |
| customSearch | Define a custom funtion for the filter search | (row: unknown, filter: string) => boolean | - | |
| customSort | Define a custom sort function | (a: unknown, b: unknown, isAsc: boolean) => number | - | |
+| display | Provide a display function to edit the output | (value: unknown, row: unknown) => string | - | |
| field | Define an object property key if data is an object | string | - | |
| headerSelectable | Make header selectable | boolean | - | false
|
| label | Define the column label | string | - | |
diff --git a/packages/oruga/src/components/table/Table.vue b/packages/oruga/src/components/table/Table.vue
index 7d71c5119..2c6107ad5 100644
--- a/packages/oruga/src/components/table/Table.vue
+++ b/packages/oruga/src/components/table/Table.vue
@@ -942,6 +942,12 @@ function getRowKey(row: unknown): unknown {
return row;
}
+/** get the formated row value for a column */
+function getColumnValue(row: unknown, column: TableColumn): string {
+ const prop = column.field ? getValueByPath(row, column.field) : row;
+ return column.display ? column.display(prop, row) : String(prop);
+}
+
// --- Filter Feature ---
const filters = ref>({});
@@ -1607,15 +1613,25 @@ function tdClasses(row: unknown, column: TableColumnComponent): ClassBind[] {
@slot Place o-table-column here
-->
+
+
+
- {{ column.field ? row[column.field] : row }}
+ {{ getColumnValue(row, column as TableColumn) }}
+
+
+
diff --git a/packages/oruga/src/components/table/TableColumn.vue b/packages/oruga/src/components/table/TableColumn.vue
index 510e9bfd8..616f16e93 100644
--- a/packages/oruga/src/components/table/TableColumn.vue
+++ b/packages/oruga/src/components/table/TableColumn.vue
@@ -20,6 +20,11 @@ const props = defineProps({
label: { type: String, default: undefined },
/** Define an object property key if data is an object */
field: { type: String, default: undefined },
+ /** Provide a display function to edit the output */
+ display: {
+ type: Function as PropType<(value: unknown, row: unknown) => string>,
+ default: undefined,
+ },
/** Define a column sub heading */
subheading: { type: String, default: undefined },
/** Add addtional meta information for the column for custom purpose*/